在 TINYMCE 编辑器中打字很慢

Question

我有大量的内容数据（时事通讯），我已经在 Tiny Mce Editor 中添加了。内容看起来不错，但是当我开始输入（添加更多内容）时，输入速度非常慢，我必须等到字符打印完成。

问题只与大内容有关，与小内容无关。

您可以查看下面的演示 link 来测试上述情况。粘贴大内容源代码，尝试在Tiny Mce编辑器中输入而不是在源代码中输入。

https://www.tinymce.com/docs/demo/basic-example/

Answer 1

我遇到了类似的问题。我的问题是在 tinymce.init 中我有一个更新文本区域的函数：

setup: function (editor) {
        editor.on('change', function () {
            tinymce.triggerSave();
        });
    }

问题在于函数会在每次更改、每次按键或颜色更改时更新文本区域。内容越多，越慢。

我的解决方案很简单，从 tinyMCE init 中删除 triggerSave 并在通过提交按钮提交表单之前调用 tinymce.triggerSave()：

<button type="submit" name="btn-addpost" onclick="tinyMCE.triggerSave();"><span class="glyphicon glyphicon-send"></span>&nbsp; Add Post</button>

也许你有类似的问题。

希望这对您有所帮助。

Answer 2

我在使用 TineMce 和 React js 时遇到了同样的问题。问题出在编辑器中的每个按键上，我正在更新导致打字缓慢的表单值。

所以我现在在 onBlur 事件上更新，而不是在每次按键时更新表单。

下面是我的 React js 示例，但您只需在您的 js 代码中实现 onBlur 事件

const handleEditorBlur = (ed, event) => {
    const content = event.getContent();
    if (content) {
        formik.setFieldTouched("content", true);
    }
    formik.setFieldValue("content", content);
}

<Editor
    apiKey={process.env.MIX_TINYMCE_API_KEY}
    onBlur={handleEditorBlur}
    //onEditorChange={handleEditorChange}
    //value={formik.values.content}
    init={{
        content_css: "writer",
        plugins: "lists",
        toolbar: "code",
    }}
/>

在 TINYMCE 编辑器中打字很慢

Typing very slow in TINY MCE editor

tinymce