Bootstrap proporciona un componente de texto rico llamado Wysiwyg, que se utiliza para mostrar y editar datos de texto enriquecidos, pero se desconoce cómo guardar los datos editados en la base de datos MySQL. Además, no se sabe cómo mostrar los datos en la base de datos MySQL a Wysiwyg. Para estos dos problemas, ¡déjame decirte la solución!
1. Muestra de efecto
Primero, echemos un vistazo a cómo funciona:
Hay una imagen en el texto rico y una lista de números.
Podemos ver que los datos editados se guardan correctamente y la pantalla correspondiente después de guardar.
2. Texto rico
La explicación de Du Niang de textos ricos es la siguiente:
El formato de texto enriquecido (generalmente denominado RTF) es un formato de documento multiplataforma desarrollado por Microsoft. La mayoría del software de procesamiento de textos puede leer y guardar documentos RTF. RTF es la abreviatura de TextFormat rico, que significa formato de texto múltiple. Este es un archivo similar al formato DOC (documento de Word) con buena compatibilidad. Puede abrirlo y editarlo utilizando el "Pad, accesorios" en Windows "en Windows. RTF es una estructura de archivos muy popular, y muchos editores de texto lo admiten. La configuración general del formato, como la configuración de fuente y párrafo, la configuración de la página, etc., pueden existir en formato RTF, que puede realizar el acceso mutuo entre los archivos Word y WPS hasta cierto punto.
Si el texto enriquecido no contiene imágenes, podemos usar el método de transcodificación HTML ordinario, consulte el Título 4; Si el texto enriquecido contiene imágenes, la transcodificación HTML ordinaria ya no puede satisfacernos, por lo que necesitamos usar jQuery.base64.js, consulte el Título 3.
Luego, al mismo tiempo, echemos un vistazo a la definición del campo MySQL:
`description` longText no comentario nulo 'Proyecto descripción detallada',
El tipo de campo es LongText (LongText tiene una longitud máxima de 4294967295 caracteres (2^32-1), aunque no sé qué tan grande es).
3. JQuery.base64
①. Introducir jQuery.base64.js
<script type = "text/javaScript" src = "$ {ctx} /Components/jquery/jquery.base64.js"> </script>
Al mismo tiempo, establezca la codificación UTF-8 para garantizar que el chino no esté confuso.
$ .Base64.Utf8Encode = true;
②, envíe un formulario de texto enriquecido
Var editor = "<input type = 'Hidden' name = '" + $ this.attr ("name") + "' value = '"
+ $ .Base64.btoa ($ this.html ()) + "' />";
Código clave: Convierta el valor HTML del objeto de texto enriquecido a base64 y luego lo encapsula en el formulario de formulario.
Consulte lo siguiente para obtener detalles (una encapsulación de formulario completa de formulario, consulte el marco DWZ):
/** * formulario AJAX cargado con archivo * * @param {object} * form * @param {object} * devolución de llamada */function iframecallback (form, callback) {yunm.debug ("cargar procesamiento con archivo"); var $ form = $ (form), $ iframe = $ ("#callbackframe"); // editor de texto rico $ ("div.editor", $ form) .each (function () {var $ this = $ (this); var editor = "<input type = 'hidden' name = '" + $ this.attr ("name") + "' valor = '" + $ .base64.btoa ($ this.html () + " />"; $ form.append (editor);};} var data = $ form.data ('bootstraPvalidator'); if (data) {if (! data.isValid ()) {return false; }} if ($ iframe.size () == 0) {$ iframe = $ ("<iframe id = 'callbackframe' name = 'callbackframe' src = 'sobre: blank' style = 'Display: Ninguno'> </iframe>") .appendTo ("cuerpo"); } if (! Form.AJAX) {$ form.append ('<input type = "Hidden" name = "ajax" value = "1" />'); } form.target = "Callbackframe"; _iframeresponse ($ iframe [0], devolución de llamada || yunm.ajaxdone);} function _iframeresponse (iframe, callback) {var $ iframe = $ (iframe), $ document = $ (documento); $ document.rigger ("AjaxStart"); $ iframe.bind ("load", function (event) {$ iframe.unbind ("load"); $ document.trigger ("ajaxstop"); if (iframe.src == "javascript: '%3chtml%3e%3c/html%3e';" || // para // safari iframe.src == "JavaScript: '<html> </html>';") {// para ff, es decir, return; Doc.Body.innerHtml == "False") Respuesta; // La respuesta es el documento HTML o la respuesta de texto sin formato = Doc.Body.innerhtml;③, visualización de datos de texto enriquecidos
$ ('#editor'). html ($. base64.atob (descripción, verdadero));
Decodifique el código HTML guardado en la base de datos a través de Base64.
④, componente Wysiwyg
Con respecto al código de encapsulación del componente WYSIWYG, lo he subido a la base del código CSDN, que puede referenciarse en detalle.
4. Método de transcodificación HTML ordinario
función html_encode (str) {var s = ""; if (str.length == 0) return ""; s = str.replace (/&/g, ">"); s = s.replace (/</g, "<"); s = s.replace (// g, ">"); s = s.replace (// g, ""); s = s.replace (// n/g, "<br>"); return s;} function html_decode (str) {var s = ""; if (str.length == 0) return ""; 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 "); return s;}En términos generales, los dos métodos anteriores se utilizan para codificar y decodificar los datos HTML, pero no hay nada que hacer sobre el ahorro de imagen.
Si aún desea estudiar en profundidad, puede hacer clic aquí para estudiar y adjuntar 3 temas emocionantes a usted:
Tutorial de aprendizaje de bootstrap
Tutorial práctico de bootstrap
Tutorial de uso de complemento de bootstrap
Lo anterior se trata de este artículo. Espero que sea útil para todos comprender el rico componente de texto Wysiwyg.