Quill JavaScript 富文本编辑器限制标签答案

【问题标题】：Quill JavaScript Rich Text Editor restrict tagsQuill JavaScript 富文本编辑器限制标签
【发布时间】：2018-09-07 13:51:34
【问题描述】：

我正在尝试使用 Quill JavaScript 富文本编辑器。我需要将其配置为仅使用预定义的标签集：

b, i, pre, a, br + Emoji

现在我已经通过以下方式进行了配置：

var Block = Quill.import('blots/block');
Block.tagName = 'PRE';
Quill.register(Block, true);

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

如您所见，我已经将包装器更改为 PRE 标记。如何配置 Quill 以使用上述受限标签集？不允许使用其他标签，如果存在则必须自动删除。

【问题讨论】：

旁注：您仍然需要清理或验证服务器上的最终 HTML；只是 Quill 中的白/黑名单标签并不能保证任何事情。

标签： javascript rich-text-editor quill

【解决方案1】：

在构造函数的参数中定义formats，在那里你可以定义你想要支持的格式。

var quill = new Quill('#editor-container', {
  formats: ['bold', 'italic', 'code', 'code-block', 'link'],
  ...
});

【讨论】：

从 word 中复制粘贴粗体文本不起作用。我有模块：{ toolbar: false }，因为我们不需要工具栏

【解决方案2】：

Quill 与 Delta 和 formats 一起使用，而不是直接与 HTML 和标签一起使用。您可以设置formats 配置选项来限制允许的格式。

【讨论】：

【解决方案3】：

这是所有格式的列表：

 formats = [
    // 'background',
    'bold',
    // 'color',
    // 'font',
    // 'code',
    'italic',
    // 'link',
    // 'size',
    // 'strike',
    // 'script',
    'underline',
    // 'blockquote',
    // 'header',
    // 'indent',
    'list',
    // 'align',
    // 'direction',
    // 'code-block',
    // 'formula'
    // 'image'
    // 'video'
  ];

您可以使用它来阻止某些格式。

【讨论】：