IE / Edge	Firefox	Chrome	Safari	iOS Safari	Opera
Edge 12+	Firefox 18+	Chrome 49+	Safari 10+	Safari 10+	Opera 36+

Если тебе нравится проект 💗💗💗

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

👉 https://opencollective.com/editorjs

Спонсоры

Поддержите этот проект, став спонсором. Ваш логотип появится здесь со ссылкой на ваш сайт. [Стать спонсором]

Поддержавшие

Спасибо всем нашим спонсорам! 🙏 [Станьте спонсором]

Вкладчики

Этот проект существует благодаря всем людям, которые вносят свой вклад.

Мы очень рады новым участникам. Если вы хотите делать код вместе с нами, пожалуйста, взгляните на Первые хорошие задания. Вы можете написать нам на team@codex.so или через специальный Telegram-чат, или любым другим способом.

Документация

Посетите https://editorjs.io/ для просмотра всех статей документации.

• Базовые концепции
• Начало работы
• Конфигурация
• Как создать Block Tool Plugin
• Как создать плагин встроенного инструмента
• API для инструментов

You can join a Gitter-channel or Telegram-chat and ask a question. Вы можете присоединиться к Gitter-каналу или Telegram-чату и задать вопрос.

Список изменений

См. весь Список изменений

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

Основы

Editor.js - это редактор с блочным стилем. Блоки - это структурные единицы, из которых состоит Entry. Например, Абзац, Заголовок, Изображение, Видео, Список - это блоки. Каждый блок представлен плагином. У нас есть множество готовых к использованию Плагинов и простой API для создания новых.

Как использовать редактор после установки.

• Создавайте новые блоки, нажимая Enter или щёлкая по кнопке с плюсом
• Нажмите TAB или щёлкните на кнопке с плюсом для просмотра панели инструментов
• Нажмите TAB еще раз, чтобы открыть панель инструментов, и выберите нужный вам блок. Затем нажмите Enter.

• Выберите фрагмент текста и примените стиль или вставьте ссылку с панели инструментов "Вставка".

• Используйте кнопку "три точки" справа, чтобы открыть Настройки блока. Отсюда можно перемещать и удалять блок или применить настройки инструмента, если они предусмотрены. Например, можно задать уровень заголовка или стиль списка.

Ярлыки

Несколько ярлыков предустановлены как доступные.

Shortcut	Action	Restrictions
TAB	Показать/открыть панель инструментов.	На пустом блоке
SHIFT+TAB	Листайте назад Ящик с инструментами.	Пока открыта панель инструментов
ENTER	Создать блок	Когда открыта панель инструментов и выбран какой-либо инструмент
CMD+B	Смелый стиль	На выбор
CMD+I	Курсивный стиль	На выбор
CMD+K	Вставить ссылку	На выбор

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

var editor = new EditorJS({
  //...
  tools: {
    header: {
      class: Header,
      shortcut: 'CMD+SHIFT+H'
    },
    list: {
      class: List,
      shortcut: 'CMD+SHIFT+L'
    }
  }
  //...
 });

Руководство по установке

Чтобы запустить Editor.js на своем сайте, нужно выполнить несколько шагов.

1. Загрузить ядро редактора
2. Загрузить инструменты
3. Инициализировать экземпляр редактора

Шаг 1. Загрузить ядро редактора

Получите сам файл Editor.js. Это минифицированный скрипт с ядром редактора и некоторыми необходимыми по умолчанию инструментами.

Выберите наиболее удобный для вас способ получения Editor.

• Node пакет
• Источник из CDN
• Локальный файл из проекта

Вариант A. Установка NPM

Установите пакет с помощью NPM или Yarn

npm i @editorjs/editorjs

Включите модуль в свое приложение

import EditorJS from '@editorjs/editorjs';

Вариант B. Используйте CDN

Вы можете загрузить EditorJS непосредственно из jsDelivr CDN.

https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest

Например, поместите это в HTML:

<script src="https://cdn.jsdelivr.net/npm/@editorjs/editorjs@latest"></script>

Вариант C. Сохраните исходный текст в проекте

Скопируйте файл editor.js в свой проект и загрузите его.

<script src="editor.js"></script>

Шаг 2. Загрузите инструменты, которые вы хотите сделать доступными

Каждый блок представлен Инструментом. Инструменты - это простые внешние скрипты со своей собственной логикой. Например, есть инструмент Заголовок, в который вводится текст заголовка. Если вы хотите иметь возможность использовать это, установите Header Tool так же, как и редактор (Node.js, CDN, локальный файл).

Пример: использование заголовка из CDN

<script src="https://cdn.jsdelivr.net/npm/codex.editor.header@2.0.4/dist/bundle.js"></script>

Загляните в сообщество Editor.js's community, чтобы увидеть больше готовых к использованию инструментов.

Шаг 3. Создайте экземпляр редактора

Создайте экземпляр Editor.js и передайте Configuration Object с holderId и списком инструментов.

<div id="editorjs"></div>

Вы можете создать простой редактор с только стандартным инструментом Paragraph Tool, передав строку с Id элемента (обертка для редактора) в качестве параметра конфигурации. Или используйте стандартный идентификатор editorjs для обертки.

var editor = new EditorJS(); /** Zero-configuration */

// equals

var editor = new EditorJS('editorjs');

Или передать целый объект настроек.

var editor = new EditorJS({
    /**
     * Создайте держатель для редактора и передайте его ID
     */
    holder : 'editorjs',

    /**
     * Список доступных инструментов.
     * Передайте класс инструмента или объект Settings для каждого инструмента, который вы хотите использовать
     */
    tools: {
        header: {
          class: Header,
          inlineToolbar : true
        },
        // ...
    },

    /**
     * Ранее сохранённые данные, которые должны быть отображены
     */
    data: {}
});

Сохранение данных

Вызовите editor.save() и обработайте возвращённый Promise с сохранёнными данными.

editor.save()
  .then((savedData) => {
    console.log(savedData);
  });

Пример

Посмотрите example.html для просмотра более подробных примеров.

Нет данных (истекло время ожидания отправки данных).

• We use HTMLJanitor module in our Sanitizer module.

О команде

Мы - CodeX, и мы создаем продукты для разработчиков и производителей.

Следуйте за нами в Twitter: twitter.com/codex_team

Не стесняйтесь обращаться: team@codex.so

codex.so