пользовательское форматирование текстового редактора quill

JavaScript

quilljs

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

Связь:

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

В основном, чтобы записать, какtoolbarНастройте кнопку на нем и внедрите пользовательское форматирование.

toolbar

toolbarСвязанные документы:перо — это .com/docs/module…

Основное использование

Вы видите, что в документе есть такой кусок кода:

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // custom button values
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // superscript/subscript
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // outdent/indent
  [{ 'direction': 'rtl' }],                         // text direction

  [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // remove formatting button
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

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

Но я обнаружил, что этого кажется недостаточно.

Например, я хочу вставить некоторые{{name}}Такой текст, а он жирный, не может меня каждый раз вводить{{}}Что ж, это хлопотно и легко пропустить, поэтому его нужно форматировать автоматически.

Просто листая документ,quilljsПоддержка местныхmodule,toolbarКаждую из вышеперечисленных функций форматирования можно рассматривать какmodule, просмотрите исходный код:

посмотриlink.jsНу, немного упростил:

import Inline from '../blots/inline';

class Link extends Inline {
  static create(value) {
    let node = super.create(value); // 创建一个节点
    node.setAttribute('href', value); // 将输入的 value 放到 href
    node.setAttribute('target', '_blank'); // target 设为空
    return node;
  }
  
  static formats(domNode) {
    return domNode.getAttribute('href'); // 获取放在 href 中的 value
  }
}
Link.blotName = 'link'; // bolt name
Link.tagName = 'A'; // 渲染成 html 标签

export { Link as default };

Не добиться простой пользовательский формат выглядит очень просто.

выполнить

Возьмите vue в качестве примера, это похоже.

инициализация

<quill-editor ref="myTextEditor"
  class="editor-area"
  v-model="content"
  :options="editorOption"
  @blur="onEditorBlur($event)">
</quill-editor>

const toolbarOptions = [
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  ['bold', 'italic', 'underline'],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'align': [] }],
  ['formatParam'],
];
data() {
  return {
    editorOption: {
	   modules: {
	     toolbar: {
	       container: toolbarOptions,
	       handlers: {},
	     },
	   },
    }
  };
},
editor() {
  return this.$refs.myTextEditor.quill;
}

Создайте

Создайте каталог в каталоге компонента проектаformatParam.js:

import Quill from 'quill';

const Inline = Quill.import('blots/inline');

class formatParam extends Inline {
  static create() {
    const node = super.create();
    return node;
  }

  static formats(node) {
    return node;
  }
}
formatParam.blotName = 'formatParam';
formatParam.tagName = 'span';

export default formatParam;

я не здесьvalueа такжеnodeсделать любую обработку, то вhandlersКажется, немного глупо делать это здесь. .

регистр

import { quillEditor, Quill } from 'vue-quill-editor';
import FormatParam from './formatParam';

Quill.register(FormatParam);

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

первый вtoolbarНа него надо поставить кнопку, конечно можно и поставитьicon, я просто разберусь с этим:

mounted() {
  const formatParamButton = document.querySelector('.ql-formatParam');
  formatParamButton.style.cssText = "width:80px; border:1px solid #ccc; border-radius:5px; padding: 0;";
  formatParamButton.innerText = "添加参数";
}

Эффект показан на рисунке:

Затем нужно зарегистрировать событие нажатия этой кнопки:

handlers: {
  formatParam: () => {
    const range = this.editor.getSelection(true); // 获取光标位置
    const value = prompt('输入参数名（如：name）'); // 弹框输入返回值
    if (value) {
      this.editor.format('formatParam', value); // 格式化
      this.editor.insertText(range.index, `{{${value}}}`); // 显示在编辑器中
      this.editor.setSelection(range.index + value.length + 4, Quill.sources.SILENT); // 光标移到插入的文字后，并且让按钮失效
    }
  },
}

визуализировать html

Я не отображал его непосредственно в html при пользовательском форматировании, а затем сделал это при сохранении:

watch: {
  content() {
    const { content } = this
    const result = content.replace(/\{\{(.*?)\}\}/g, (match, key) => `<span class="${key}">{{${key}}}</span>`);
    updateState({ content: result });
  },
}

Вот и все, когда вы хотите вставить параметр, нажмите кнопку на панели инструментов, и он будет вставлен прямо в редакторе.{{xxx}}текст вверх.

Эффект показан на рисунке:

Суммировать

На самом деле теоретически должна быть возможностьformatParam.jsДелайте все посередине, чтобы не было необходимости заменять последнее регулярное выражение.

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

Ссылка на ссылку:

Оригинальная ссылка:пользовательское форматирование текстового редактора quill

Категории