Echemos un vistazo a la descripción oficial de las funciones relevantes de este editor.
1. Puede vincular automáticamente las teclas de acceso rápido estándar para operaciones comunes en plataformas Mac y Wndows.
2. Puede insertar imágenes arrastrando y dejando caer; Soporte de la carga de imágenes (también puede obtener fotos en su dispositivo móvil)
3. Entrada de reconocimiento de voz (solo navegador Chrome)
4. Permitir barras de herramientas personalizadas; No se generan etiquetas adicionales; Apoye el sitio web para hacer un uso completo de las excelentes características de las bibliotecas de herramientas como Bootstrap, Font Awesome, etc.
5. Todo depende de ti si no hay un estilo obligatorio
6. Confíe en las características estándar del navegador, sin código no estándar; La barra de herramientas y las funciones de teclado se pueden personalizar y pueden ejecutar cualquier comando admitido por el navegador.
7. Este editor no creará un marco separado, un área de texto de respaldo, etc., intente mantenerlo simple como sea posible y ejecutarlo en un DIV.
8. (Opcional) borre el espacio de la cola; Div y transeje vacío claro
9. Debe funcionar con los navegadores modernos (probados en Chrome 26, Firefox 19, Safari 6 y los usuarios informan que pueden trabajar en IE10)
10. Soporte de navegador móvil (probado en iOS 6 iPad/iPhone y Android 4.1.1 Chrome)
Nota: Wysiwyg y Wysihtml5 son dos editores diferentes. Wysiwyg es una versión mejorada de Wysihtml5, que es relativamente similar. Entonces puede usarlo de acuerdo con sus necesidades.
Sitio web oficial de Wysiwyg: http://mindmup.github.io/bootstrap-wysiwyg/
Sitio web chino de Wysiwyg: http://www.bootcss.com/p/bootstrap-wysiwyg//
Wysihtml5 Sitio web oficial: http://jhollingworth.github.io/bootstrap-wysihtml5/
Dado que Wysiwyg es una versión mejorada de Wysihtml5, permítanme hablar sobre el uso de Wysiwyg, Wysihtml5 es similar.
Pasos para usar
1. Introduce los siguientes archivos JS y CSS. Aquí me gustaría indicar que el sitio web oficial es solo un uso general, y los siguientes documentos deben introducirse antes de que puedan entrar en vigencia, por lo que este sitio web se centra en la aplicación real, y estos detalles no pueden ignorarse.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel = "Stylesheet href = "http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script> <script src = "https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"> </script> <script> src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/bootstrap/sets/js/google-code-petify/prettify.js"> </script> </script> </scruend " href = "index.css" rel = "stylesheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. Agregue una pieza de código JS. Debido a demasiado código, no se enumerará aquí. Este sitio web ha ordenado el código fuente. Consulte el código fuente de demo.html
.........
3. Agregue el siguiente código HTML de formato a la etiqueta del cuerpo. Cabe señalar aquí que el editor no está encapsulado, pero escribe directamente el código en la página HTML. Todo el editor se puede dividir en dos partes, la barra de herramientas superior y el cuadro de edición de texto.
1) Barra de herramientas superior: es un div.btn-toolbar que contiene múltiples grupos Div.BTN. Cada botón de herramienta es un Div.BTN-Group. En cada grupo Div.BTN, podemos configurar el texto de inmediato para mostrar chino.
<div data-role = "editor-toolbar" data-target = "#editor"> <div> </div> .......... <div> </div> </div>
También hay una herramienta de entrada de voz HTML5 aquí. El código es el siguiente:
<input type = "text" data-edit = "inserttext" id = "voiceBtn" x-webkit-spech = "">
2) Cuadro de texto de contenido: Div#editor
<div id = "editor"> contenido </div>
Lo anterior es una breve introducción a Bootstrap-Wysiwyg, veamos el efecto
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap
De hecho, WYSIWG solo necesita definir algunos Divs para construir un editor visual, mientras que la parte de edición solo necesita un DIV con un editor de identificación para completarlo. Espero que esta breve introducción al editor visual de Bootstrap-Wysiwyg realmente ayude a todos.