仅在有效文本选择的情况下启用 CKEditor 工具栏按钮?

2023-12-14

我正在开发一个 CKEditor 插件,用于注释文本和添加边距注释,但我希望仅当用户已经选择了一系列文本时才启用一些自定义工具栏按钮。每当用户打字或光标位于单个点(而不是范围)时,按钮(及其关联的命令)都应该被禁用。

我是一位经验丰富的插件作者,我花了相当多的时间寻找核心API文档,但我还没有找到任何看起来有帮助的东西。


你的情况有点棘手,因为选择更改事件没有很好地跨浏览器实现,FF是主要问题。

在您的情况下,您将需要非常频繁地检查选择更改,因为您对所有选择更改感兴趣,因此 CKEditorselectionChange不适合它。

幸运的是有一个selectionCheck编辑器中的事件触发频率更高,并且是为 FF 实现的。

解决方案:

在这里你有init我模拟了一个插件的方法来解决你的问题。它将禁用/启用Source按照你解释的方式按钮。

我已经在这个功能中添加了节流功能,这样机器较小的客户就可以欣赏你的功能了:)

init: function( editor ) {
    // Funciton depending on editor selection (taken from the scope) will set the state of our command.
    function RefreshState() {
        var editable = editor.editable(),
            // Command that we want to control.
            command = editor.getCommand( 'source' ),
            range,
            commandState;

        if ( !editable ) {
            // It might be a case that editable is not yet ready.
            return;
        }

        // We assume only one range.
        range = editable.getDocument().getSelection().getRanges()[ 0 ];

        // The state we're about to set for the command.
        commandState = ( range && !range.collapsed ) ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED;

        command.setState( commandState );
    }

    // We'll use throttled function calls, because this event can be fired very, very frequently.
    var throttledFunction = CKEDITOR.tools.eventsBuffer( 250, RefreshState );

    // Now this is the event that detects all the selection changes.
    editor.on( 'selectionCheck', throttledFunction.input );

    // You'll most likely also want to execute this function as soon as editor is ready.
    editor.on( 'instanceReady', function( evt ) {
        // Also do state refresh on instanceReady.
        RefreshState();
    } );
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

仅在有效文本选择的情况下启用 CKEditor 工具栏按钮? 的相关文章

  • 按类调用CKEditor

    我需要自动调用 CKEditor 的多个实例 实际上我使用该函数 CKEDITOR replace editor1 其中 editor1 是我想要显示我的 CKEditor 的 div 的 id 名称 我使用 jQuery 来自动化这个过程
  • 如何使内联ckeditor工具栏固定在顶部而不是浮动

    我在我的页面中使用内联 CKEditor 我想将其固定在 contenteditable div 的顶部 目前 每当我滚动页面时它就会浮动 如何让工具栏位置固定在顶部 结合使用内联编辑器和共享空间 http ckeditor com add
  • CK编辑器。打开具有默认值的图像属性窗口

    我一直在查看 API 但不知道如何使用默认 url 打开图像对话框 我用execCommand函数 如下 var editor CKEDITOR instances editor1 editor execCommand image 这很好用
  • CKEditor - 单击上下文菜单后获取元素

    我使用此代码添加了 ckeditor 中 img 上下文菜单的链接CKEditor 将上下文菜单项添加到图像 https stackoverflow com questions 37553405 ckeditor add context m
  • ckeditor 不读取媒体嵌入代码

    我使用 ckeditor 的媒体嵌入插件 它工作正常 代码正确保存在数据库和 youtube soundcloud 等中 页面上播放器显示正常 但是 当用户进入他可以编辑信息的管理页面时 内部和带有标签的文本不会显示 因此当用户单击 保存
  • 如何在CKeditor中添加音频标签

    我已经添加了html5audio插件并能够获取上传按钮 但如何将上传的文件发送到服务器 这是我的插件代码 id Upload hidden false filebrowser uploadButton label editor lang h
  • 使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

    我在将插件安装到集成到 Laravel 5 6 的 CKEditor 时遇到了一个小问题 根据 CKEditor 文档的集成指南 我能够添加 ckeditor ckeditor5 build classic https www npmjs
  • CKEDITOR:如何转换所有 html 实体

    这是清单 http www elizabethcastro com html extras entities html http www elizabethcastro com html extras entities html我要么想启用
  • 如何配置 ckeditor 不将内容换行到

    块中?

    我在用ckeditor http ckeditor com 在我的网站上 让用户更容易输入 HTML 但是 我从 ckeditor 返回的数据包含在 p p 块 这是我不想要的 是否有一些配置设置强制编辑器不将文本换行 将以下内容添加到您的
  • 从 JQuery 中的 CK 编辑器文本区域获取文本

    我在应用程序中使用 CK Editor
  • CKEditor 安全最佳实践

    我在用http ckeditor com http ckeditor com 在我建立的一个小型 PHP MySQL 论坛中 我的问题 将用户创建的 HTML 像这样保存在数据库中然后在我的应用程序中重新显示它是否安全 我应该采取哪些预防措
  • CKEditor 新实例始终卸载

    我在 Angular 应用程序中使用 CKEditor 并且有一个视图 每次用户访问新模型时都会重新加载我的 CKEditor 实例 我使用以下 JS 来初始化编辑器 var initEditor function js editor wr
  • 重置表单重置按钮上的 ckeditor 值

    我的表单上有一个表单重置按钮 a href class btn Reset a 这将重置表单上除 ckeditor 之外的所有控件 并且我希望能够重置表单上 ckeditor 的值 ckeditor 的关联文本区域被重置 那么我该如何将 c
  • iframe 中元素的 CKEditor 内联编辑器

    在应用程序中 我在 iframe 中有内容可编辑元素 并且希望将内联 CKEditor 应用于这些元素 它可以工作 除非我滚动 iframe 时 CKEditor 工具栏不会随之滚动 是否有特殊标志或某种方法可以让工具栏随 iframe 内
  • 当 br 位于允许的内容中时,ckeditor 会删除

    当我将 br 添加到 ckeditor 允许的内容并添加 br 标签正在被更改为 br 但是当我添加 br 它正在被删除 为什么当 br 属于允许的内容时它会被删除 有什么建议么 您的帖子中缺少一些内容 不知道为什么 也不知道您想说什么 如
  • 防止 CKEditor 添加“data-cke-saved”并转换 <

    我有 CKEditor 的 jQuery 实现 我们经常使用对话框将 HTML 标记添加到 A 标记的 标题 属性 然而 当我们这样做时 它会转换 HTML 代码 以便将其解析为文本 我们需要代码保持其输入时的确切形式 而不是在任何地方放置
  • CKEditor TypeError:c[a] 在 CodeIgniter 中未定义

    我正在尝试在基于 codeigniter 的网站中安装 CKEditor 并且我已按照本教程进行操作 Codeigniter 教程中的 CKEditor http nukium com developpement php framework
  • ckeditor 字体样式 13 px

    我之前曾问过相关问题 但在尝试了所有发生错误的可能性之后 我发现 在ckeditor中 如果您复制一些文本并粘贴它 它默认粘贴为 p style font size 13px 示例图片 HTML CODE p div p Original
  • 获取 CKEditor 内容? - jQuery

    我的 CKEditor 代码是 window onload function var editor CKEDITOR replace big info CKEDITOR config height 330px CKEDITOR config
  • 如何在 Angular JS 应用程序中使用 ckeditor? [复制]

    这个问题在这里已经有答案了 我是 angularJS 新手 我需要在我的应用程序中使用 ckeditor 作为文本区域 在我在 Angular 应用程序上尝试之前 我已经完成了一个 仅 html 网页 我已经生成了我的 ckeditor 包

随机推荐

  • Swift 中集合视图的横向方向

    我的集合视图单元格遇到横向问题 当应用程序处于纵向时 它为我提供每行正确的单元格数量 即 2 但是当我将应用程序旋转到横向时 它每行显示 1 个单元格 这是我得到的屏幕 Portrait Landscape 这是我添加单元格大小的代码 fu
  • 启动程序时出现“找不到主方法”错误? [复制]

    这个问题在这里已经有答案了 我正在为我的课程学习 Java 但我遇到了障碍 我的任务是开发一个简单的命令行程序 为了让事情变得更容易 我提供了以下示例代码进行修改 这样我就不必从头开始 package assignment public c
  • 如果服务器文件夹中存在文件,如何执行 SQL Server 代理作业?

    我需要每天导入一个平面文件 该文件每天都会更改名称 文件处理后 需要将其移动到另一个文件夹 我注意到我可以在 SQL Server 代理中安排作业 并且可以告诉它每小时左右运行一次 并且我可以向其中添加 CMD 命令 我找到的解决方案是运行
  • 如何在Python查询中按名称获取字段?

    我在Python脚本中使用Mysql连接 如何按名称从表中获取结果 cursor conn cursor cursor execute SELECT FROM local 现在我通过索引来做到这一点 results cursor fetch
  • 使用 VBA 合并 Excel 工作表

    我有一个 Excel 工作表 例如 OG xls 其中已有一些数据 其中有大约 5000 行 标题位于第一行 最多为 AN 列 这个行数 5000 全年都不会改变 现在我有 5 个 XL 文件 比如 A B C D E 这些文件中的数据每次
  • 使用批处理根据分辨率重命名我的视频文件

    我想根据视频文件的分辨率重命名它们 例如 对于 1080p 的视频 bla bla mp4 我想将其重命名为 bla bla H 264 1080p 该脚本应该能够自动检测视频的分辨率 而且如果文件已经被重命名 则不应重命名它 我无法找到检
  • 使用 iPhone 在 UIView 中嵌入视频

    我想编写一个在视图中下载 或流式传输 视频 根据需要编码 的应用程序 我不想使用 SDK 中的 MPVideoPlayer 因为它会全屏打开视频 我想在视频上放置另一个 UIView 透明 以便我的用户可以在视频上进行注释 任何人有任何想法
  • 限制 App Engine 对自定义域中的 G Suite 帐户的访问

    不久前 Google Apps 现在称为 G Suite 域的 App Engine 相关设置已移至 Google Cloud Console 截至目前 限制关联 G Suite 用户访问 App Engine 实例的记录方法是通过此 Go
  • 在 Jquery 中选择元素之前的同级?

    DOM 看起来像这样 div A div div B div div C div div D div div E div div F div div G div 现在我可以选择 div D div using div selected 那么
  • setInterval at 1ms 似乎实际上不是 1ms

    我正在尝试使用 HTTPRequest 来计算下载文件所需的时间 如下所示 function getFile use strict var url data bin var rawFile new XMLHttpRequest var ti
  • Openssl 和 PHP

    我正在尝试使用 PHP 加载 openssl cli 工具生成的私钥 我使用了以下命令和 PHP 代码 openssl genrsa des3 4096 out private key if key openssl pkey get pri
  • 来自纬度经度位置的国家/地区代码(不使用地理编码服务)

    如何从纬度经度位置获取国家 地区代码 我知道有许多地理编码服务可用 但它们不能满足我的要求 因为我的应用程序在上线几个小时后就被阻止 许多地理编码请求 大多数地理编码服务还提供商业服务 但它们还不是一种选择 因为该项目还处于起步阶段 我做了
  • 拆分函数添加: \xef\xbb\xbf...\n 到我的列表

    我想打开我的file txt并从此文件中分割所有数据 这是我的file txt some data1 some data2 some data3 some data4 some data5 这是我的 python 代码 gt gt gt f
  • 如何在codeigniter中将时间戳转换为日期

    我想转换1373892900000 to Monday 2013 07 15 8 55 AM在代码点火器中 但是 通过使用我编写的函数转换时间戳 我不断收到完全不同的结果 请注意 我需要根据不同的时区更改日期 这就是为什么我想这样写 pub
  • jqGrid loadonce 不适用于 asp.net

    有谁知道如何用 asp net asmx jqGrid 排序解决这个讨厌的问题 因为 为了从 jqGrid 调用 pagemethods 或 asmx Web 服务 需要像这样进行攻击 datatype function ajax url
  • 如何通过 Javascript 设置循环 iMacros?

    1 我无法通过javascript添加设置循环imacros 我该如何添加它 var macro macro CODE macro VERSION BUILD 8011895 n macro TAB T 1 n macro SET ERRO
  • Android - 获取对 Manifest 中定义的 BroadcastReceiver 的引用

    有什么方法可以从代码中获取 Manifest xml 中定义的 BroadcastReceiver 的引用吗 就我而言 我们使用的 BroadcastReceiver 需要包含在 Manifest xml 中 然而 它具有我想在我们的代码中
  • 使用 typeahead 和 Bloodhound 单击时显示完整的建议列表

    我将 Typeahead js 与 Bloodhound 建议引擎一起使用 并希望用户在搜索框中单击后立即显示该列表 我发现了这个 stackoverflow 问题 Twitter TypeAhead 以编程方式显示所有结果 这与我相同 答
  • 与具有依赖关系的动态库链接

    考虑以下场景 共享库 libA so 没有依赖项 共享库 libB so 以 libA so 作为其依赖项 我想编译一个与 libB 链接的二进制文件 我应该仅将二进制文件与 libB 链接还是与 libA 链接 有没有办法只链接直接依赖项
  • 仅在有效文本选择的情况下启用 CKEditor 工具栏按钮?

    我正在开发一个 CKEditor 插件 用于注释文本和添加边距注释 但我希望仅当用户已经选择了一系列文本时才启用一些自定义工具栏按钮 每当用户打字或光标位于单个点 而不是范围 时 按钮 及其关联的命令 都应该被禁用 我是一位经验丰富的插件作