In diesem Artikel werden Sie beigebracht, wie Sie mit Bootstrap-Wysiwyg-Texteditoredieren den Vorteilen des Editors volles Stück verleihen. Ich hoffe, Sie können etwas gewinnen.
Hauptmerkmale:
Super klein 5 KB
Automatischer Hotkey -Support (Mac und Windows)
Ziehen und Drop -Bildern einfügen, unterstützen Sie Bilder (Unterstützen Sie die Mobiltelefonfotografie).
Unterstützen Sie die Toneingabe (Chromunterstützung)
Ermöglichen Sie benutzerdefinierte Symbolleisten, alle Bootstrap -Inhalte und Schriftarten zu verwenden
Es werden keine obligatorischen Stile verwendet
………………………………………………………………………………………………………………………………………………………………………………………………….
Tatsächlich ist es mehr als das, jeder muss es selbst erkunden, kommen!
Es ist eigentlich sehr einfach zu bedienen. Gießen Sie die JS von Bootstrap-bezogenen CSS, JS, JQuery und Bootstrap-Wysiwyg wie folgt ein:
<link href = "bootstrap-combiniert.no-icons.min.css" rel = "stylesheet"> <link href = "bootstrap-responsiv.min.css" rel = "Stylesheet"> <link "> <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.1.min.js" type="text/javascript"></script><script src="bootstrap.min.js"></script><script src="bootstrap-wysiwyg.js" type="text/javascript"></script><script src="external/jquery.hotkeys.js" type="text/javascript"></script>
Definieren Sie verwandte Menüelementeigenschaften und -methoden:
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]'). Geschwister ('. Dropdown-Menu'); $ .each (fonts, function (idx, fontName) {fontTarget.Append ($ ('<li> <a data-edit = "fontName' + fontname + '" style = "font-family:/' ' + fontname +'/'">' + fontname + '</a> </li>')); $ ('a [title]'). $ ('. Dropdown-Menu Eingabe'). click (function () {return false;}) .Change (function () {$ (this) .parent ('. $ ('[Data-Role = Magic-Overlay]'). Jede (Funktion () {var overlay = $ (this), target = $ (Overlay.data ('Ziel'); Overlay.css ('opazität', 0) .css ('Position', 'Absolute'). Offset.Offset (). }); if ("onWebkitSpeechChange" in document.createelement ("input")) {var editorOffset = $ ('#editor'). Offset (); $ ('#VoiceBtn'). CSS ('Position', 'Absolute'). Offset ({Top: editorOffset.top, links: editorOffset.left+$ ('#editor'). Innerwidth ()-35}); } else {$ ('#VoiceBtn'). hide (); }}; Funktion duschroral (Grund, Detail) {var msg = ''; if (Reason === 'Nicht unterstütztes File-Typ') {msg = "Uns unterstütztes Format" +Detail; } else {console.log ("Fehler -Uploading -Datei", Reason, Detail); } $ ('<div> <button type = "button" data-dismiss = "alert"> × </button>'+'<strong> Datei-Upload-Fehler </strong>'+msg+'</div>'). prependTo ('#alarms'); }; Inittoolbarbootstrapbindings (); $ ('#editor').Schließlich der HTML -Code:
<div data-role="editor-toolbar" data-target="#editor"> <div> <a data-toggle="dropdown"><i></i><b></b></a> <ul> </ul> </div> <div> <a data-toggle="dropdown"><i></i><b></b></a> <ul> <li><a data-edit="fontSize 5 "> <font size =" 5 "> riesig </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 "> </font> </li> <font size =" 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="underline"><i></i></a> </div> <div> <a data-edit="insertunorderedlist"><i></i></a> <a data-edit="outdent"><i></i></a> <a data-edit = "outdent"> <i> </i> </a> <a data-edit = "outdent"> <i> </i> </a> <a data-edit = "outdent"> <i> </i> </a> <a data-edit = "eingeleitet"> <i> </i> </a> </div> </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a </div> <a <- 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></a> </div> <div> <a data-toggle="dropdown"><i></i></a> <div> <input placeholder="URL" type="text" data-edit="createLink"/> <button type="button">Add</button> </div> <a data-edit="unlink"><i></i></a> </div> <div> <a id = "pictureBtn"> <i> </i> </a> <Eingabe type = "Datei" data-role = "Magic-Overlay" data-target = "#pictionBtn" data-edit = "InsertImage"/> </div> <div> <a data-edit = "Undero"> </i> </a> </a> <a data-edit = " <Eingabe type = "text" data-edit = "insertText" id = "VoiceBtn" x-Webkit-rede-Sprache = ""> </div> <div id = "editor"> Inhalt eingeben… </div>
Wenn Sie noch eingehend studieren möchten, können Sie hier klicken, um Ihnen ein wunderbares Thema zu lernen und anzuhängen: Bootstrap -Lern -Tutorial
Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.