##react中quill的使用
近期使用由于项目需要一款富文本编辑框,本来打算试着使用drift.js写一款富文本编辑器。但由于时间比较紧急最后选择引用第三方插件,在众多富文本插件中初步选择了Quill和CKEditor5,最后选择了简单便捷的Quill。下面是目录:
- 引入插件
- 配置toolbar
- toolbar进一步自定义字体
- toolbar自定义上传图片
引入插件:
通过npm install quill 引入最新的quill插件;
项目中引入:
import Quill from 'quill';
import 'quill/dist/quill.snow.css';
在componentDidMount进行初始化:
const textbox = this.refs.textarea;
const options = {
debug: 'warn',
modules: {
toolbar: toolbarOptions,
},
placeholder: '请输入文本...',
readOnly: false,
theme: 'snow'
};
editor = this.editor = new Quill(textbox, options);
const {answer} = this.props.problemDetails;
if (answer) editor.clipboard.dangerouslyPasteHTML(answer);
editor.on('text-change', this.handleChange.bind(this));
answer是赋予富文本的初始值;
options为配置项,debug为在console中打印信息的时期,可供选择的有‘debug’,‘warn’,‘log’和‘info’;toolbar选为TRUE是指toolbar选用默认功能;readOnly指是否可编辑;theme有‘snow’和‘bubble’两种选择,分别是toolbar部分是否显示。
配置toolbar
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'], // toggled buttons
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],