当作为Contentful SDK的Field修改实现时，我正在尝试更改react quill的撤消/重做行为。上的模板描述了实现https://github.com/contentful/create-contentful-app/tree/master/template.
当简单地实现时，Ctrl-Z键盘快捷键会完全清除react quill编辑器。在历史模块中实现userOnly: true修复了这一问题，但我希望通过直接访问react quill的delta和历史功能，使用工具栏中的按钮来控制撤消/重做行为。
我已修改https://github.com/contentful/create-contentful-app/blob/master/template/src/components/Field.tsx如下所示：
import React, {useState, useEffect, useRef, createRef} from 'react';
import { Paragraph } from '@contentful/forma-36-react-components';
import { FieldExtensionSDK } from 'contentful-ui-extensions-sdk';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
const formats = ['header','bold', 'italic', 'underline', 'strike', 'blockquote','list', 'bullet', 'indent','link', 'image', 'undo', 'redo'];
let icons = ReactQuill.Quill.import("ui/icons");
interface FieldProps { sdk: FieldExtensionSDK; }
let mainRef = React.createRef<ReactQuill>();
const Field = (props: FieldProps) => {
const [value, setValue] = useState('');
useEffect (()=> {
// CMS update code here - removed for clarity
}, [])
const modules = {
toolbar: {
container: [
[
{ 'header': [1, 2, false] }
],
['bold', 'italic'],
[
{'list': 'ordered'},
{'list': 'bullet'}
],
['link'],
['image'],
['undo'],
['redo']
],
handlers: {
'undo': function () {
console.log(mainRef.current)
},
'redo': function () {
console.log(mainRef.current)
}
}
},
history: {
delay: 200,
maxStack: 500,
userOnly: true
}
};
return <div>
<ReactQuill id='quillmain' modules={modules} formats={formats} theme="snow" value={value} onChange={setValue} ref={mainRef}/>
</div>
;
};
export default Field;
上面定义的undo和redo处理程序将成功启动-单击undo或redo图标，我将根据我创建的引用获得ReactQuill实例当前状态的控制台输出：
控制台输出
我想访问在中定义的历史模块控件https://quilljs.com/docs/modules/history/，这样我就可以有效地调用mainRef.current.history.undo((和redo((之类的东西。但是，如果我试图在模块const声明中调用它们，我就会遇到ReactQuill实例的状态问题：
console.log(mainRef.current.history)
>>
Object is possibly 'null'. TS2531
试图强行解决问题无济于事：
console.log(mainRef.current!.history)
>>
Property 'history' does not exist on type 'ReactQuill'. TS2339
但根据上面的屏幕截图，打印当前实例表明history属性是可用的，我认为只是在声明模块const时没有。将声明移到模块常量之外没有帮助-还会遇到同样的TS错误。
根据这个答案，这感觉应该是可能的：如何在Quill JS(react Quill(中创建撤消/重做按钮，但我觉得，被限制在一个功能组件、typescript和hook的组合，都在密谋阻止我以我需要的方式使用react quill。
有人能建议我如何访问ReactQuill实例，以便根据需要调用undo((和redo((函数吗？或者，如何在这些限制下实现ReactQuill，以便undo功能按预期工作
这里的答案是useCallback。正如所怀疑的那样，内联函数导致组件出现状态问题，但useCallback允许声明内联函数，同时保持所需的react quill行为。以下代码允许受控制的内联函数激发，同时保持所需的撤消/重做行为：
const modules = {
toolbar: {
container: [
[
{ 'header': [1, 2, false] }
],
['bold', 'italic'],
[
{'list': 'ordered'},
{'list': 'bullet'}
],
['link'],
['image'],
['undo'],
['redo']
],
handlers: {
'undo': React.useCallback(undoFunc => {
console.log(mainRef.current) // DOES NOT BREAK QUILL STATE!
}, [])
'redo': function () {
console.log(mainRef.current) // BREAKS QUILL STATE!
}
}
},
history: {
delay: 200,
maxStack: 500,
userOnly: true
}
};
用useCallback而不是内联函数声明模块const可以实现所需的行为。
import ReactQuill, { Quill } from 'react-quill';
let mainRef = React.createRef<ReactQuill>();
.....
....
..
.
const modules = {
toolbar: {
container: [
[
{ 'header': [1, 2, false] }
],
['bold', 'italic'],
[
{'list': 'ordered'},
{'list': 'bullet'}
],
['link'],
['image'],
['undo'],
['redo']
],
handlers: {
'undo': () => {
let myEditor: any = mainRef?.current?.getEditor();
return myEditor?.history?.undo();
},
'redo': function () {
let myEditor: any = mainRef?.current?.getEditor();
return myEditor?.history?.redo();
}
}
},
history: {
delay: 200,
maxStack: 500,
userOnly: true
}
};
return (
<ReactQuill
theme="snow"
value={props.value}
onChange={props.onChange}
placeholder={'Write something awesome...'}
modules={modules}
ref={mainRef}
formats={formats}
/>
);
试着这样做，它对我有用！！