Jetons un coup d'œil à la description officielle des fonctions pertinentes de cet éditeur.
1. Il peut lier automatiquement les raccourcis clavier standard pour les opérations communes sur les plates-formes Mac et Wndows.
2. Vous pouvez insérer des images en faisant glisser et en abandonnant; Prise en charge du téléchargement d'image (vous pouvez également obtenir des photos sur votre appareil mobile)
3. Entrée de reconnaissance vocale (navigateur Chrome uniquement)
4. Autoriser les barres d'outils personnalisées; Aucune balise supplémentaire n'est générée; Soutenez le site Web pour utiliser pleinement les excellentes fonctionnalités des bibliothèques d'outils telles que Bootstrap, Font Awesome, etc.
5. Tout dépend de vous s'il n'y a pas de style obligatoire
6. S'appuyer sur les fonctionnalités standard du navigateur, pas de code non standard; Les fonctions de barre d'outils et de clavier peuvent être personnalisées et peuvent exécuter toutes les commandes prises en charge par le navigateur.
7. Cet éditeur ne créera pas de cadre distinct, de zone de texte de sauvegarde, etc., essaiera de rester simple que possible et de l'exécuter dans un div.
8. (Facultatif) effacer l'espace arrière; DIV ET SANS
9. Doit fonctionner sur des navigateurs modernes (testés sur Chrome 26, Firefox 19, Safari 6 et les utilisateurs signalent qu'ils peuvent travailler sur IE10)
10. Prise en charge du navigateur mobile (testé sur iOS 6 iPad / iPhone et Android 4.1.1 Chrome)
Remarque: WYSIWYG et WYSIHTML5 sont deux éditeurs différents. Wysiwyg est une version améliorée de WysihTML5, qui est relativement similaire. Vous pouvez donc l'utiliser en fonction de vos besoins.
Wysiwyg Site officiel: http://mindmup.github.io/bootstrap-wysiwyg/
Site Web chinois Wysiwyg: http://www.bootcss.com/p/bootstrap-wysiwyg//
WYSIHTML5 Site Web officiel: http://jhollingworth.github.io/bootstrap-wysihtml5/
Étant donné que Wysiwyg est une version améliorée de Wysihtml5, permettez-moi de parler de l'utilisation de Wysiwyg, Wysihtml5 est similaire.
Étapes à utiliser
1. Présentez les fichiers JS et CSS suivants. Ici, je voudrais dire que le site officiel n'est qu'une utilisation générale, et les documents suivants doivent être introduits avant de pouvoir prendre effet, donc ce site Web se concentre sur l'application réelle, et ces détails ne peuvent pas être ignorés.
<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. src = "https://mindmup.s3.amazonaws.com/lib/jquery.hotkeys.js"> </ script> <script src = "http://netdna.bootsstrappcdn.com/twitter-bootsstrap/2.3.1/js/bootsstrap.min.js"> </ script> 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"> </cript>
2. Ajoutez un morceau de code JS. En raison de trop de code, il ne sera pas répertorié ici. Ce site Web a trié le code source. Veuillez vous référer au code source de Demo.html
.........
3. Ajoutez le code HTML du format suivant à la balise corporelle. Il convient de noter ici que l'éditeur n'est pas encapsulé, mais écrit directement le code dans la page HTML. L'éditeur entier peut être divisé en deux parties, la barre d'outils supérieure et la zone d'édition de texte.
1) Barbaire d'outils supérieur: est une div.btn-toolbar contenant plusieurs groupes div.btn. Chaque bouton d'outil est un groupe div.btn. Dans chaque groupe div.btn, nous pouvons configurer le texte rapide nous-mêmes pour afficher le chinois.
<div data-role = "editor-toolbar" data-target = "# editor"> <div> </div> .......... <v> </div> </div>
Il existe également un outil d'entrée vocale HTML5 ici. Le code est le suivant:
<input type = "text" data-edit = "insertText" id = "VoiceBtn" x-webkit-disech = "">
2) Box de texte de contenu: éditeur de div #
<div id = "éditrice"> Contenu </div>
Ce qui précède est une brève introduction à Bootstrap-Wysiwyg, voyons l'effet
Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.
Si vous souhaitez toujours étudier en profondeur, vous pouvez cliquer ici pour apprendre et vous attacher un sujet merveilleux: Tutoriel d'apprentissage bootstrap
En fait, Wysiwg n'a besoin que de définir certains divs pour construire un éditeur visuel, tandis que la partie d'édition n'a besoin que d'un div avec un éditeur d'identification pour le terminer. J'espère que cette brève introduction à Bootstrap-Wysiwyg Visual Editor aidera vraiment tout le monde.