Редактор wangEditor5 [ZBLOG версия]

wangEditor5 редактор, свободный с открытым исходным кодом (на основе MIT протокола с открытым исходным кодом), автор, автор:https: / / www.wangeditor.com /, поддержка вторичной разработки, все можете спокойно использовать!

Авторы также постоянно обновляют редактор wangEditor 5, поэтому мы можем также обновить наши плагины по мере обновления автора.

Благодаря полной документации для разработки wangEditor 5 мы смогли сделать его плагином для Z-blog PHP.

Когда-то мы пытались найти такой, какОбщественный номерТакой простой в использовании современный богатой текстовый редактор, и теперь он здесь!

Примечание: Вы не можете использовать это модуль вместе с другими модулями редактора, используйте этот модуль, пожалуйста, заранее закрыть другие модули редактора (например, UEditor, поставленный в Z-blog PHP)!

Редактор wangEditor 5 по умолчанию не поддерживает использование на мобильных телефонах, на самом деле, независимо от любого плагина редактора, пользовательский опыт на мобильных телефонах очень плохой, поэтому редактор wangEditor 5 официально просто отключил эту функцию.

Конечно, эта функция также может быть раскрыта, просто нужно настроить панель инструментов, отображаемую на телефоне, чтобы улучшить пользовательский опыт Нет, нужные пользователи могут найти нас для настройки!

Вот описание редактора на официальном сайте WangEditor.

# преимущества

# Другие проблемы с редакторами богатого текста

Поиск в Интернете «Web Rich Text Editor» вы получите много результатов, таких как UEditor kindEditor в отечестве, CKEditor TinyMCE Quill ProseMirror Draft Slate за рубежом и т. д.Многие также используют эти редакторы или для вторичной разработки.

Но у всех они есть несколько проблем (побивать доску ~), которые могут сильно повлиять на эффективность разработки, затраты на разработку и стабильность продукта.

# Старая технология

Например, UEditor KindEditor все еще использует API document.execCommand.Это сильно повлияет на стабильность и масштабируемость продукции.

Когда это произойдет, ни один из них не сможет осуществить, повсюду будут проблемы, и PM будет презирать: «Как это может быть xxx? »

Китайский недружественный

Например, CKEditor TinyMCE Quill ProseMirror и т. д., официальной документации на китайском языке нет.Это сильно повлияет на вашу эффективность разработки (сверхурочные ~ сегодня вечером)

PS: английский язык, пожалуйста, пропустите.

Требуется большое количество вторичной разработки

Например, ProseMirror Draft Slate, хотя они и являются богатыми текстовыми редакторами, они являются просто ядром или контроллером, а не полной функциональностью.

Большое количество вторичной разработки не только приведет к значительному увеличению затрат на исследования и разработки (закрыто в этом месяце ~), но и может появляться бесконечные ошибки из-за несовершенного тестирования и попасть в тупик.

PS: Если только у вас нет сильных потребностей в индивидуальном разработке.

# Ограничения, связанные с рамками

Slate и Draft зависят от React.Если вы хотите использовать Vue, то нагрузка и сложность очень велика.

Нет официальных компонентов React Vue

Некоторые, не зависящие от фреймворка, такие как ProseMirror, должны упаковать компоненты самостоятельно, если вы хотите использовать Vue React.

Новые продукты еще не стабильны

Перечисленные выше редакторы являются более зрелыми продуктами с большим количеством пользователей.Вы также можете найти другие продукты, например, недавно разработанные, но мало пользующиеся пользователями.
В любом случае, выбирайте осторожно, потому что в редакторе богатого текста очень много ям, и требуется много тестирования и использования, прежде чем он стабилизируется.

Выбирайте стабильные продукты, ссылаясь

github stars

npm загрузки

Время и частота публикации npm

Количество соответствующих результатов в поисковых системах

Есть ли подписка на заводе?

Существуют ли модульные тесты / тесты e2e

Преимущества # wangEditor

Ценность продукта заключается в решении проблем пользователей, в повышении эффективности, снижении затрат, стабильности и масштабируемости.

WangEditor не делает для того, чтобы сделать, и не просто подражает кому, а после анализа вышеуказанных проблем, дает системное решение.Цель состоит в том, чтобы действительно решить проблемы пользователей и создать свою собственную ценность.

# Использование основных технологий

WangEditor начинается с версии V5 с большими техническими обновлениями.

#1.Модернизация до уровня L1

API document.execCommand был отменен, в качестве ядра использовался файл slate.jsopen in new window (но не зависящий от React) и был обновлен до уровня L1.

Это также технология, используемая в основных текстовых редакторах, таких как известный Quill ProseMirror Draft.

#2.Использование vdom

Обновление вида с помощью технологии vdom (основанной на файле "jdom.jsopen in new window"), разделение модели и вида для повышения стабильности.

#3.Расширяемость

Использование механизма расширения плагинов и модулей для обеспечения масштабируемости.В будущем будут расширяться и другие функции.

На самом деле, все функции, встроенные в wangEditor, также построены в виде расширений и модулей.

# Китайский документ

WangEditor имеет подробную документацию на китайском языке, а также среду общения на китайском языке.Открыть в новом окне - это программа.

# Своевременная обратная связь и коммуникация

Также можно отправить вопрос на github, и команда будет своевременно отвечать.

# Интеграция всех функций, без необходимости вторичной разработки

WangEditor имеет все обычные функции для работы с богатым текстом, что позволяет удовлетворить большинство требований пользования.Необходимо напрямую конфигурировать и использовать, без необходимости дополнительной разработки.

/ / wangEditor имеет встроенное 50 + меню editor.getAllMenuKeys () [
  "bold","underline","italic","through","code","clearStyle","headerSelect","header1","header2","header3",
  "color","bgColor","insertLink","editLink","unLink","viewLink","insertImage","deleteImage","editImage",
  "viewImageLink","imageWidth30","imageWidth50","imageWidth100","blockquote","emotion","fontSize","fontFamily",
  "indent","delIndent","justifyLeft","justifyRight","justifyCenter","lineHeight","redo","undo","divider","codeBlock",
  "bulletedList","numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
  "deleteTableCol","tableHeader","tableFullWidth","insertVideo","deleteVideo","uploadImage","codeSelectLang"]

PS: В то же время, wangEditor имеет богатый API и достаточно масштабируемости, чтобы позволить вам настроить меню разработки, модули, плагины и т. д.

Это очень удобно для использования в Vue React.

wangEditor разработан на основе ядра slate, но не зависит от React, поэтому сам по себе не зависит от фреймворка.

Кроме того, мы официально упаковали компоненты Vue React, которые легко используются в таких фреймворках, как Vue React.
Другие рамки, мы будем продолжать поддерживать, и вы также можете представить вопрос.

«Пойдя на 5000 ям»

wangEditor с открытым исходным кодом на протяжении многих лет, с большим количеством пользователей и отзывов, решило много проблем open in new window.В ходе тестирования версии V5 эти проблемы также были повторены, чтобы обеспечить максимальную стабильность.

# Команда, постоянное итеративное обновление

WangEditor больше не является автором одиночной войны, у нас есть команда из нескольких человек, которые вместе исправляют ошибки, обновляют функции, отслеживают вопросы, отвечают на вопросы сообщества.