Давайте посмотрим на официальное описание соответствующих функций этого редактора.
1. Он может автоматически связывать стандартные горячие клавиши для общих операций на платформах Mac и Wndows.
2. Вы можете вставить картинки, перетаскивая и сбрасывая; Загрузка образа поддержки (вы также можете получить фотографии на своем мобильном устройстве)
3. Ввод распознавания голоса (только Chrome Browser)
4. Разрешить пользовательские панели инструментов; Дополнительные теги не генерируются; Поддержите веб -сайт, чтобы полностью использовать отличные функции библиотек инструментов, таких как Bootstrap, Font Awesome и т. Д.
5. Все зависит от вас, если нет обязательного стиля
6. Полагаться на стандартные функции браузера, без нестандартного кода; Функции панели инструментов и клавиатуры могут быть настроены и могут выполнять любые команды, поддерживаемые браузером.
7. Этот редактор не создаст отдельную кадр, резервную текстовую область и т. Д., Старайтесь сделать его простым и запустить его в Div.
8. (необязательно) очистить хвостовое пространство; очистить пустой див и пролет
9. Должен работать в современных браузерах (протестировано на Chrome 26, Firefox 19, Safari 6, и пользователи сообщают, что они могут работать над IE10)
10. Поддержка мобильного браузера (протестирован на iOS 6 iPad/iPhone и Android 4.1.1 Chrome)
Примечание. Wysiwyg и Wysihtml5 - два разных редактора. Wysiwyg - это улучшенная версия Wysihtml5, которая относительно схожа. Таким образом, вы можете использовать его в соответствии с вашими потребностями.
Официальный веб-сайт wysiwyg: http://mindmup.github.io/bootstrap-wysiwyg/
Китайский веб-сайт wysiwyg: http://www.bootcss.com/p/bootstrap-wysiwyg///////////////////////////bootstrap-wysiwyg///
Wysihtml5 Официальный веб-сайт: http://jhollingworth.github.io/bootstrap-wysihtml5/
Поскольку Wysiwyg является расширенной версией Wysihtml5, позвольте мне поговорить об использовании Wysiwyg, Wysihtml5 похож.
Шаги для использования
1. Представьте следующие файлы JS и CSS. Здесь я хотел бы заявить, что официальный веб -сайт является лишь общим использованием, и следующие документы должны быть введены, прежде чем они смогут вступить в силу, поэтому этот веб -сайт фокусируется на фактическом применении, и эти детали нельзя игнорировать.
<link href = "http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.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> </script> </script> </script> </script src = "http://netdna.bootstrappcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"> </script> <script src = "http://twitter.github.com/bootstrap/assets/js/google-prettify. href = "index.css" rel = "styleSheet"> <script src = "bootstrap-wysiwyg.js"> </script>
2. Добавьте кусок кода JS. Из -за слишком большого количества кода он не будет перечислен здесь. Этот веб -сайт разобрал исходный код. Пожалуйста, обратитесь к исходному коду Demo.html
.........
3. Добавьте следующий формат HTML -код в тег корпуса. Здесь следует отметить, что редактор не инкапсулирован, но непосредственно записывает код на странице HTML. Весь редактор можно разделить на две части: верхняя панель инструментов и поле для редактирования текста.
1) Верхняя панель инструментов: это div.btn-toolbar, содержащий несколько групп div.btn. Каждая кнопка инструмента является группой Div.BTN. В каждой группе Div.BTN мы можем настроить быстрый текст для отображения китайцев.
<div data-role = "editor-toolbar" data-target = "#editor"> <div> </div> .......... <div> </div> </div>
Здесь также есть инструмент голосового ввода HTML5. Код заключается в следующем:
<input type = "text" data-edit = "inserttext" id = "voicebtn" x-webkit-speech = "">
2) Текстовое поле контента: Div#Редактор
<div id = "editor"> content </div>
Вышесказанное-краткое введение в Bootstrap-Wysiwyg, давайте посмотрим на эффект
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.
Если вы все еще хотите учиться глубже, вы можете нажать здесь, чтобы изучить и прикрепить к вам замечательную тему: учебник по обучению Bootstrap
Фактически, Wysiwg должен только определить некоторые DOV для создания визуального редактора, в то время как часть редактирования нуждается только в Div только с редактором ID для его завершения. Я надеюсь, что это краткое введение в Bootstrap-Wysiwyg Visual Editor действительно поможет всем.