quill 富文本编辑器实现自定义工具栏按钮并实现置入html代码

前言

实现一个自定义的置入按钮，然后实现置入html代码的功能，比如我们在使用外部iframe标签时，如果直接粘贴，会被识别为string值，从而导致无法正确展示内容，所以我们需要一个置入功能。

我一开始想通过控制options的方式来实现，发现不太行，最后转用：先声明html结构，然后options关联的方式。

教程

自定义工具栏

目前个人觉得最方便的方式就是先写html结构，然后options中通过container进行关联。

<div id="quill-edit-toolbar" class="ql-toolbar ql-snow">
  <span class="ql-formats">
    <select class="ql-header">
      <option value="1"></option>
      <option value="2"></option>
      <option value="3"></option>
      <option value="4"></option>
      <option value="5"></option>
      <option value="6"></option>
      <option value="false"></option>
    </select>
  </span>
  <span class="ql-formats">
    <button class="ql-bold"></button>
    <button class="ql-italic"></button>
    <button class="ql-underline"></button>
    <button class="ql-strike"></button>
  </span>
  <span class="ql-formats">
    <select class="ql-color"></select>
    <select class="ql-background"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-list" value="ordered"></button>
    <button class="ql-list" value="bullet"></button>
  </span>
  <span class="ql-formats">
    <button class="ql-blockquote"></button>
    <button class="ql-code-block"></button>
  </span>
  <span class="ql-formats">
    <select class="ql-align"></select>
  </span>
  <span class="ql-formats">
    <button class="ql-link"></button>
    <button class="ql-image"></button>
    <button class="ql-video"></button>
    <button class="ql-embed">嵌入</button>
  </span>
  <span class="ql-formats">
    <button class="ql-clean"></button>
  </span>
</div>

通过<span class="ql-formats">进行分割，<button class="ql-embed">嵌入</button>为自定义的按钮，注意一点，ql-xxx中的xxx名字对应options中handlers自定义的行为属性名。

默认情况下，使用snow主题，按钮的宽度是固定的，这就导致中文文字会进行换行，我们可以通过自定义样式调整：

.ql-embed.ql-embed {
    width: auto;
    white-space: nowrap;
}

自定义嵌入行为

下面就是自定义行为了：

const showEmbedDialog = ref(false);
const editorOptions: QuillOptionsStatic = {
    theme: 'snow',
    modules: {
        toolbar: {
            container: '#quill-edit-toolbar',
            handlers: {
                /** 嵌入 */
                embed: () => {
                    showEmbedDialog.value = true;
                },
            },
        },
    },
    bounds: '.quill-editor-wrapper',
};

showEmbedDialog 控制一个dialog弹窗，弹窗里面是一个textarea元素，用于用户填写需要嵌入的代码，在用户点击确认后，将内容嵌入编辑器中，具体弹窗的逻辑就不写了，这里直接写确认按钮如何将内容嵌入编辑器中。

function onEmbedDialogConfirm() {
    if (embedValue.value) { //如果textarea双向绑定的内容有值
        const range = editor.getSelection(true);
        const index = range ? range.index : 0;
        editor.clipboard.dangerouslyPasteHTML(index, embedValue.value);
    }
    ...省略
}

其实就是通过dangerouslyPasteHTML的方式，将用户的内容渲染成html嵌入。

至此教程结束。