Este artigo ensina como usar o editor de texto de bootstrap-wysiwyg para dar um jogo completo às vantagens do editor. Espero que você possa ganhar algo.
Principais recursos:
Super pequeno 5kb
Suporte automático de tecla de atalho (Mac e Windows)
Arraste e solte as imagens de inserção, suporta o upload de fotos (suporta a fotografia de celular)
Suporte de entrada de som (suporte do Chrome)
Permita que as barras de ferramentas personalizadas usem todo o conteúdo do bootstrap, fontes
Nenhum estilos obrigatórios é usado
…………………………………………………………………
Na verdade, é mais do que isso, todo mundo precisa explorá -lo, vamos lá!
Na verdade, é muito simples de usar. Despeje o JS de CSS, JS, JQuery e Bootstrap Wysiwyg, como segue::
<link href = "bootstrap-combined.no-icons.min.css" rel = "Stylesheet"> <link href = "bootstrap-sponsive.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> type = "text/javascript"> </script> <script src = "bootstrap.min.js"> </script> <script src = "bootstrap-wysiwyg.js" type = "text/javascrcript"> </script> <cript)
Defina propriedades e métodos do item de menu relacionados:
function initToolbarBootstrapBindings() { var fonts = ['Serif', 'Sans', 'Arial', 'Arial Black', 'Courier', 'Courier New', 'Comic Sans MS', 'Helvetica', 'Impact', 'Lucida Grande', 'Lucida Sans', 'Tahoma', 'Times', 'Times New Roman', 'Verdana'], fontTarget = $ ('[title = font]'). irmãos ('. DropDown-Menu'); $ .ECH (fontes, função (idx, fontname) {fonttarget.append ($ ('<li> <a data-edit = "fontname' + fontName + '" style = "font-family:/' '' + fontname + '/' '' '' '' '' '' ') $ ('a [title]'). Tooltip ({contêiner: 'body'}); $ ('. DOLDOWND-MENU ENTRO'). Clique em (function () {return false;}) .change (function () {$ (this) .parent ('. Dropdown-menu'). Siblings ('. $ ('[Role de dados = Magic-overlay]'). cada (function () {var sobrevery = $ (this), Target = $ (sobrevery.data ('Target')); sobrever.css ('opacity', 0) .css ('posição', 'absoluto'). }); if ("onwebkitspeechChange" em document.createElement ("input")) {var editoroffset = $ ('#editor'). offset (); $ ('#VoiceBtn'). CSS ('Posição', 'Absolute'). Offset ({Top: EditorOffset.top, esquerda: editorOffset.left+$ ('#editor'). Innerwidth ()-35}); } else {$ ('#VoiceBtn'). hide (); }}; função chuveiro (razão, detalhe) {var msg = ''; if (Razão === 'Tipo de arquivo não suportado') {msg = "Formato não suportado" +detalhe; } else {console.log ("Erro de upload do arquivo", razão, detalhe); } $ ('<div> <button type = "button" data-dismiss = "alert"> × </button>'+'<strong> Erro de upload de arquivo </strong>'+msg+'</div>'). precendto ('#alertas'); }; inittoolbarbootstrapBindings (); $ ('#editor'). wysiwyg ({fileUploaderror: chuveiro});Finalmente, o código HTML:
<div data-role = "editor-toolbar" data-target = "#editor"> <div> <a data-toggle = "suspenso"> <i> </i> <b> </b> </a> <ul> </ul> </b> <div> <div> <a data-tgle = "DropDown" <i> </i> <b> <b> data-edit="fontSize 5"><font size="5">Huge</font></a></li> <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li> <li><a data-edit="fontSize 3"><font size="3">Normal</font></a></li> <li> <a data-edit = "fontsize 1"> <font size = "1"> pequeno </font> </a> </li> </ul> </div> <div> <a data-edit = "Bold"> <i> </i> data-edit = "strikethrough"> <i> </i> </a> <a data-edit = "sublinhado"> <i> </i> </a> </div> <div> <a data-edit = "insertunorderedlist"> <i> </i> </a> <aed-edi-edit = "avermedlist"> data-edit = "Outsoud"> <i> </i> </a> <a data-edit = "outfent"> <i> </i> </a> <a data-edit = "outdent"> <i> </i> </a> <a data-edit = "indent"> <i> </i> data-edit = "justifyleft"> <i> </i> </a> <a data-edit = "justifycenter"> <i> </i> </a> <a data-edit = "justifyright"> <i> </i> </a> <a data-edit = "justifyfull"> <i> </i> </i> data-toggle = "suspenso"> <i> </i> </a> <div> <inspumppedolder = "url" type = "text" data-edit = "createLink"/> <button type = "button"> add </butão> </div> <a data-edit = "unclow"> <i> </i> </a- id = "Picturebtn"> <i> </i> </a> <input type = "file" data-role = "magic-overlay" data-target = "#PictureBtn" data-edit = "insertImage"/> </div> <div </div> <input type = "text" data-edit = "insertText" id = "vozbtn" x-webkit-declara = ""> </div> <div id = "editor"> insira conteúdo… </div>
Se você ainda deseja estudar em profundidade, pode clicar aqui para aprender e anexar um tópico maravilhoso a você: Bootstrap Learning Tutorial
O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.