我想在我的React富文本编辑器中使用react-quill,但我找不到在工具栏中添加颜色选择器的方法。 我也在使用打字稿。 这是我的组件:
const modules = {
toolbar: [
[{ font: ['', 'times-new-roman', 'arial'] }],
[{ header: [1, 2, 3, false] }],
['bold', 'italic', 'underline', 'strike', 'blockquote'],
[{ list: 'ordered' }, { list: 'bullet' }, { indent: '-1' }, { indent: '+1' }],
['link'],
['clean']
],
}
function RichTextEditor() {
return <ReactQuill theme="snow" modules={modules} formats={formats} preserveWhitespace />
}
您可以像这样使用带有 javascript 的自定义工具栏,它可能会起作用!
var quill = new Quill('#editor-container', {
modules: {
toolbar: [
[{
header: [1, 2, false]
}],
['bold', 'italic', 'underline'],
['image', 'code-block'],
[{
'color': ['#F00', '#0F0', '#00F', '#000', '#FFF', 'color-picker']
}]
]
},
placeholder: 'Compose an epic...',
theme: 'snow' // or 'bubble'
});
function showColorPicker(value) {
if (value === 'color-picker') {
var picker = document.getElementById('color-picker');
if (!picker) {
picker = document.createElement('input');
picker.id = 'color-picker';
picker.type = 'color';
picker.style.display = 'none';
picker.value = '#FF0000';
document.body.appendChild(picker);
picker.addEventListener('change', function() {
quill.format('color', picker.value);
}, false);
}
picker.click();
} else {
quill.format('color', value);
}
}
var toolbar = quill.getModule('toolbar');
toolbar.addHandler('color', showColorPicker);
#editor-container {
height: 375px;
}
.ql-color .ql-picker-options [data-value=color-picker]:before {
content: 'Pick Color';
}
.ql-color .ql-picker-options [data-value=color-picker] {
background: none !important;
width: 100% !important;
height: 25px !important;
text-align: center;
color: blue;
text-decoration: underline;
}
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<link href="//cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" />
<link href="//cdn.quilljs.com/1.3.6/quill.bubble.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/KaTeX/0.7.1/katex.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/monokai-sublime.min.css" rel="stylesheet" />
<div id="editor-container">
</div>
这是一个 javascript 的示例,如果需要,您可以转换为 typescript。 谢谢你。
我使用自定义颜色选择器实现了这一点,点击打开它 完整代码在这里 - https://codesandbox.io/p/devbox/react-quill-example-5j6w2y?file=%2Fsrc%2FApp.tsx%3A13%2C22
首先你必须这样做
#editor-container {
height: 375px;
}
.ql-color .ql-picker-options [data-value=color-picker]:before {
content: 'Pick Color';
}
.ql-color .ql-picker-options [data-value=color-picker] {
background: none !important;
width: 100% !important;
height: 25px !important;
text-align: center;
color: blue;
text-decoration: underline;
}
const modules = {
toolbar: [
[{ size: fontSizeArr }],
[{ font: Font.whitelist }],
[{ align: [] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ list: 'ordered' }, { list: 'bullet' }],
[{ color: ['color-picker'] }, { background: ['color-picker'] }],
['link', 'image'],
['clean']
],
{showColorPicker && (
<div className=" absolute right-[20%] top-[5%] z-[100000] mt-4 flex flex-col items-center justify-center rounded border-[1px] border-bBlack-70 bg-tWhite-50 p-[4px]">
<HexColorPicker color={selectedColor} onChange={(e) => setSelectedColor(e)} />
<Button variant="primary" className="mt-1" onClick={applyColor}>
Confirm
</Button>
</div>
)}
useEffect(() => {
if (quillRef.current && showToolbar) {
const quillInstance = quillRef.current.getEditor();
const toolbar = quillInstance.getModule('toolbar');
toolbar.addHandler('color', selectCustomColor);
toolbar.addHandler('background', selectBackgroundCustomColor);
}
}, []);
const applyColor = () => {
const quillInstance = quillRef.current.getEditor();
quillInstance.format('color', selectedColor);
setShowColorPicker(false);
};