Html图文编辑器 — emEditor

emEditor — это редактор содержимого HTML-страниц, основанный на прототипах и нативном JavaScript. Он позволяет редактировать графические и текстовые материалы в режиме реального времени как в браузере ПК, так и в мини-программе WeChat. Встроенный редактор элементов section позволяет настраивать цвет заголовков и их расположение, а редактор элементов img — работать с рамками, размерами, тенями, закруглёнными углами и адаптивным макетом изображений.

Онлайн-демонстрация: https://www.bnusport.cn/emeditor/editor.html

Демонстрация в мини-приложении WeChat: отсканируйте QR-код:

1. Получение

1. npm.
2. Прямая загрузка сжатого пакета: https://gitee.com/emprogram/em-editor/repository/archive/master.zip.

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

• 2.1 Создание экземпляра: let editor = new emEditor('id', {}); где id — элемент контейнера в HTML-документе; {} — параметры настройки, такие как меню, адреса AJAX и т. д.
• 2.2 Параметры настройки:
  • 2.2.1 Меню: редактор по умолчанию предоставляет функции отмены, повтора, сохранения, изменения размера шрифта, жирного, курсивного начертания, подчёркивания, выравнивания по левому краю, по центру, по правому краю, установки цвета фона и текста, отступа, уменьшения отступа, очистки форматирования, создания упорядоченных и неупорядоченных списков, добавления ссылок, удаления ссылок, надстрочных и подстрочных индексов, файлов, прямой загрузки изображений, обрезки изображений, аудио и видео, кода, удаления этих 29 основных операций и методов меню. Данные меню находятся в файле js/emEditorData.js. Значки меню создаются с помощью SVG-элементов и могут быть динамически вставлены. Пример добавления меню: menu:{newIcon:[{index:12,name:'res',title:'资源库',event:'click',click: function (e) {}}],newSVG:resIcon} где newIcon — массив, содержащий основные данные нового меню; index — индекс позиции значка меню, который по умолчанию добавляется в конец; name — идентификатор символа элемента в SVG, обратите внимание, что icon- не используется; title — подсказка при наведении курсора; event — событие ответа меню, поддерживающее основные события мыши HTML-элемента; click — метод события ответа мыши, соответствующий событию ответа меню в теге; newSVG — строка, содержащая скрипт для добавления значка SVG.
  • 2.2.2 Настройка отображаемого содержимого: во время создания объекта можно напрямую добавить содержимое редактируемой HTML-страницы. Пример: content:'<p>Я сразу же увижу это после создания.</p>'
  • 2.2.3 Поддержка WeChat: если вам нужно использовать этот редактор в компоненте web-view мини-программы WeChat, вам необходимо включить следующее в заголовок: <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> В параметрах конфигурации wxConfig:{url:'https://example.com',data:{}}; url — адрес сервера API, который может возвращать параметры, необходимые для настройки WeChat SDK, конкретный сценарий можно найти в исходном коде C# в каталоге cSharp.
  • 2.2.4 Общие методы:
    • SetContent(html): устанавливает содержимое редактора HTML;
    • SetMenuEnabled(name,enable): включает или отключает меню по имени;
    • SetMenuEvent(name,event,fun): сбрасывает событие ответа меню по имени;
    • Ajax({url:'',type: 'GET',dataType: 'json',success:function(){}}): метод ajax;
    • InsertImage(imgs): вставляет изображение в текущую позицию документа, imgs — массив, каждый элемент должен содержать атрибут src, поддерживает внедрение всех атрибутов элемента img;
    • InsertHtml(html): вставляет действительный HTML-скрипт в текущую позицию документа;
    • ShowDialog(title,style,obj,buttons): отображает модальное окно;
    • GetContent(): получает содержимое HTML текущего редактора;
    • Save(parm,success): загружает содержимое base64 файла документа на сервер;
    • и многое другое...

Лицензия с открытым исходным кодом

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

Об авторе

Автор — Па Цзымин, большой поклонник JavaScript, разработчик свободного программного обеспечения с более чем 20-летним опытом работы в крупных государственных предприятиях в области информатизации. В настоящее время он активно занимается обучением программированию и готов помочь каждому заинтересованному программисту! QQ: 407342820 email: puziming@163.com

Журнал обновлений версии

• V1.0.0 2020.10.28
  • Реализованы базовые функции HTTP.
  • Добавлена функция редактирования элементов img.
  • Добавлена функция редактирования элементов section.
• V.1.0.1 2020.11.25
  • Добавлено управление загрузкой изображений через WeChat, добавлены параметры конфигурации ajaxConfig для открытия, сохранения и загрузки изображений.
  • Добавлена аутентификация с использованием токенов, токен автоматически включается в заголовок при каждом вызове ajax.