DevUIЭто интерфейсное решение с открытым исходным кодом для корпоративных продуктов среднего и внутреннего уровня.沉浸,灵活,至简Разрабатывайте ценности, призывайте дизайнеров удовлетворять реальные потребности, проектируйте для большинства людей и отказывайтесь от броских и привлекательных дизайнов. если вы развиваетесьToBиз工具类产品, DevUI будет очень хорошим выбором!

введение

Редактор форматированного текста, вероятно, является наиболее сложным и широко используемым компонентом.

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

Редактор форматированного текста делает редактирование веб-контента более простым и эффективным. Мы можем вставить практически любой контент, который вы хотите вставить в редактор форматированного текста, изображения, видео, гиперссылки, формулы, блоки кода, и все это не проблема. Вы можете даже вставляйте сверхсложный пользовательский контент, такой как таблицы, PPT, интеллект-карты и даже 3D-модели.

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

В этой статье объединен опыт команды разработчиков DevUI в отношении компонентов форматированного текста, от сценариев использования, выбора технологии до расширения Quill и основных принципов Quill, чтобы поделиться с вами тем, что касается редактора форматированного текста Quill.

Этот документ в основном состоит из следующих частей:

Сценарии использования расширенного текстового редактора
Технический отбор
Почему мы выбираем Квилл
Как расширить перо
Основы перьев

Следующее изKagolсуществует华为 HWEB 大前端技术分享会речь на.

Сценарии использования расширенного текстового редактора

Сообщение блога
Вики-запись
описание рабочего элемента
Шаги тестового примера
Обратная связь
Комментарий
…

Технический отбор

Наши потребности:

Дружественный протокол с открытым исходным кодом
Угловой фреймворк или независимый от фреймворка
Гибкость и масштабируемость
Поддерживает вставку/редактирование таблиц и изображений
Богатые плагины, хорошая экология

Анализ выбора

Сначала устраните официальное отсутствие обслуживанияUEditor
Затем исключите специфичный для React frameworkDraft.jsа такжеSlate
Затем исключите недружественный протокол с открытым исходным кодомCKEditor
Поскольку наши бизнес-сценарии богаты, нам нужна функция вставки/редактирования таблиц с форматированным текстом, поэтому нам также нужно исключить те, которые не поддерживают таблицы.Trix, который слабо поддерживает столEtherpadа такжеProsemirror, а функция формы заряжаетTinyMCE
В конце концов толькоQuillа такжеwangEditorДоступны два редактора,wangEditorМасштабируемость и экология не так хороши, какQuill, так что окончательный выборQuillв качестве основы для компонентов форматированного текста

Почему выбирают Квилл?

Протокол BSD, удобный для бизнеса
Подробная документация, быстрое начало работы
API-управление, хорошая масштабируемость
Богатые плагины, хорошая экология

Детали документации

Документ:quilljs.com/

Представляем API Quill:

Представляем, как расширить Quill:

Начать быстро

Установите Quill:npm i quill
Стиль импорта:@import 'quill/dist/quill.snow.css';
Представляем Квилл:import Quill from 'quill';
Инициализировать Quill:new Quill('#editor', { theme: 'snow' });

Изображение эффекта:

API-управление, хорошая масштабируемость

Богатые плагины, хорошая экология

Расширить перо

вставить метку

Например, я хочу вставить теги в редакторе

Загрузить вложение

Например, я хочу вставить аксессуар в редактор.

вставить смайлик

Например, я хочу вставить смайлики в редакторе

Похожие комментарии к Whisper:Woohoo.Yuque.com/ Yuque/blog/…

Разделительная линия личности

Например, я хочу вставить персонализированную разделительную линию, например станцию B.

карточка с гиперссылкой

Например, я хочу вставить карточку с гиперссылкой, например Zhihu.

Как вставить смайлики?

Давайте начнем с того, как вставлять смайлики, и давайте посмотрим, как вставлять пользовательский контент в Quill.

Чтобы вставить эмодзи в Quill, выполните следующие четыре шага:

Шаг 1. Настройте кнопки панели инструментов
Шаг 2. Настройте содержимое блота EmojiBlot
Шаг 3: Зарегистрируйте EmojiBlot в Quill
Шаг 4. Вызовите API Quill, чтобы вставить смайлики

Шаг 1. Настройте кнопки панели инструментов

const quill = new Quill('#editor', {
  theme: 'snow',
  modules: {
    // 配置工具栏模块
    toolbar: {
      container: [ …, [ 'emoji' ] ], // 增加一个按钮
      handlers: {
        // 添加按钮的处理逻辑
        emoji() {
          console.log('插入表情');
        }
      }
    },
  }
});

Добавление значков к кнопкам панели инструментов

// 扩展Quill内置的icons配置
const icons = Quill.import('ui/icons');
icons.emoji = ‘<svg>…</svg>’; // 图标的svg可以从iconfont网站复制

Эффект следующий:

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

Шаг 2. Настройте содержимое блота EmojiBlot

Клякса в Quill — это обычный класс ES6, потому что разница между выражением и картинкой заключается в следующем:

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

Таким образом, мы можем расширить его на основе встроенного формата изображения Quill.

emoji.ts

import Quill from 'quill';

const ImageBlot = Quill.import('formats/image');

// 扩展Quill内置的image格式
class EmojiBlot extends ImageBlot {
  static blotName = 'emoji'; // 定义自定义Blot的名字（必须全局唯一）
  static tagName = 'img'; // 自定义内容的标签名

  // 创建自定义内容的DOM节点
  static create(value): any {
    const node = super.create(value);
    node.setAttribute('src', ImageBlot.sanitize(value.url));
    if (value.width !== undefined) {
      node.setAttribute('width', value.width);
    }
    if (value.height !== undefined) {
      node.setAttribute('height', value.height);
    }
    return node;
  }
  
  // 返回options数据
  static value(node): any {
    return {
      url: node.getAttribute('src'),
      width: node.getAttribute('width'),
      height: node.getAttribute('height')
    };
  }
}

export default EmojiBlot;

Шаг 3: Зарегистрируйте EmojiBlot в Quill

С EmojiBlot, чтобы вставить его в редактор Quill, вам также необходимо зарегистрировать этот класс ES6 в Quill.

import EmojiBlot from './formats/emoji';
Quill.register('formats/emoji', EmojiBlot);

Шаг 4. Вызовите API Quill, чтобы вставить смайлики

После того, как EmojiBlot зарегистрирован в Quill, Quill может распознать его и вызвать API Quill, чтобы вставить его в редактор.

emoji(): void {
  console.log(‘插入表情');
  // 获取当前光标位置
  const index = this.quill.getSelection().index;
  // 在当前光标处插入emoji（blotName）
  this.quill.insertEmbed(index, 'emoji', {
    url: 'assets/emoji/good.png',
    width: '64px',
  });
},

визуализация

图片.png

Исходный код демо

Ссылка на источник:git ee.com/card over/quill…

Также приглашаем обратить внимание на официальный сайт нашей библиотеки компонентов DevUI, чтобы узнать больше интересных и практичных компонентов с открытым исходным кодом!

Официальный сайт DevUI:devui.design

Основы перьев

Наконец, давайте поговорим об основных принципах Quill.

Фундаментальный

Используйте дельта-модель данных для описания форматированного текстового содержимого и его изменений, чтобы обеспечить предсказуемое поведение.
DOM абстрагируется через Parchment для обеспечения согласованности платформы.
Отслеживайте изменения узла DOM с помощью Mutation Observe и синхронизируйте изменения DOM с дельта-моделью данных.

Как Quill выражает содержимое редактора?

Дельта-модель данных

Описывать форматированный текстовый контент и его изменения с помощью дельта-модели данных.

Delta — это подмножество JSON, которое содержит только свойство ops, значением которого является массив объектов, каждый элемент массива представляет собой операцию в редакторе (на основе начального состояния редактора — пустого).

{
  "ops": [
    { "insert": "Hello " },
    { "insert": "World", "attributes": { "bold": true } },
    { "insert": "\n" }
  ]
}

Изменить содержимое редактора

Например, мы меняем жирное «Мир» на красный текст «Мир», это действие описывается Дельтой следующим образом:

{
  "ops": [
    { "retain": 6 },
    { "retain": 5, "attributes": { "color": "#ff0000" } }
  ]
}

Это означает: оставить первые 6 символов редактора, то есть оставить «Hello» без изменений, следующие 5 символов оставить «World», и установить эти символы в качестве цвета шрифта «#ff0000».

удалить содержимое редактора

Что делать, если вы хотите удалить «Мир»?

{
  "ops": [
    { "retain": 6 },
    { "delete": 5 }
  ]
}

То есть: сохранить первые 6 символов («Привет»), удалить следующие 5 символов («Мир»)

Quill Как сделать контент?

Обоснование рендеринга форматированного текстового содержимого: Пройдитесь по массиву Delta и поочередно примените (вставьте/форматируйте/удалите) описанное в нем содержимое к редактору.

Подробнее см. в столбце DevUI:

«Механизм рендеринга контента Quill»

Как Quill расширяет возможности редактора?

Способы расширения Quill:

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

Подробнее см. в столбце DevUI:

Модульный механизм Quill, современного редактора форматированного текста

СПАСИБО!