富文本编辑器Quill的使用

今天药忘吃喽~ 2022-10-07 13:55 199阅读 0赞

需求来源于产品和UI

## 快速开始 ##

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
    
    
    <div id="editor">
      <p>Hello World!</p>
      <p>Some initial <strong>bold</strong> text</p>
      <p><br></p>
    </div>
    
    
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    
    
    <script> var quill = new Quill('#editor', { theme: 'snow' }); </script>

### CDN ###

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
    <script src="//cdn.quilljs.com/1.3.6/quill.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="//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上没那么多  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]

## Quill官网传送 ##

链接：[https://quilljs.com/][https_quilljs.com]

## 公众号 ##

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20221005/a9abe33436f24d37b1367af9109212af.png
[https_quilljs.com]: https://quilljs.com/
[coding]: /images/20221005/33dbb8a0b69446a0be378c04081967fa.png