tiny editor

крошечный редактор

Крошечный текстовый редактор HTML, написанный в ванильном JavaScript

Цель

Создайте библиотеку менее 5 КБ (сжатый), которая позволяет использовать элемент HTML в качестве богатого текстового редактора в простом старом ванильном JavaScript.

Поддерживать

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

Как установить

 npm install tiny-editor

или загрузите файл пакета непосредственно в конце вашего HTML -документа.

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

Как использовать

1. Ссылка на библиотеку редактора в вашем HTML -документе
2. Добавить атрибут data-tiny-editor в элемент HTML, который вы хотите преобразовать в редактор

Как динамически создать редактор

Используйте window.__tinyEditor.transformToEditor() , который воспринимает в качестве первого аргумента элемент DOM (обычно <div> ), который вы хотите преобразовать в редактор. См. Пример /public/index.html .

Как извлечь форматированный текст

Слушайте событие input в элементе редактора HTML.

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

Как настроить

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

Например, вы можете удалить кнопку Format Bold, используя следующий атрибут:

 <div data-tiny-editor data-bold="no"></div>

Параметры

• data-formatblock="no" : удалить список раскрывающихся стилей
• data-bold="no" : удалить жирную кнопку
• data-italic="no" :: Удалить курсивную кнопку
• data-underline="no" : удалить кнопку подчеркивания
• data-fontname="no" : удалить раскрывающий список шрифта
• data-forecolor="no" :: Удалить кнопку «Цвет текста»
• data-justifyleft="no" : удалить левую кнопку выравнивания
• data-justifycenter="no" : удалить кнопку центрального выравнивания
• data-justifyright="no" : удалить правильную кнопку выравнивания
• data-insertorderedlist="no" : удалить кнопку пронумерованного списка
• data-insertunorderedlist="no" : удалить кнопку списка с пулями
• data-outdent="no" : удалить кнопку «Уменьшение
• data-indent="no" : удалить кнопку «Увеличение отступа
• data-remove-format="no" : удалить кнопку форматирования очистки
• data-autofocus="no" : удалить автофокусировку из редактора

Поддерживаемые браузеры

Современный браузер (Chrome, Firefox, Edge, ...) поддерживаются. Крошечный редактор не работает на Internet Explorer.