update quill autofocus

dev_static
tangjiang 5 years ago
parent fc1b0895bb
commit 6f5ea589f4

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-12-18 08:49:30 * @Date: 2019-12-18 08:49:30
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2020-01-09 14:52:58 * @LastEditTime : 2020-01-10 15:05:27
*/ */
import './index.scss'; import './index.scss';
import 'quill/dist/quill.core.css'; // 核心样式 import 'quill/dist/quill.core.css'; // 核心样式
@ -40,7 +40,7 @@ Quill.register({
function QuillForEditor ({ function QuillForEditor ({
placeholder, placeholder,
readOnly, readOnly,
autoFocus, autoFocus = false,
options, options,
value, value,
imgAttrs = {}, // 指定图片的宽高 imgAttrs = {}, // 指定图片的宽高
@ -196,7 +196,7 @@ function QuillForEditor ({
}); });
_quill.getModule('toolbar').addHandler('fill', (e) => { _quill.getModule('toolbar').addHandler('fill', (e) => {
console.log('点击了填空=====>>>>>>', e); // console.log('点击了填空=====>>>>>>', e);
setFillCount(fillCount + 1); setFillCount(fillCount + 1);
const range = _quill.getSelection(true); const range = _quill.getSelection(true);
// _quill.insertText(range.index, '▁', { 'data_index': fillCount }); // _quill.insertText(range.index, '▁', { 'data_index': fillCount });
@ -232,16 +232,21 @@ function QuillForEditor ({
} }
const current = value const current = value
// console.log('+++++', current);
if (!deepEqual(previous, current)) { if (!deepEqual(previous, current)) {
setSelection(quill.getSelection()) setSelection(quill.getSelection())
if (typeof value === 'string') { if (typeof value === 'string') {
quill.clipboard.dangerouslyPasteHTML(value, 'api') quill.clipboard.dangerouslyPasteHTML(value, 'api');
if (autoFocus) {
quill.focus();
} else {
quill.blur();
}
} else { } else {
quill.setContents(value) quill.setContents(value)
if (autoFocus) quill.focus();
} }
} }
}, [quill, value, setQuill]); }, [quill, value, setQuill, autoFocus]);
// 清除选择区域 // 清除选择区域
useEffect(() => { useEffect(() => {
@ -275,13 +280,6 @@ function QuillForEditor ({
} }
}, [quill, handleOnChange]); }, [quill, handleOnChange]);
useEffect(() => {
if (!quill) return;
if (autoFocus) {
quill.focus();
}
}, [quill, autoFocus]);
// 返回结果 // 返回结果
return ( return (
<div className='quill_editor_for_react_area' style={wrapStyle}> <div className='quill_editor_for_react_area' style={wrapStyle}>

@ -4,7 +4,7 @@
* @Github: * @Github:
* @Date: 2019-11-20 10:35:40 * @Date: 2019-11-20 10:35:40
* @LastEditors : tangjiang * @LastEditors : tangjiang
* @LastEditTime : 2020-01-09 16:54:45 * @LastEditTime : 2020-01-10 15:06:23
*/ */
import './index.scss'; import './index.scss';
// import 'katex/dist/katex.css'; // import 'katex/dist/katex.css';
@ -453,6 +453,7 @@ class EditTab extends React.Component {
colon={ false } colon={ false }
> >
<QuillForEditor <QuillForEditor
autoFocus={true}
style={{ height: '200px' }} style={{ height: '200px' }}
placeholder="请输入描述信息" placeholder="请输入描述信息"
onContentChange={handleContentChange} onContentChange={handleContentChange}

Loading…
Cancel
Save