Reactjs 如何在Quill JS（react Quill）中创建撤消/重做按钮？

QuillJS没有默认的撤销/重做按钮。我正在尝试将它们添加到工具栏。Quill有一个保存了撤消/重做图标的文件夹。在node_模块中，还有undo（）和redo（）函数。我对编码有点陌生，不知道如何访问这些东西并让它们工作。我在用React。以下是我目前的代码：

import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import 'react-quill/dist/quill.bubble.css';

class QuillTextEditor extends Component {
    constructor(props) {
        super(props);

        this.modules = {
            toolbar: [
              [{ 'header': [false, 1, 2, 3] }],
              [{ 'align': [] }],
              ['bold', 'italic', 'underline',],
              [{'list': 'ordered'}, {'list': 'bullet'}],
              [{ 'indent': '-1'}, { 'indent': '+1' }],
              [{ 'script': 'super' }, 'strike'],
              [{ 'color': [] }, { 'background': [] }], 
              ['link', 'image'],
            ]
        };

        this.formats = [
            'header',
            'align',
            'bold', 'italic', 'underline', 
            'list', 'bullet',
            'indent', 'indent',
            'script', 'strike',
            'color', 'background',
            'link', 'image',
        ];
    }

    render() {
        return (
          <div>
            <ReactQuill 
                theme="snow"  
                modules={this.modules}
                formats={this.formats} 
                value={''}/>
            </div>
          </div>
        );
    }

}

export default QuillTextEditor;

从“react quill”导入react quill；
导入'react quill/dist/quill.snow.css'；
导入'react quill/dist/quill.bubble.css'；
类QuillTextEditor扩展组件{
建造师（道具）{
超级（道具）；
此参数为.modules={
工具栏：[
[{'header'：[false，1，2，3]}，
[{'align'：[]}]，
[‘粗体’、‘斜体’、‘下划线’、]，
[{'list'：'ordered'}，{'list'：'bullet'}]，
[{'indent'：'-1'}，{'indent'：'+1'}]，
[{'script'：'super'}，'strike']，
[{‘颜色’：[]}，{‘背景’：[]}，
[“链接”，“图像”]，
]
};
此文件的格式=[
“标题”，
“对齐”，
“粗体”、“斜体”、“下划线”，
“列表”、“项目符号”，
'缩进'，'缩进'，
'脚本'，'罢工'，
'颜色'，'背景'，
'链接'，'图像'，
];
}
render（）{
返回(
);
}
}
导出默认QuillExtenditor；

有人确切地知道我需要编写什么代码以及在哪里才能将撤销/重做图标添加到连接到Quill内置的撤销/重做功能的工具栏上吗？我已经试了好几天了，都想不出来

有没有人确切地知道我需要写什么代码以及在哪里 向连接到工具栏的工具栏添加撤消/重做图标的顺序 撤消/重做功能内置于纬管中

嗨。不幸的是，我仍然不知道如何将按钮连接到本机Quill函数。但是你可以做一些其他的事情来达到你想要的结果

看一看搜索项目020、021和026

您可以添加新按钮，并将其设置为调用以下代码：

quill.history.undo();

---

如果您还有其他问题，请留下评论。我会尽快回答你。

@Loa谢谢你的帮助。我不得不将许多不同帖子的代码混合在一起，但是你的链接开始了查找所有帖子的过程

以下是如何使react quill的撤消/重做工作：

在render（）中的ReactQuill组件中，添加：

在函数生成器区域（不知道其名称），添加以下函数：

    myUndo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.undo();
    }

    myRedo = () => {
        let myEditor = this.reactQuillRef.getEditor();
        return myEditor.history.redo();
    }

这将使撤消/重做功能正常工作。在编辑器中，撤消/重做按钮还没有图标；我还没有弄明白如何添加图标；它们只有“撤销”和“重做”两个词。但它们是有效的

---

接下来我要弄清楚的是如何添加撤销/重做图标。如果有人知道怎么做，请告诉我。谢谢

不确定这将如何与React集成，但我能够在quill repo上使用svg图标

toolbarOptions = [
    ['bold', 'italic', 'underline'],
    ['undo' , 'redo' ],
    [{ 'indent': '-1'}, { 'indent': '+1' }],
    [{ align: '' }, { align: 'center' }, { align: 'right' }, { align: 'justify' }],
    ['image']
];

var icons = Quill.import("ui/icons");
    icons["undo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="6 10 4 12 2 10 6 10"></polygon>
    <path class="ql-stroke" d="M8.09,13.91A4.6,4.6,0,0,0,9,14,5,5,0,1,0,4,9"></path>
  </svg>`;
    icons["redo"] = `<svg viewbox="0 0 18 18">
    <polygon class="ql-fill ql-stroke" points="12 10 14 12 16 10 12 10"></polygon>
    <path class="ql-stroke" d="M9.91,13.91A4.6,4.6,0,0,1,9,14a5,5,0,1,1,5-5"></path>
  </svg>`;

var quill = new Quill('div#content', {
    modules: {
        toolbar: toolbarOptions,
...

工具栏选项=[
[“粗体”、“斜体”、“下划线”]，
[“撤消”、“重做”]，
[{'indent'：'-1'}，{'indent'：'+1'}]，
[{align:'}，{align:'中心'}，{align:'右'}，{align:'对正'}]，
['image']
];
变量图标=Quill.import（“ui/图标”）；
图标[“撤消”]=`
`;
图标[“重做”]=`
`;
var quill=新的quill（'div#content'{
模块：{
工具栏：工具栏选项，
...

---

我只想为使用react quill的开发人员添加一些内容。在这一行：

 var icons = Quill.import("ui/icons");

您没有获得羽毛笔参考。因此，您可以使用以下替代上述线条：

 var icons = ReactQuill.Quill.import("ui/icons");

---

这就解决了ReactQuill的问题。

我出现了“撤消/重做”按钮，但函数不起作用。这是我的新代码：``类QuillExtenditor扩展组件{…This.modules={历史：{延迟：1000，maxStack:100，仅用户：false}，工具栏：['UNDO']，['REDO']，…]，处理程序：{'undo'：quill.history.undo（），'redo'：quill.history.redo（）}“``我收到一条错误消息，说'quill'没有定义。你知道如何解决这个问题吗？非常感谢你的帮助。当你没有引用任何内容时，会出现此消息。在这种情况下，

quill

变量没有启动。如何启动此变量。只有一个问题：你正在使用reactjs，不幸的是我不知道如何使用这项技术。根据您对该工具的了解，您需要了解如何获得

新羽毛笔（…）的参考

@PageCOW看看是否或可以帮助你。如果这对你没有帮助，请在stackoverflow上搜索：。我很高兴我帮助了你。最重要的是，你不仅发现了解决方案，而且决定与社区共享。继续努力！分享知识！我今天帮助了你，但没有任何东西阻止我在未来需要你的帮助，或者任何人需要你的帮助lse.我希望你能完成你的项目，并祝你好运。：）我能像这样获得Quill参考。

import{Quill}来自'react Quill'

我正在使用react-quill@2.0.0-beta.2是的，这基本上是通过解构导入的。

 var icons = Quill.import("ui/icons");

 var icons = ReactQuill.Quill.import("ui/icons");