富文本编辑器Quill的使用

需求来源于产品和UI

快速开始

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

CDN

<!-- Main Quill library -->
<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="//cdn.quilljs.com/1.3.6/quill.min.js"></script>

<!-- Theme included stylesheets -->
<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">

<!-- Core build with no theme, formatting, non-essential modules -->
<link href="//cdn.quilljs.com/1.3.6/quill.core.css" rel="stylesheet">
<script src="//cdn.quilljs.com/1.3.6/quill.core.js"></script>

NPM

npm install quill@1.3.6

Source

git clone git@github.com:quilljs/quill.git

创建编辑器

Container容器

Quill 需要一个容器来添加编辑器。你可以传入 CSS 选择器或 DOM 对象。

var editor = new Quill('.editor');  // First matching element will be used

var container = document.getElementById('editor');
var editor = new Quill(container);

var container = $('.editor').get(0);
var editor = new Quill(container);

Options选项

要配置 Quill，请传入一个选项对象：

var options = {
  debug: 'info', // 开启debug
  modules: { // 包含的模块和相应选项的集合
    toolbar: '#toolbar'
  },
  placeholder: 'Compose an epic...',
  readOnly: true, // 是否将编辑器实例化为只读模式。
  theme: 'snow' // 主题
};
var editor = new Quill('#editor', options);

通过一个js数组来配置初始化容器：

用js数组配置就不能指定toolbar的位置，所以工具栏都在#editor的上面

var toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],        // 切换按钮
  ['blockquote', 'code-block'],

  [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
  [{ 'list': 'ordered'}, { 'list': 'bullet' }],
  [{ 'script': 'sub'}, { 'script': 'super' }],      // 上标/下标
  [{ 'indent': '-1'}, { 'indent': '+1' }],          // 减少缩进/缩进
  [{ 'direction': 'rtl' }],                         // 文本下划线

  [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

  [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
  [{ 'font': [] }],
  [{ 'align': [] }],

  ['clean']                                         // 清除格式
];

var quill = new Quill('#editor', {
  modules: {
    toolbar: toolbarOptions
  },
  theme: 'snow'
});

通过html来创建工具栏初始化容器：

用这个可以把工具栏放在任意位置，因为指定了工具栏的id，在移动端有个小bug就是点击了工具栏的任意一项取消不了，用js数组设置可以

<div id="toolbar-container">
    <span class="ql-formats">
        <select class="ql-font"></select>
        <select class="ql-size"></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-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-header" value="1"></button>
        <button class="ql-header" value="2"></button>
        <button class="ql-blockquote"></button>
        <button class="ql-code-block"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-list" value="ordered"></button>
        <button class="ql-list" value="bullet"></button>
        <button class="ql-indent" value="-1"></button>
        <button class="ql-indent" value="+1"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-direction" value="rtl"></button>
        <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-formula"></button>
    </span>
    <span class="ql-formats">
        <button class="ql-clean"></button>
    </span>
</div>
<div id="editor"></div>

<script>
  var quill = new Quill('#editor', {
    modules: {
      toolbar: '#toolbar-container'
    }
  });
</script>

在react上的应用

// 工具栏配置项
const toolbarOptions = [
	[ 'bold', 'italic', 'underline', 'strike' ], // 切换按钮
	// ['blockquote', 'code-block'],

	// [{ 'header': 1 }, { 'header': 2 }],               // 用户自定义按钮值
	[ { list: 'ordered' }, { list: 'bullet' } ],
	// [{ 'script': 'sub'}, { 'script': 'super' }],      // 上标/下标
	// [{ 'indent': '-1'}, { 'indent': '+1' }],          // 减少缩进/缩进
	// [{ 'direction': 'rtl' }],                         // 文本下划线

	// [{ 'size': ['small', false, 'large', 'huge'] }],  // 用户自定义下拉
	// [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

	// [{ 'color': [] }, { 'background': [] }],          // 主题默认下拉，使用主题提供的值
	// [{ 'font': [] }],
	// [{ 'align': [] }],
	[ 'image' ]
	// ['clean']                                         // 清除格式
];

const Editor = () => {
const editRef = useRef();
	useEffect(() => {
		const container = document.getElementById('meetingEditor');
		if (container) {
		 // 用ref接收初始化的Quill
			editRef.current = new Quill(container, {
				modules: {
					toolbar:toolbarOptions
				},
				placeholder: '请在这里输入…',
				theme: 'snow'
			});
		}
	}, []);
	useEffect(
		() => {
			if (meetingFeeling) { // 这是接口获取到的要展示的内容
				editRef.current.setContents(meetingFeeling); // 设置内容
				if (status === 3 || status === 0) {
					editRef.current.enable(false); // 把编辑器设置为不可编辑状态
					document.querySelector('.ql-toolbar').style.display = 'none'; // 然后隐藏工具栏，不然工具栏还可以点击
				}
			}
		},
		[ meetingFeeling, status ]
	);
	// 提交编辑器内容，这个编辑器内容不要做更改，直接完整的提交给接口，然后接口返回的数据结构也要一样
const handleSubmit = () => {
	const meetingFeeling = editRef.current.getContents(); // 获取编辑器内容
	console.log({meetingFeeling})
}
	return (
		<>
			<div id="meetingEditor" className={style.editor} />
			<button onClick={handleSubmit}>提交</button>
		</>
	)
}

展示效果

我没有配置太多工具栏，因为UI上没那么多

Quill官网传送

链接：https://quilljs.com/

公众号

欢迎大家关注我的公众号： 石马上coding，一起成长