O Bootstrap fornece um rico componente de texto chamado wysiwyg, que é usado para exibir e editar dados de texto ricos, mas não se sabe como salvar os dados editados no banco de dados MySQL. Além disso, não se sabe como exibir os dados no banco de dados MySQL para Wysiwyg. Para esses dois problemas, deixe -me dizer a solução!
1. Exibição de efeito
Primeiro, vamos dar uma olhada em como funciona:
Há uma imagem no texto rico e uma lista de números
Podemos ver que os dados editados são salvos com sucesso e a tela correspondente após a economia.
2. Texto rico
A explicação de Du Niang sobre textos ricos é a seguinte:
O formato de texto rico (geralmente referido como RTF) é um formato de documento de plataforma cruzada desenvolvida pela Microsoft. A maioria dos softwares de processamento de texto pode ler e salvar documentos RTF. RTF é a abreviação do rico formato de texto, que significa formato multi-texto. Este é um arquivo semelhante ao formato Doc (documento do Word) com boa compatibilidade. Você pode abrir e editá -lo usando o "Word Pad" em Windows "Acessórios". O RTF é uma estrutura de arquivos muito popular, e muitos editores de texto o suportam. Configurações gerais de formato, como configurações de fonte e parágrafo, configurações de página etc., podem existir no formato RTF, que podem obter acesso mútuo entre os arquivos Word e WPS até certo ponto.
Se o texto rico não contiver imagens, podemos usar o método de transcodificação HTML comum, consulte o Título 4; Se o texto rico contiver imagens, a transcodificação HTML comum não poderá mais nos satisfazer, por isso precisamos usar o jQuery.base64.js, consulte o Título 3.
Então, ao mesmo tempo, vamos dar uma olhada na definição do campo MySQL:
`description` LongText Not Null Comment 'Project Detalhered Descrição',
O tipo de campo é o LongText (o LongText possui um comprimento máximo de 4294967295 caracteres (2^32-1), embora eu não saiba o tamanho do que é).
3. JQuery.Base64
①. Introduce jQuery.base64.js
<script type = "text/javascript" src = "$ {ctx} /components/jquery/jquery.base64.js"> </sCript>
Ao mesmo tempo, defina a codificação do UTF-8 para garantir que o chinês não seja iluminado.
$ .base64.utf8Encode = true;
②, envie um formulário de texto rico
var editor = "<Tipo de entrada = 'Hidden' name = '" + $ this.attr ("nome") + "' value = '"
+ $ .base64.btoa ($ this.html ()) + "' />";
Código da chave: converta o valor HTML do objeto de texto rico em Base64 e depois o encapsula no formulário.
Veja o seguinte para obter detalhes (um formulário inteiro enviado encapsulamento do formulário, consulte a estrutura DWZ):
/** * formulário AJAX Carregado com arquivo * * @param {object} * form * @param {object} * retorno de chamada */função ifRameCallback (formulário, retorno de chamada) {yunm.debug ("upload de processamento com arquivo"); var $ form = $ (form), $ iframe = $ ("#chamada de retorno"); // editor de texto rico $ ("div.editor", $ form) .ECH (function () {var $ this = $ (this); var editor = "<entrada de entrada = 'hidden' name = '" + $ this.attr ("name") + "' value = '" + $ .base64.btoa ($ this.html ())) +; var dados = $ form.data ('bootstrapValidator'); if (data) {if (! data.isValid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'sobre: em branco' style = 'display: nenhum'> </iframe>") .appendto ("corpo"); } if (! form.ajax) {$ form.append ('<input type = "hidden" name = "ajax" value = "1" />'); } form.target = "CallbackFrame"; _ifRameResponse ($ iframe [0], retorno de chamada || yunm.ajaxdone);} função _iframeSponse (iframe, retorno de chamada) {var $ iframe = $ (iframe), $ document = $ (document); $ document.trigger ("Ajaxstart"); $ iframe.bind ("load", function (event) {$ iframe.unbind ("load"); $ document.trigger ("ajaxstop"); if (iframe.src == "javascript: '%3chtml%3e%3c/html%3e';" | "Javascript: '<html> </html>'; Doc.Body.innerhtml == "False") Retorno; // Resposta é o documento HTML ou o texto simples = doc.body.innerhtml;③, exibição de dados de texto rico
$ ('#editor'). html ($. base64.atob (descrição, true));
Decode o código HTML salvo no banco de dados através da base64.
④, componente wysiwyg
Em relação ao código de encapsulamento do componente WYSIWYG, eu o enviei para a base de código CSDN, que pode ser referenciada em detalhes.
4. Método de transcodificação HTML comum
função html_encode (str) {var s = ""; if (str.Length == 0) retornar ""; s = str.Replace (///g, ">"); s = s.Replace (/</g, "<"); s = s.Replace (// g, ">"); s = s.Replace (// g, ""); s = s.Replace (// n/g, "<br>"); Return s;} função html_decode (str) {var s = ""; if (str.Length == 0) retornar ""; s = str.Replace (// g, "&"); s = s.Replace (/</g, "<"); s = s.Replace (// g, ">"); s = s.Replace (// g, ""); s = s.Replace (/'/g, "/'"); s = s.Replace (// g, "/" "); s = s.Replace (/<br>/g,"/n "); retorna s;}De um modo geral, os dois métodos acima são usados para codificar e decodificar os dados HTML, mas não há nada a fazer sobre a economia de imagem.
Se você ainda deseja estudar em profundidade, pode clicar aqui para estudar e anexar 3 tópicos interessantes a você:
Tutorial de aprendizado de bootstrap
Tutorial prático de bootstrap
Tutorial de uso de plug-in bootstrap
O acima é tudo sobre este artigo. Espero que seja útil que todos entendam o rico componente de texto Wysiwyg.