|
|
/*
|
|
|
* @Description: Quill 编辑器
|
|
|
* @Author: tangjiang
|
|
|
* @Github:
|
|
|
* @Date: 2019-11-25 09:46:03
|
|
|
* @LastEditors: tangjiang
|
|
|
* @LastEditTime: 2019-12-10 16:10:23
|
|
|
*/
|
|
|
// import 'quill/dist/quill.core.css';
|
|
|
// import 'quill/dist/quill.bubble.css';
|
|
|
// import 'quill/dist/quill.snow.css';
|
|
|
// import 'katex/dist/katex.css';
|
|
|
import './index.scss';
|
|
|
import 'katex/dist/katex.min.css';
|
|
|
import React from 'react';
|
|
|
import katex from 'katex';
|
|
|
const Quill = require('quill');
|
|
|
// 将katex挂载到window上
|
|
|
window.katex = katex;
|
|
|
window.Quill = Quill;
|
|
|
// const Quill = window.Quill;
|
|
|
// 指定 Quill 默认配置项
|
|
|
const defaultOptions = [
|
|
|
[{ header: [1, 2, 3, 4, 5, 6, false] }], // 自定义标题大小
|
|
|
['bold', 'italic', 'underline', 'strike'], // 切换按钮
|
|
|
['blockquote', 'code-block'], // 代码块
|
|
|
[{ 'list': 'ordered' }, { 'list': 'bullet' }], // 列表
|
|
|
[{ 'script': 'sub'}, { 'script': 'super' }], // 上标/下标
|
|
|
[{ 'indent': '-1'}, { 'indent': '+1' }], // 减少缩进/缩进
|
|
|
[{ 'direction': 'rtl' }],
|
|
|
[{ 'size': ['small', 'large', 'huge', false] }], // 用户自定义下拉
|
|
|
[{ 'color': [] }, { 'background': [] }], // 字体颜色与背景色
|
|
|
[{ 'font': [] }, { 'align': [] }], // 字体与对齐方式
|
|
|
['formula', 'image', 'video'], // 数学公式、图片、视频
|
|
|
['clean'], // 清除格式
|
|
|
];
|
|
|
|
|
|
/**
|
|
|
* @description 抽取一个React编辑器组件，基于Quill
|
|
|
* @class QuillEditor类
|
|
|
* @param [object] props 接收的属性
|
|
|
* props: {
|
|
|
* options: {} // 编辑器配置信息, 不传使用 defaultOptions, 传了的话 使用用户自定义的,
|
|
|
* placeholder: '' // 编辑器提示信息
|
|
|
* innerHtml: '', // 编辑器内容
|
|
|
* onEditorChange: '', // 编辑器内容改变时调用此方法, 返回更改的内容
|
|
|
* }
|
|
|
* @return [stirng] content 返回编辑器内容
|
|
|
*/
|
|
|
class QuillEditor extends React.Component {
|
|
|
|
|
|
state = {
|
|
|
quillEditor: null,
|
|
|
// quillOptions: defaultOptions
|
|
|
}
|
|
|
|
|
|
constructor (props) {
|
|
|
super(props);
|
|
|
this.editorRef = React.createRef(null);
|
|
|
}
|
|
|
|
|
|
componentDidMount () {
|
|
|
const { options, placeholder = '', readOnly = false } = this.props;
|
|
|
let { quillEditor } = this.state;
|
|
|
// console.log(placeholder);
|
|
|
const renderOptions = options || defaultOptions;
|
|
|
|
|
|
const editorOption = {
|
|
|
placeholder: placeholder,
|
|
|
modules: {
|
|
|
toolbar: renderOptions
|
|
|
},
|
|
|
readOnly,
|
|
|
theme: readOnly ? 'bubble' : 'snow',
|
|
|
}
|
|
|
// 实例化 Quill 编辑器
|
|
|
quillEditor = new Quill(this.editorRef.current, editorOption);
|
|
|
this.setState({
|
|
|
quillEditor: quillEditor
|
|
|
});
|
|
|
|
|
|
// 开启一个定时器读取 html初始时, 如果没有最多执行10次后自动清
|
|
|
let count = 0;
|
|
|
this.timer = setInterval(() => {
|
|
|
count++;
|
|
|
if (count >= 10 || this.props.htmlCtx) {
|
|
|
quillEditor.container.firstChild.innerHTML = this.props.htmlCtx || '';
|
|
|
clearInterval(this.timer);
|
|
|
this.timer = null;
|
|
|
}
|
|
|
}, 50);
|
|
|
|
|
|
// quillEditor.setText('<p>aaa</p>');
|
|
|
quillEditor.on('editor-change', this.handleQuillChange);
|
|
|
// console.log('====>>>', quillEditor);
|
|
|
}
|
|
|
|
|
|
// 处理quill事件： editor-change
|
|
|
/**
|
|
|
* @param [string] eventName 事件名
|
|
|
* @param [object] args 参数
|
|
|
*/
|
|
|
handleQuillChange = (eventName, ...args) => {
|
|
|
const { onEditorChange } = this.props;
|
|
|
// 获取编辑器内容
|
|
|
const innerHTML = this.state.quillEditor.container.firstChild.innerHTML;
|
|
|
onEditorChange && onEditorChange(innerHTML);
|
|
|
// if ('text-change' === eventName) {
|
|
|
// const {delta, oldDelta, source} = args;
|
|
|
// console.log('textChange', delta, oldDelta, source);
|
|
|
// } else if ('selection-change' === eventName) {
|
|
|
// const {range, oldRange, source} = args;
|
|
|
// console.log('selectionChange', range, oldRange, source);
|
|
|
// }
|
|
|
}
|
|
|
|
|
|
componentWillUnmount () {
|
|
|
// 删除事件监听
|
|
|
this.state.quillEditor.off(this.handleQuillChange);
|
|
|
}
|
|
|
render () {
|
|
|
const styles = this.props.style || {}
|
|
|
return (
|
|
|
<div
|
|
|
id="quill_editor"
|
|
|
style={styles}
|
|
|
className={'quill_editor_area'}
|
|
|
ref={this.editorRef}>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
export default QuillEditor;
|
