检测 CKEditor 5 中文本何时发生更改并且编辑器失去焦点

2024-01-05

我正在尝试在 CKEditor 5 中实现自动保存功能,只有在进行更改且编辑器失去焦点后才会进行保存。

我怎么能这样做呢?该文档让我非常困惑。

这是我得到的最接近的:

function onChange(el,editor) {
    editor.document.once('change',function(evt,data) {
        $(el).one('blur',function() {
            saveFunction();
            onChange(el,editor);
        });
    });
}

onChange(el,editor);

我的解决方案的问题是每当 CKEditor 调出模态时就会触发模糊事件。


跟踪焦点元素编辑器用户界面 https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editorui-EditorUI.html你可以使用焦点追踪器 https://docs.ckeditor.com/ckeditor5/latest/api/module_core_editor_editorui-EditorUI.html#member-focusTracker(可用于editor.ui.focusTracker)。它跟踪编辑器当前关注的各个部分。

The focusTracker.isFocused https://docs.ckeditor.com/ckeditor5/latest/api/module_utils_focustracker-FocusTracker.html#member-isFocused is true每当编辑器的任何注册组件获得焦点时。为了经典编辑器构建 https://docs.ckeditor.com/ckeditor5/latest/examples/builds/classic-editor.html重点元素可能是以下之一:

  • 编辑区,
  • toolbar,
  • 上下文工具栏。
editor.ui.focusTracker.on( 'change:isFocused', ( evt, name, isFocused ) => {
    if ( !isFocused ) {
        // Do whatever you want with current editor data:
        console.log( editor.getData() );
    }
} );
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

检测 CKEditor 5 中文本何时发生更改并且编辑器失去焦点 的相关文章

  • 使用 ScriptEngine 从 JavaScript 调用 Java 方法

    我正在使用 ScriptEngine 运行 JavaScript 我希望 JavaScript 脚本能够调用 myFunction 其中 myFunction 是我的给定类中的一个方法 我知道可以将 importPackage 用于标准 J
  • 使用 AJAX 来回发送信息

    使用 post 你可以向服务器发送信息 但是当你需要从服务器接收信息时怎么办呢 信息如何从可以由 php 变量保存的方式变为可以由 javascript 变量保存的方式 反之亦然 这与您的问题更相关 http docs jquery com
  • 从 HTML 表单发送数据到 Node.js 服务器

    我正在学习 Node js 我的服务器中有这个 var http require http var url require url http createServer function request response response w
  • 如何监控浏览器中发出的所有自定义事件?

    我想监视网络浏览器中触发的所有自定义事件 任何标准浏览器都可以 需要明确的是 我知道您可以附加事件处理程序来查看何时触发 通常 事件 但如何可靠地检测嵌入对象或 jQuery 脚本是否触发自定义事件 我可以重构浏览器源代码来挂钩事件循环 但
  • JS如何获取多维数组的最大深度?

    我有一个多维数组 我想知道它的最大深度 我发现了这个灵魂 但它不适用于对象数组 const getArrayDepth arr gt return Array isArray arr 1 Math max arr map getArrayD
  • 使用shinyjs通过javascript在闪亮的应用程序中操作现有的Leaflet地图

    我有一个闪亮的应用程序 其中包含现有的传单地图 我希望能够在渲染后使用自定义 javascript 通过shinyjs包裹 一个最小的例子如下 app R packages library dplyr library leaflet lib
  • 从 Angular 6 服务中绑定图像

    我有一个端点 它根据某些参数为我提供图像 这不是一个图像网址 而是一个普通图像 因此 当我到达邮递员中的端点时 作为响应 我收到一张图像 JPG 我是否可以在变量中接收该图像并将其绑定到 HTML 标签中 所有问题都有将图像 url 映射到
  • 使用 word_number 值对 javascript 数组进行排序

    如何对数组进行排序 var arr new Array word 12 word 59 word 17 这样我得到 word 12 word 17 word 59 Thanks 您需要编写一个排序方法 您可以编写任何您喜欢的方法 该方法在
  • TypeScript 中类和命名空间的区别

    到底有什么区别classes and namespaces在打字稿中 我知道 如果您创建一个带有静态方法的类 您可以在不实例化该类的情况下访问它们 这正是我猜想的命名空间的要点之一 我还知道你可以创建多个同名的命名空间 并且它们的方法在编译
  • 如何在 Jest 测试中模拟 StatusBarManager.getHeight?

    我正在使用 expo 34 并且反应本机用户界面库 https www npmjs com package react native ui lib来自 wix 并且在为我的组件设置笑话测试时遇到问题 问题看起来出现在link https g
  • 在 Javascript 中,使用 var foo = function foo(i) { ... } 的动机或优点是什么?

    我在答案中看到 在Javascript中 为什么要写 var QueryStringToHash function QueryStringToHash query https stackoverflow com questions 3233
  • 为什么 JSON.stringify() 接受 Date 对象?

    至少在 Firefox 中 您可以对 Date 对象进行字符串化 gt gt gt JSON stringify now new Date now 2012 04 23T18 44 05 600Z 这是有效的 因为 在 Firefox 中
  • Angular 7 Guard 重定向仅适用于双击

    问题是我已经实现了一个 Guard 旨在处理特定的目录 如果当前用户名的角色等于 2 它应该返回 true 如果没有 那么它不应该重定向 这是我的 app routing module ts 文件 问题出在 userlist 路径中 我们是
  • 使用 getElementById 在 javascript 中使用正则表达式进行 Html 表单验证?

    我想使用正则表达式验证 html 表单的示例模式 AAA 111 2222 aa 1234 目前 我的代码要么为所有输入返回 正确 要么为所有输入返回 不正确 并且我无法弄清楚我的问题出在哪里 var x document getEleme
  • React.js this.props.data.map() 不是一个函数

    我正在搞乱反应并尝试解析和渲染 json 对象 现在 我只是使用硬编码对象设置它以进行测试 而不是从 ajax 调用中获取它
  • jQuery live() 和ready() 之间的区别?

    两者之间的确切区别是什么live and ready 编辑 发现die http docs jquery com Events die是相反的live ready http docs jquery com Events ready让你注册一
  • 如何让无限滚动发挥作用?

    我正在尝试让这个无限加载脚本在我的项目中工作 这是我的 HTML div div div class pagina div div class pagina div div class pagina div div class pagina
  • 当元素具有多个类时如何在 switch 语句中检查 className

    在下面的示例中 我只想单击该选项以在警报中显示 我正在尝试使用 switch 语句来确定单击了哪个类 如果我的 div 不包含多个类 则我的示例将有效 我尝试使用classList contains在我的 switch 语句中无济于事 有没
  • 使用重复模式捕获正则表达式

    我试图捕获字符串的所有部分 但我似乎无法正确处理 该字符串具有以下结构 1 22 33 中间有运算符的数字 可以有任意数量的术语 我想要的是 1 22 33 1 22 33 但我得到 1 22 33 22 33 我尝试过各种正则表达式 这是
  • 谷歌地图绘制两点之间的路线

    我编写了这段无辜的 JavaScript 代码 它允许用户创建两个标记并绘制它们之间的路线 它不起作用 相反 它给出了一个奇怪的错误 Uncaught TypeError Cannot read property ya of undefin

随机推荐