Este artículo le enseña cómo usar el editor de texto Bootstrap-Wysiwyg para dar una jugada completa a las ventajas del editor. Espero que puedas ganar algo.
Características principales:
Super pequeño 5kb
Soporte automático de llave de acceso rápido (Mac y Windows)
Arrastre y suelte insertar imágenes, admitir la carga de imágenes (admite la fotografía del teléfono móvil)
Soporte de entrada de sonido (soporte de Chrome)
Permitir que las barras de herramientas personalizadas usen todo el contenido de Bootstrap, fuentes
No se utilizan estilos obligatorios
………………………………………………………………………
De hecho, es más que eso, todos necesitan explorarlo ellos mismos, ¡vamos!
En realidad es muy simple de usar. Vierta el JS de Bootstrap relacionados con CSS, JS, JQuery y Bootstrap-Wysiwyg, de la siguiente manera:
<link href = "bootstrap-Combined.no-icons.min.css" rel = "stylesheet"> <link href = "bootstrap-fresponsive.min.css" rel = "Stylesheet"> <Link href = "http://netdna.bootstrappcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel = "stylesheet"> <link rel = "stylesheet" href = "index.css" type = "text/css"> </link> <script src = "jQuery1.9. type = "text/javascript"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-wysiwyg.js" type = "text/javascript"> </script> <script src = "externo/jQuery.hotkeys.js" type = "text/javascript"> <script> </script script/script
Definir propiedades y métodos del elemento del menú relacionados:
function inittoolBarbootstraPBindings () {var fonts = ['serif', 'sans', 'arial', 'arial negro', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman', 'VERDANA', VERDANA ', VERDA $ ('[title = font]'). Siblings ('. Dropdown-Menu'); $ .each (fonts, function (idx, fontname) {fontTarget.append ($ ('<li> <a data-edit = "fontname' + fontname + '" style = "font-family:/' ' + fontname +'/'">' + fontname + '</a> </li>);});}); $ ('A [Title]'). ToolTip ({Container: 'Body'}); $ ('. $ ('[Data-Role = Magic-Overlay]'). Cada (function () {var Overlay = $ (this), target = $ (Overlay.Data ('Target')); Overlay.css ('Opacity', 0) .CSS ('Position', 'Absolute'). Offset (Target.OffSet ()). width (uuterwidth ()). }); if ("onWebkitSpeechChange" en document.createElement ("input")) {var editorOffSet = $ ('#editor'). offset (); $ ('#VoiceBtn'). CSS ('Position', 'Absolute'). Offset ({top: editorOffset.top, Left: EditorOffset.left+$ ('#editor'). InnerWidth ()-35}); } else {$ ('#VoiceBtn'). Hide (); }}; function showroralert (razón, detalle) {var msg = ''; if (razon === 'no compatible-archivo-type') {msg = "formato no compatible" +detalle; } else {console.log ("Error de carga de archivo", razón, detalle); } $ ('<div> <button type = "Button" data-dismiss = "alert"> × </boton>'+'<strong> Error de carga de archivo </strong>'+msg+'</div>'). PrependTo ('#alerts'); }; initoolbarbootstrapbindings (); $ ('#editor'). wysiwyg ({fileUploadError: showerRoralert});Finalmente, el código HTML:
<div data-role = "editor-toolbar" data-target = "#editor"> <div> <a data-toggle = "desplegable"> <i> </i> <b> </b> </a> <ul> </ul> </div> <div> <a data-toggle = "desplegable"> <i> </i> <b> </b> </a> <ul> <ul> <ul> <ul> 5 "> <font size =" 5 "> enorme </font> </a> </li> <li> <a data-edit =" fontSize 3 "> <font size =" 3 "> normal </font> </a> </li> <li> data-edit="fontSize 1"><font size="1">Small</font></a></li> </ul> </div> <div> <a data-edit="bold"><i></i></a> <a data-edit="italic"><i></i></a> <a data-edit="strikethrough"><i></i></a> <a data-edit = "subrayline"> <i> </i> </a> </div> <div> <a data-edit = "insertUnOrderDlist"> <i> </i> </a> <a data-edit = "oupe"> <i> </i> </a> <a data-Edit = "Outalent"> <i> </i> </a> <a <a a a. data-edit = "Outlyent"> <i> </i> </a> <a data-edit = "outestre"> <i> </i> </a> <a data-edit = "Indent"> <i> </i> </a> </div> <div> <a data-edit = "justifyleft"> <i> </i> </a> <a a. data-Edit = "justifycenter"> <i> </i> </a> <a data-edit = "justifyright"> <i> </i> </a> <a data-edit = "justifyfull"> <i> </i> </a> </div> <div> <a data-toggle = "desplegable">> </i> </a> <viv> <div> <1 inping tithole = "urly" type = "text" data-edit = "createLink"/> <botón type = "botón"> agregar </botón> </div> <a data-edit = "Unlink"> <i> </i> </a> </div> <div> <air data-edit = "insertimage"/> </div> <div> <a data-edit = "no dowe"> <i> </i> </a> <a data-edit = "redo"> <i> </i> </a> </div> <input type = "text" data-edit = "inserTtext" id = "voz" x-w-webkit = "" </inhiDiT = "editor" INTER "ENTER" ENTER "X-WABKIT Contenido ... </div>
Si aún desea estudiar en profundidad, puede hacer clic aquí para aprender y adjuntarle un tema maravilloso: Tutorial de aprendizaje de Bootstrap
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.