我有一个 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
。
我浏览了文档,但看不出我做错了什么。如有任何帮助,我们将不胜感激!
以下内容应该适合您。我发现导入、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',
};