TinyMCE 处于只读模式时启用按钮

2023-11-27

我有一个 TinyMCE 4.x 实例,其中文本应处于只读模式。但我仍然有一些想要启用的按钮。例如,一个按钮可以提供我选择的文本部分的字符计数。 但是当我打开 TinyMCE 的只读模式时,所有按钮都被禁用。我可以只启用我的按钮,同时仍保留只读模式吗?


对您来说可能已经太晚了,但其他人可能会经过这里。

我想出了这个函数

function enableTinyMceEditorPlugin(editorId, pluginName, commandName) {
    var htmlEditorDiv = document.getElementById(editorId).previousSibling;
    var editor = tinymce.get(editorId);
    var buttonDiv = htmlEditorDiv.querySelectorAll('.mce-i-' + pluginName.toLowerCase())[0].parentElement.parentElement;
    buttonDiv.className = buttonDiv.className.replace(' mce-disabled', '');
    buttonDiv.removeAttribute('aria-disabled');
    buttonDiv.firstChild.onclick = function () {
        editor.execCommand(commandName);
    };
}

它通过两个步骤完成了这个技巧:

  • 使按钮可点击(删除mce-disabledCSS 类并删除aria-disabled财产)
  • 将好的命令分配给单击事件

在我的编辑器中init事件我调用该函数。

editor.on('init', function () {
    if (readOnly) {
        editor.setMode('readonly');
        enableTinyMceEditorPlugin(htmlEditorId, 'preview', 'mcePreview');
        enableTinyMceEditorPlugin(htmlEditorId, 'code', 'mceCodeEditor');
    }
});

我为其编写此代码的 TinyMCE 当前版本是 4.4.3。它可能会在未来版本中出现问题,特别是关于获取和修改良好 HTML 元素的选择器。

命令标识符可以在以下位置找到这一页否则你也可以在下面找到它们tinymce\plugins\PluginName\plugin(.min).js

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

TinyMCE 处于只读模式时启用按钮 的相关文章

  • dojo dijit.form.DateTextBox 约束不起作用,datetextbox

    嗨 我是 javascript 和 dojo 的新手 我正在尝试使用两个带有下拉日历的 dijit DateTextBox 来建立数据库查询的日期范围 一旦选择了开始日期或结束日期 我想限制可用的日期 以便不可能选择按时间顺序排列在开始日期
  • 将 OoXml 插入单词抛出错误:未知

    我一直在尝试通过office js将OOXML插入到word文档的正文内容中insertOoXML 方法 我什至尝试过最简单的实现 认为我在尝试替换 XML 本身中的 fieldCodes 时做了一些不正确的事情 所有结果都是这样Error
  • 在 Vue.js 中从父组件执行子方法

    目前 我有一个 Vue js 组件 其中包含其他组件的列表 我知道使用 vue 的常见方式是将数据传递给孩子 并从孩子向父母发出事件 但是 在这种情况下 我想在子组件中的按钮出现时执行子组件中的方法 parent被点击 哪种方法最好 一种建
  • 如何重定向到 instagram://user?username={username}

    我的 html 页面上有这个链接 可以在特定用户上打开 Instagram 应用程序 a href Link to Instagram Profile a 我一直在寻找自动运行 url instagram user username USE
  • 我想检查 $('#td1').text() === "x" 是否?

    我想检查innerHtml是否有X或O 所以我不能再次添加任何其他东西 但它不起作用 添加检查代码后它就停止了 我在这里尝试做一个简单的XO游戏来更熟悉javascript和jquery 我也不确定是否可以用 jQuery 做到这一点
  • 使用 JavaScript 使链接保持活动状态并在单击时显示悬停效果

    I am struggling to make this work I d like to make it where if O F is clicked the hover state stays active if another li
  • 为什么是 javascript:history.go(-1);无法在移动设备上工作?

    首先 一些背景 我有一个向用户呈现搜索页面 html 表单 的应用程序 填写标准并单击 搜索 按钮后 结果将显示在标准部分下方 在结果列表中 您可以通过单击将您带到新页面的链接来查看单个结果的详细信息 在详细信息页面中 我添加了一个 返回结
  • Meteor - 从客户端取消服务器方法

    我正在通过服务器方法执行数据库计数 用户可以选择他们希望如何执行计数 然后调用该方法 我的问题是 计数可能需要一些时间 并且用户可能会在方法运行时改变主意并请求不同的计数 有什么方法可以取消调用的方法并运行新的计数吗 我认为 this un
  • 将div设置为隐藏,延时后可见

    我试图在 X 时间后 也许甚至在随机时间之后 但现在我们只做固定时间 在黑色背景上出现一个黄色方块 function initialSetup if document getElementById yellow null document
  • 表单计算器脚本基本价格未加载 OnLoad

    我的表单中有一个计算器来计算我的下拉选项选择 function select calculate on change calc input type checkbox calculate on click calc function cal
  • Angular 2+ 安全性;保护服务器上的延迟加载模块

    我有一个 Angular 2 应用程序 用户可以在其中输入个人数据 该数据在应用程序的另一部分进行分析 该部分仅适用于具有特定权限的人员 问题是我们不想让未经授权的人知道how我们正在分析这些数据 因此 如果他们能够在应用程序中查看模板 那
  • 为什么在 Internet Explorer 中访问 localStorage 对象会引发错误?

    我正在解决一个客户端问题 Modernizr 意外地没有检测到对localStorageInternet Explorer 9 中的对象 我的页面正确使用 HTML 5 文档类型 并且开发人员工具报告该页面具有 IE9 的浏览器模式和 IE
  • FireFox 中的自动滚动

    我的应用程序是实时聊天 我有一个 Div 来包装消息 每条消息都是一个 div 所以 在几条消息之后 我的 DOM 看起来像这样 div div Message number two div div div div
  • 在 vue.js 中访问数组对象属性

    给定以下数组vue js packageMaps Object packageMap 0 Object Id 16 PackageType flag list ProductCode F BannerBase packageMap 1 Ob
  • 如何更改此 jquery 插件的时区/时间戳?

    我正在使用这个名为 timeago 的插件 在这里找到 timeago yarp com 它工作得很好 只是它在似乎不同的时区运行 我住在美国东部 费城时区 当我将准确的 EST 时间放入 timeago 插件时 比如 2011 05 28
  • 为什么 jquery 没有检测到单选按钮未被选中的情况? [复制]

    这个问题在这里已经有答案了 可能的重复 JQuery radioButton change 在取消选择期间不会触发 https stackoverflow com questions 5176803 jquery radiobutton c
  • 将 MQTTNet 服务器与 MQTT.js 客户端结合使用

    我已经启动了一个 MQTT 服务器 就像this https github com chkr1011 MQTTnet tree master例子 该代码托管在 ASP Net Core 2 0 应用程序中 但我尝试过控制台应用程序 但没有成
  • 如何获取浏览器视口中当前显示的内容

    如何获取当前正在显示长文档的哪一部分的指示 例如 如果我的 html 包含 1 000 行 1 2 3 9991000 并且用户位于显示第 500 行的中间附近 那么我想得到 500 n501 n502 或类似的内容 显然 大多数场景都会比
  • 导致回发到与弹出窗口不同的页面

    我有一个主页和一个详细信息页面 详细信息页面是从主页调用的 JavaScript 弹出窗口 当单击详细信息页面上的 保存 按钮时 我希望主页 刷新 是否有一种方法可以调用主页的回发 同时还可以从详细信息页面维护保存回发 Edit 使用win
  • fullCalendar 未显示正确的结束日期

    我正在看调试页面 http jsbin com wukofacaxu edit js outputFullCalendar 官方网站的 我想安排一个活动时间为 22 09 2015 至 30 09 2015 dd mm yyyy 但它只显示

随机推荐

  • Ruby 中的有限矩阵

    怎么来的Matrix类没有方法来编辑其向量和组件吗 似乎矩阵内的所有内容都可以读取但不能写入 我错了吗 有没有第三方优雅的Matrix 类似的类允许我删除行并有意编辑它们 如果没有这样的课程 请通知我 我将停止搜索 班级设计师Matrix一
  • 在将用户输入的 PHP 代码传递给 eval() 之前验证它

    在将字符串传递给 eval 之前 我想确保语法正确并允许 两个函数 a 和 b 四个运算符 括号 数字 1 2 1 1 我该如何做到这一点 也许它与 PHP Tokenizer 有关 我实际上正在尝试制作一个简单的公式解释器 因此 a 和
  • 瓦提尔。滚动到页面的某一点

    我正在尝试在网站上自动进行在线调查 但每次都会收到此错误 Selenium WebDriver Error UnknownError unknown error Element is not clickable at point 561 8
  • 如何使用maven部署带有依赖jar的Applet并对其进行签名?

    有人可以告诉我 pom 文件应该是什么样子来创建一个带有小程序的 jar 文件 该文件依赖于其他一些 jar 是否可以将一个 jar 作为小程序 以及如何对其进行签名 如果你想要你的课程and出现在的依赖项一个 jar 文件 你应该使用组装
  • Chrome 开发工具设置中没有“覆盖”页面

    如何在我的设置中启用覆盖面板 我打开 Chrome 浏览器 它就消失了 我浪费了大部分时间试图让它工作 但谷歌上有 0 个答案 谢谢 Chrome 让我的设置消失 酷 仿真 面板是新的 覆盖 面板
  • Gmail 上下文小工具

    我想问题一是 现在是否真的可以为 gmail 创建一个上下文小工具 在过去的两天里 我仔细阅读了 非常过时的 文档 以及我能找到的关于该主题的每个论坛帖子 我已经尝试了所有方法 但什么也没看到 甚至没有任何可能为我指明正确方向的错误消息提示
  • 绑定变量和替换变量(我使用 && 输入)之间有什么区别?

    这两个变量声明有什么区别 1 num number num 2 variable num1 number 因为在这两种情况下我都可以参考num通过使用 num or num在其他文件中也 对于绑定变量 num1 此外 我还有一个困惑 以下任
  • C# 数组从一行中拆分获取最后一项

    我知道这可以获取数组的第一项 string aString hello all this is a test string firstItemOfSplit aString Split new char 0 firstItemOfSplit
  • 如何使用 JPA 设置 Eclipselink?

    The Eclipselink 文档说我需要在 pom xml 中包含以下条目才能使用 Maven 获取它
  • 将带有多个分隔符的文本导入 pandas

    我有一些数据看起来像这样 c stuff c more header c begin data 1 1 5 1 2 6 5 1 3 5 3 我想将其导入到 3 列数据框中 其中列例如 a b c 1 1 0 5 etc 我一直在尝试将数据读
  • 私有函数 didFinishLaunchingWithOptions 没有被调用? (斯威夫特 3)

    Isn t didFinishLaunchingWithOptions应该在应用程序第一次开始运行时调用 我在此方法中设置了一个断点 当我在模拟器中运行应用程序时 断点不会被命中 这意味着该方法不会被调用 每当应用程序启动时 我都会尝试从
  • 在 MongoDB 中缓存重复查询结果

    我将构建一个旨在被大量 查看 的页面 但很少有用户会 写入 数据库 例如 只有百分之一的用户可能会在我的网站上发布他的新闻 其余的只会阅读新闻 在上面的例子中 当他们访问我的主页时会执行100个SAME QUERIES 而实际的数据库变化很
  • 有什么方法可以区分主线程和它生成的任何线程吗?

    我知道getName 主线程上的函数将返回字符串main 但这可以改变setName 有没有办法始终确定应用程序的主线程 一种可能性是致电Thread currentThread 开始时main 并保留参考
  • 为什么需要将项目合规性更改为 1.5?

    我在eclipse上用maven2创建了一个项目 添加 hibernate annotations 依赖项后 我尝试使用 hibernate 注释 Entity Table 创建一个类 但它给了我这个错误 将项目合规性和 JRE 更改为 1
  • Java 替换文本文件中的行

    我从另一个问题中找到了这段代码 private void updateLine String toUpdate String updated throws IOException BufferedReader file new Buffer
  • 基于Mysql json的趋势标签实现

    我正在尝试使用 mysql json 功能来识别时间序列上的趋势标签 基于最大点击量 下面是我的桌子 CREATE TABLE TAG COUNTER account varchar 36 NOT NULL time id INT NOT
  • 9 块图像作为背景的问题

    我有一个列表视图结构 具有使用的相对布局 奇数 偶数元素交替背景图像 我正在尝试设置 通过计算位置动态绘制背景 它 与普通位图一起工作得很好 但是当我尝试使用 ninepatch 图像它破坏了用户界面 所有元素都扭曲了 什么 我做错了吗 这
  • 帮助了解像素化算法背后的理论吗?

    假设我有一张想要 像素化 的图像 我想要这个由 100 x 100 方格网格表示的清晰图像 因此 如果原始照片为 500 px X 500 px 则每个正方形为 5 px X 5 px 因此 每个正方形都有一个与它交换的 5 px X 5
  • Angular ReactiveForms:生成复选框值数组?

    给定绑定到相同复选框的列表formControlName 如何生成绑定到的复选框值数组formControl 而不是简单地true false Example
  • TinyMCE 处于只读模式时启用按钮

    我有一个 TinyMCE 4 x 实例 其中文本应处于只读模式 但我仍然有一些想要启用的按钮 例如 一个按钮可以提供我选择的文本部分的字符计数 但是当我打开 TinyMCE 的只读模式时 所有按钮都被禁用 我可以只启用我的按钮 同时仍保留只