ckeditor动态显示隐藏工具栏指定的按钮

客户说工具栏太复杂了,但是有时候又能用到,所以给了个需求,做一个按钮能实现显示或隐藏按钮

好吧,客户是上帝,开搞

思路:ckeditor添加一个自定义按钮,里面方法实现display:none样式隐藏,这样就可以不用再次加载ckeditor啦

1.首先

ckeditor添加自定义按钮要将文件放在这个ckeditor里的plugins这个文件夹里

先创建一个这样的结构

icons是存放按钮图标的地方,待会用到,plugin.js就是接下来主攻的内容了

/**帅气的刘xx 2021.3.10*/
(function () {CKEDITOR.plugins.add('swap', {icons: 'swap',init: function (editor) {// 创建指令editor.addCommand('swap',CKEDITOR.plugins.swapButton.commands.swapButton);// 插件按钮editor.ui.addButton('swap', {label: '切换按钮',command: 'swap',icon: this.path + 'icons/swap.png',toolbar: 'document'});}});var swap = true;CKEDITOR.plugins.swapButton = {commands: {swapButton: {exec: function (editor) {testFunction(editor);}}}};
//demo演示,根据实际修改function testFunction(editor){if(swap){var toolbars = editor.toolbox.toolbars;console.log(toolbars);var testId = toolbars[1].id;document.getElementById(testId).style.display = "none";swap = false;}else{var toolbars = editor.toolbox.toolbars;console.log(toolbars);var testId = toolbars[1].id;document.getElementById(testId).style.display = "inline-block";swap = true;}	 }})();

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/255948.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

金蝶服务器如何显示在任务栏,报表窗口看不见工具栏界面怎么办?

有的用户在打开金蝶KIS记账王会计报表后,竟然发现看不到保存、预览、打印等工具栏界面,这些工具与应用账簿报表数据息息相关,没有这些工具的话将大大想想使用效率。但是请放心,工具栏界面消失不是无法解决的棘手问题,下…

Linux(Ubuntu)菜单栏(工具栏)隐藏了,怎么显示出来

最近有捡起了LInux,换了新版本,有好多设置有点儿生疏 在使用的过程中,对一些比较典型的问题或者方法,进行一个总结,方便后面查看,也给各位道友一个参考。 其实这个问题也比较尴尬,如下图&…

计算机桌面工具栏,win7电脑计算机界面菜单工具栏不见了怎么办?

因为在咱们的windows系统中,具有很多的工具栏配置,咱们很多界面的窗口上方都有这样的一个工具栏,大家不妨随意的在自己的win7电脑中找到一个文件夹,之后咱们双击打开,在打开的文件夹窗口上方,咱们就可以看到…

word2007工具栏隐藏了怎样能一直显示?

1、首先在电脑中打开word文档,可以发现“功能区”被自动隐藏了,如下图所示。 2、这时需要点击左上角的开始选项卡,如下图所示。 3、然后在打开的开始菜单中,A下方的横杠,选择单击取消勾选“折叠功能区”。 4、这样“功…

easyUI dataGrid 隐藏分页工具栏 隐藏表头

一.方法1(不推荐) 适应以下需求: 1.当表格没有数据时,把datagrid隐藏;有数据的时候显示 2.表格不分页,无需显示分页栏 3.datagrid的高度由内容撑开(固定高度,无数据时显示空白也可&#xff…

PowerDesigner工具栏消失恢复

PowerDesigner一键导入数据库所有表并画数据模型图 五分钟学会PowerDesigner创建概念数据模型 PowerDesigner设计的pdm模型导出超清图片 PowerDesigner工具栏消失恢复 目录 一、工具栏 二、点击工具-自定义菜单和工具栏 三、选择Palette即可 一、工具栏 不小心点到工具栏右上角…

html隐藏safari地址栏,怎么隐藏 iOS Safari 打开网页时的地址栏和工具栏探索

先来看一张截图 红色框处就是用手机浏览器打开页面时,自动显示出来的头部地址栏和底部工具栏 如果现在有一个需求,用手机浏览器打开页面时,把地址栏和工具栏隐藏,该怎么办呢? 起初我在度娘找到了好几篇博客都推荐如下方法 注:但使用该方法没有效果(可能该属性只针对 iOS …

excel工具栏隐藏了怎么办_excel隐藏的5个超级技巧,只有少数老师知道,你知道是哪几个吗?...

对于办公人员来说,excel的制作一定是少不了的,但大多数的人都只知道一些皮毛,很难深入的“吃透”excel,今天和大家聊聊这几个excel中隐藏的超级技巧,大多数人都不知道,但却超级实用,和易查分一起来看看吧! 隐藏网格线 对于excel来说,大多数人的印象里,这个工具只适用于表格的制…

excel工具栏隐藏了怎么办_?Excel菜单栏中工具栏突然不见了,怎么办?

Excel菜单栏中工具栏突然不见了,怎么办? 问题现象如下图所示: 只有基本的文件,开如,插入,页面布局,公式,数据...等等。 没有工具栏。 点开始菜单,工具栏出现了。但是点文档编辑,工具栏又没了。是不是很生气呢?我什么也没操作呀。怎么样呢?那叫一个生气。到哥让你不…

excel工具栏隐藏了怎么办_excel中,原来除了单元格,其他地方都可以隐藏

在excel中,我们有时候会为了扩大编辑区域的视野或者美观,想要隐藏一些功能。本文就为大家介绍一下各部分的区域的显示和隐藏的操作方法。 下图是excel中可以选择隐藏或者显示的部分。 图一 ​ 一、显示/隐藏功能区。点击右上角向上的箭头,会有自动隐藏功能区、显示选项卡、显…

一图看懂 tqdm 模块:一个可在循环和命令行中使用的快速、可扩展的进度条,资料整理+笔记(大全)

本文由 大侠(AhcaoZhu)原创,转载请声明。 链接: https://blog.csdn.net/Ahcao2008 一图看懂 tqdm 模块:一个可在循环和命令行中使用的快速、可扩展的进度条,资料整理笔记(大全) 🧊摘要🧊模块图&…

相对活力指数指标(RVI)指标模拟量化交易(第二版)

经过一段时间的测试,在第一版代码的基础上做了不少修改 第一版代码: 相对活力指数指标(RVI)指标ETH模拟量化交易https://mp.csdn.net/mp_blog/creation/editor/120299311https://mp.csdn.net/mp_blog/creation/editor/120299311 …

RabbitMq学习笔记

RabbitMq学习笔记 1.消息队列1.1 MQ相关概念1.1.1 什么是MQ?1.1.2 为什么要用MQ?1.2.3 MQ的分类1.2.4 MQ的选择1.2.5 为什么选择RabbitMQ? 1.2.5 MQ对比分析图在这里插入图片描述1.2 RabbitMQ1.2.1. RabbitMQ 的概念1.2.2. 四大核心概念1.2.3…

rabbitMQ-学习笔记

RabbitMQ 一、MQ的相关概念1.1 什么是MQ1.2 为什么要用MQ1.3 MQ的分类1.3.1 ActiveMQ1.3.2 Kafka1.3.3 RocketMQ1.3.4 RabbitMQ 二、RabbitMQ2.1 RabbitMQ的概念2.2 四大核心概念2.3 RabbitMQ核心部分2.4 RabbitMQ工作原理安装java环境2.5 Hello World生产者代码消费者代码 2.6…

Rabbitmq学习笔记教程-尚硅谷

Rabbitmq学习笔记 (尚硅谷) 尚硅谷 rabbitmq 教程 1.MQ 的概念 1.1 什么是 MQ? 存放消息的队列,互联网架构中常见的一种服务与服务之间通信的方式。 1.2 为什么要用 MQ? 三大好处,削峰,解耦,异步。…

RabbitMQ入门指南:初学者也能读懂的教程

文章目录 1、消息队列1.1、MQ的相关概念1.1.1、什么是MQ1.1.2、为什么要使用MQ流量削峰应用解耦异步处理 1.1.3、MQ的分类ActiveMQKafKaRocketMQRabbitMQ 1.1.4、MQ的选择 1.2、RabbitMQ1.2.1、RabbitMQ 的概念1.2.2、四大核心概念1.2.3、RabbitMQ核心部分1.2.4、各个名词介绍1…

整理面试题

一、基础篇 Java 基础 1.面向对象的特征 可以说是三大特征,也可以说是四大特征 ①第一个是抽象:就是把有共同特征的一类事物,构造成类,只关注它的属性和行为,而不关注这些行为的细节 ②第二个是封装:就…

Rabbitmq笔记

rabbitmq概述 定义:RabbitMQ 即一个消息队列,主要是用来实现应用程序的异步和解耦,同时也能起到消息缓冲,消息分发的作用。 作用: 流量消峰应用解耦异步处理(不同服务之间的响应时间不同,导致…

java mysql数据库回退_数据库事务及Java中的处理

事 务是指一组相互依赖的操作行为,举一个举得不能再被举的例子就是银行交易,当然还有其他像网上购物,电子货币交易等等,事务的成功取决于这些相互依赖的操 作行为是否都能执行成功,只要有一个操作行为失败,…

JPA 2.0 中的动态类型安全查询(如何通过 Criteria API 构建动态查询并减少运行时失败)...

简介: 如果编译器能够对查询执行语法正确性检查,那么对于 Java 对象而言该查询就是类型安全的。Java™Persistence API (JPA) 的 2.0 版本引入了 Criteria API,这个 API 首次将类型安全查询引入到 Java 应用程序中,并为在运行时动…