|
|
|
@ -4,7 +4,7 @@
|
|
|
|
|
* @Github:
|
|
|
|
|
* @Date: 2020-01-06 16:20:03
|
|
|
|
|
* @LastEditors : tangjiang
|
|
|
|
|
* @LastEditTime : 2020-01-06 16:46:44
|
|
|
|
|
* @LastEditTime : 2020-01-06 17:13:19
|
|
|
|
|
-->
|
|
|
|
|
## QuillForEditor 使用 [https://quilljs.com/]
|
|
|
|
|
|
|
|
|
@ -17,14 +17,14 @@
|
|
|
|
|
| 字段 | 描述 |
|
|
|
|
|
| ----- | ----- |
|
|
|
|
|
| placeholder | 提示信息 |
|
|
|
|
|
| readOnly | 只读(只读取模式时,没有 工具栏且内容不可编辑,通过用于展示quill内容) |
|
|
|
|
|
| readOnly | 只读(只读取模式时,没有 工具栏且内容不可编辑,通常用于展示quill内容) |
|
|
|
|
|
| autoFocus | 自动获得焦点 |
|
|
|
|
|
| options | 配置参数, 指定工具栏内容 |
|
|
|
|
|
| value | 文本编辑器内容 |
|
|
|
|
|
| imgAttrs | 指定上传图片的尺寸 |
|
|
|
|
|
| style | 指定quill容器样式 |
|
|
|
|
|
| wrapStyle | 指定包裹quill容器的样式|
|
|
|
|
|
| onContentChange | 当编辑器内容变化时调用此回调函数 |
|
|
|
|
|
| onContentChange | 当编辑器内容变化时调用此回调函数(注: 此时返回的内容为对象,提交到后台时需要格式成 JSON 字符串: JSON.stringify(xx)) |
|
|
|
|
|
| showUploadImage | 点击放大上传成功后的图片, 返回上传成功后的图片 url, (评论时点击图片这么大)|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
@ -63,7 +63,32 @@
|
|
|
|
|
````
|
|
|
|
|
import QuillForEditor from 'xxx';
|
|
|
|
|
|
|
|
|
|
<QuillForEditor>
|
|
|
|
|
// 指定需要显示的工具栏信息, 不指定加载全部
|
|
|
|
|
const options = [
|
|
|
|
|
|
|
|
|
|
];
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* @description 获取编辑器返回的内容
|
|
|
|
|
* @params [Object] value 编辑器内容
|
|
|
|
|
*/
|
|
|
|
|
const handleCtxChange = (value) => {
|
|
|
|
|
// 编辑器内容非空判断
|
|
|
|
|
const _text = quill.getText();
|
|
|
|
|
const reg = /^[\s\S]*.*[^\s][\s\S]*$/;
|
|
|
|
|
if (!reg.test(_text)) {
|
|
|
|
|
// 处理编辑器内容为空
|
|
|
|
|
} else {
|
|
|
|
|
// 提交到后台的内容需要处理一下;
|
|
|
|
|
value = JSON.stringify(value)
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<QuillForEditor
|
|
|
|
|
options={options}
|
|
|
|
|
onContentChange={handleCtxChange}
|
|
|
|
|
>
|
|
|
|
|
</QuillForEditor>
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|