使用 QuillJS 注册颜色

Question

我有一个 dotnet Blazor 解决方案，需要 WYSIWYG 编辑器。我正在使用 QuillJS，但我很难将“颜色”添加到 QuillJS 工具栏。

我按照示例使用 webpack 配置 QuillJS：https://github.com/quilljs/webpack-example/

我的Quill配置文件，由webpack导入，是：

import "../../node_modules/quill/dist/quill.snow.css"
import Quill from "../../node_modules/quill/core";

import Toolbar from "../../node_modules/quill/modules/toolbar";
import Snow from "../../node_modules/quill/themes/snow";
import Header from "../../node_modules/quill/formats/header";
import Bold from "../../node_modules/quill/formats/bold";
import Italic from "../../node_modules/quill/formats/italic";
import Underline from "../../node_modules/quill/formats/underline";
import Strike from "../../node_modules/quill/formats/strike";
import List from "../../node_modules/quill/formats/list";
import ColorClass from "../../node_modules/quill/formats/color";
import ColorStyle from "../../node_modules/quill/formats/color";
import Script from "../../node_modules/quill/formats/script";

Quill.register({
    "modules/toolbar": Toolbar,
    "themes/snow": Snow,
    "formats/header": Header,
    "formats/bold": Bold,
    "formats/italic": Italic,
    "formats/underline": Underline,
    "formats/strike": Strike,
    "formats/list": List,
    "formats/color": ColorClass,
    "formats/color/style": ColorStyle,
    "formats/script": Script,
});

export default function () {
    window.ic = window.ic || {};
    window.ic.quill = window.ic.quill || {};

    window.ic.quill.addWysiwyg = function (element, placeholder) {

        var options = {
            modules: {
                keyboard: {
                    bindings: {
                        tab: {
                            key: 'Tab',
                            handler() {
                                // tab should tab to next element, rather than insert a tab
                                this.quill.blur();
                                return false;
                            }
                        }
                    }
                },
                toolbar: [
                    [{ header: [1, 2, 3, 4, false] }],
                    ['bold', 'italic', 'underline', 'strike'],
                    ['color', 'background'],
                    [{ list: ['ordered', 'bullet'] }],
                    ['clean']
                ]
            },
            placeholder: placeholder,
            theme: 'snow',
            formats: [
                "bold",
                "italic",
                "header",
                "underline",
                "strike",
                "script",
                "color",
                "script",
                "list"
            ]
        };

        const quill = new Quill(element, options);

        element.onclick = function () {
            quill.focus();
        };
    };
};

当我的应用程序加载时，webpacked

Quill.register

函数如下所示：

所有其他模块看起来都很好（并且在不包含颜色时按预期工作），但颜色类别和样式是

e.default

，即

undefined

。

我浏览了文档，但看不出我做错了什么。如有任何帮助，我们将不胜感激！

Answer 1

以下内容应该适合您。我发现导入、Quill.register 和选项中有错误。订单和项目符号也应该修复。

import Toolbar from "../../node_modules/quill/modules/toolbar";
import Snow from "../../node_modules/quill/themes/snow";
import Header from "../../node_modules/quill/formats/header";
import Bold from "../../node_modules/quill/formats/bold";
import Italic from "../../node_modules/quill/formats/italic";
import Underline from "../../node_modules/quill/formats/underline";
import Strike from "../../node_modules/quill/formats/strike";
import List from "../../node_modules/quill/formats/list";
import { BackgroundClass, BackgroundStyle } from "../../node_modules/quill/formats/background";
import { ColorClass, ColorStyle } from "../../node_modules/quill/formats/color";
import Script from "../../node_modules/quill/formats/script";

Quill.register({
    "modules/toolbar": Toolbar,
    "themes/snow": Snow,
    "formats/header": Header,
    "formats/bold": Bold,
    "formats/italic": Italic,
    "formats/underline": Underline,
    "formats/strike": Strike,
    "formats/list": List,
    "formats/color/class": ColorClass,
    "formats/color/style": ColorStyle,
    "formats/background/class": BackgroundClass,
    "formats/background/style": BackgroundStyle,
    "formats/script": Script,
});

var options = {
  modules: {
      keyboard: {
          bindings: {
              tab: {
                  key: 'Tab',
                  handler() {
                      // tab should tab to next element, rather than insert a tab
                      this.quill.blur();
                      return false;
                  }
              }
          }
      },
      toolbar: [
          [{ header: [1, 2, 3, 4, false] }],
          ['bold', 'italic', 'underline', 'strike'],
          [{ 'color': [] }, { 'background': [] }],
          [{ 'list': 'ordered'}, { 'list': 'bullet' }],
          ['clean']
      ]
  },
  placeholder: placeholder,
  theme: 'snow',
};