Schauen wir uns die offizielle Beschreibung der relevanten Funktionen dieses Herausgebers an.
1. Es kann automatisch Standard -Hotkeys für gemeinsame Vorgänge auf Mac- und Wndows -Plattformen binden.
2. Sie können Bilder einfügen, indem Sie ziehen und fallen lassen. Unterstützen Sie das Bild -Upload (Sie können auch Fotos auf Ihrem mobilen Gerät abrufen)
3.. Spracherkennungseingabe (nur Chrome -Browser)
4. Erlauben Sie benutzerdefinierte Symbolleisten; Es werden keine zusätzlichen Tags erzeugt; Unterstützen Sie die Website, um die hervorragenden Funktionen von Werkzeugbibliotheken wie Bootstrap, Schriftart usw. voll zu nutzen.
5. Alles liegt bei Ihnen, wenn es keinen obligatorischen Stil gibt
6. Verlassen Sie sich auf die Standardmerkmale des Browsers, keinen nicht standardmäßigen Code. Symbolleiste und Tastaturfunktionen können angepasst werden und alle vom Browser unterstützten Befehle ausführen.
7. Dieser Editor erstellt keinen separaten Rahmen, einen Backup -Textbereich usw., versuchen Sie, ihn einfach wie möglich zu halten und in einem DIV auszuführen.
8. (optional) Löschen Sie den Schwanzraum; klare leere Div und Spannweite
9. Muss auf modernen Browsern laufen (getestet auf Chrome 26, Firefox 19, Safari 6, und Benutzer berichten, dass sie an IE10 arbeiten können)
10. Support Mobile Browser (getestet auf iOS 6 iPad/iPhone und Android 4.1.1 Chrome)
HINWEIS: WYSIWYG und WYSIHTML5 sind zwei verschiedene Redakteure. Wysiwyg ist eine verbesserte Version von Wysihtml5, die relativ ähnlich ist. Sie können es also entsprechend Ihren Anforderungen verwenden.
WYSIWYG Offizielle Website: http://mindmup.github.io/bootstrap-wysiwyg/
wysiwyg chinesische Website: http://www.bootcss.com/p/bootstrap-wysiwyg///
Wysihtml5 Offizielle Website: http://jhollingworth.github.io/bootstrap-wysihtml5/
Da Wysiwyg eine verbesserte Version von Wysihtml5 ist, lassen Sie mich über die Verwendung von Wysiwyg sprechen, wysihtml5 ist ähnlich.
Zu verwendende Schritte
1. Führen Sie die folgenden JS- und CSS -Dateien ein. Hier möchte ich angeben, dass die offizielle Website nur eine allgemeine Verwendung ist und die folgenden Dokumente eingeführt werden müssen, bevor sie wirksam werden kann. Diese Website konzentriert sich daher auf die tatsächliche Anwendung, und diese Details können nicht ignoriert werden.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combiniert.no-icons.min.css" rel = "Stylesheet"> <link 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.1/js/bootstrap.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min.min, src = "http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"> </script> <link href = "index.css" rel = "styleSheet"> <script src = "bootstrap-wysiwyg.js"> </script
2. Fügen Sie ein Stück JS -Code hinzu. Aufgrund von zu viel Code wird es hier nicht aufgeführt. Diese Website hat den Quellcode ausgeklärt. Bitte beachten Sie den Quellcode von Demo.html
.........
3. Fügen Sie dem Body -Tag den folgenden HTML -Code des folgenden Formats hinzu. Es ist hier zu beachten, dass der Editor nicht eingekapselt ist, sondern den Code direkt in die HTML -Seite schreibt. Der gesamte Editor kann in zwei Teile unterteilt werden, die obere Symbolleiste und das Textbearbeitungsfeld.
1) Top-Symbolleiste: Ist eine Div.Btn-Toolbar mit mehreren Div.BTN-Gruppen. Jede Tool-Taste ist eine DIV.BTN-Gruppe. In jeder Div.BTN-Gruppe können wir den schnellen Text selbst konfigurieren, um Chinesisch anzuzeigen.
<div data-role = "editor-toolbar" data-target = "#editor"> <div> </div> .......... <div> </div> </div>
Hier gibt es auch ein HTML5 -Spracheingabewerkzeug. Der Code ist wie folgt:
<input type = "text" data-edit = "insertText" id = "VoiceBtn" x-Webkit-redesprach = "">
2) Inhalt Textfeld: Div#Editor
<div id = "editor"> content </div>
Das obige ist eine kurze Einführung in Bootstrap-Wysiwyg. Lassen Sie uns den Effekt sehen
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.
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
Tatsächlich muss Wysiwg nur einige Divs definieren, um einen visuellen Editor zu erstellen, während der Bearbeitungsteil nur einen DIV mit einem ID -Editor benötigt, um ihn zu vervollständigen. Ich hoffe, diese kurze Einführung in Bootstrap-Wysiwyg Visual Editor wird allen wirklich helfen.