ckeditor 禁用和工具栏隐藏

最新推荐文章于 2023-12-13 17:53:33 发布
最新推荐文章于 2023-12-13 17:53:33 发布
阅读量1w 收藏 1
点赞数
分类专栏： ckeditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013414461/article/details/18986159
版权

1.工具栏隐藏

CKEDITOR.replace('txtEditMsg', { toolbarCanCollapse: true, toolbarStartupExpanded: false, toolbar: [['Smiley']], height: '320px', width: '552px' });


2.禁用

<textarea id="txtEditMsg" rows="2" cols="10" disabled="disabled"></textarea>

把绑定的textarea设置disabled

写一辈子程序
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
asp.net CKEditor和CKFinder的应用
10-29
CKEditor和CKFinder在ASP.NET中的应用,需要的朋友可以参考下。
如何删除ckeditor的状态栏
weixin_30879169的博客
11-10 105
如何移除ckedior的状态栏上的元素路径显示和彻底移除状态栏？ 去ckeditor的官方文档库查找了一番，解决方案如下： 移除元素路径的方法（上图中状态栏显示的 body p）： 在config.js中配置以下参数 config.removePlugins = 'elementspath'; 这玩意实际上是个ckedior自带的插件 彻底移除状态栏的方法： 在config.js...
ckeditor5-v22 全工具版
08-30
ckeditor5-v22 为当前最新版本，全工具版 ，基本将免费的工具备齐了，源文件，可自行修改重新打包，node_modules 文件夹为包文件，该文件夹容量较大，在实际应用时可以删除，必须在网站模式使用，如：http://127.0.0.1/ckeditor5-build-classic/sample/，图片上传配置了ckfinder,请自行在网上下载放置在网站根目录，具文件夹名必须为ckfinder。该版本表格插件与微软的edge浏览器依然存在不兼容情况，360等浏览器应用ckeditor正常。
ckeditor插件工具
12-22
ckeditor插件工具，ckeditor插件工具，ckeditor插件工具，ckeditor插件工具，
ckeditor5-v30 全工具版.rar
01-07
ckeditor5-v30 全工具版 ，基本将免费的工具备齐了，源文件，可自行修改重新打包，node_modules 文件夹为包文件，该文件夹容量较大，在实际应用时可以删除，必须在网站模式使用，如：http://127.0.0.1/ckeditor5-build-classic/sample/，图片上传配置了ckfinder,请自行在网上下载放置在网站根目录，具文件夹名必须为ckfinder。该版本表格插件与微软的edge浏览器依然存在不兼容情况，360等浏览器应用ckeditor正常。
vue 中 ckeditor5 如何隐藏工具条
zstzah的专栏
05-10 1883
ck4有toolbarStartupExpanded参数可以直接配置，但是ck5中这个参数无效，到处找资料，解决不了。于是爬梯看了官方文档，发现这个参数在ck5中已经放弃。 很不爽，于是直接粗暴修改css来解决。 就是这个css 方法如下： <template> <div class="home"> <div :class="inEditor"> <ckeditor :editor="editor" v-model="edi
ckeditor动态显示隐藏工具栏指定的按钮
波波的博客
03-10 1207
客户说工具栏太复杂了，但是有时候又能用到，所以给了个需求，做一个按钮能实现显示或隐藏按钮 好吧，客户是上帝，开搞 思路：ckeditor添加一个自定义按钮，里面方法实现display：none样式隐藏，这样就可以不用再次加载ckeditor啦 1.首先 ckeditor添加自定义按钮要将文件放在这个ckeditor里的plugins这个文件夹里 先创建一个这样的结构 icons是存放按钮图标的地方，待会用到，plugin.js就是接下来主攻的内容了 /* *帅气的刘xx 2021.
js控制ckeditor自动隐藏工具栏
THE DOOR IS CHANGING
05-11 4237
CKEDITOR.replace( 'news.content',{toolbarStartupExpanded:false,toolbar :'Basic',height:150});
ckeditor 设置只读和取消只读
天下大师傅
08-13 7475
编辑页面有个需求点击编辑时能编辑，点击查看时只读不能编辑，其他input，textarea还好，设置disabled 或者 readonly就可以了。 但是ckeditor是富文本编辑器，普通的设置不会生效。还好官方提供了方法。 代码如下： var editor = CKEDITOR.instances["textContent"]; editor.setReadOnly(true...
ckeditor5-dev:CKEditor 5开发工具包
05-14
CKEditor 5开发工具包 配套 该存储库是一个monorepo。 它包含多个npm软件包。 包裹 版本 依存关系 @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-dev-webpack-plugin @ckeditor/jsdoc-plugins 克隆 克隆此存储库。 是否将yarn install在内部（此包装使用纱线工作区）。 您准备好出发了！ 测验 测试： yarn run test 在以下调试模式下进行测试： DEBUG=true yarn run test 测试单个程序包： ./node_modules/.bin/mocha packages/ckeditor5-dev-env/tests/ * --recursive 代码覆盖率： yarn run coverage 发行包裹 变更
ckeditor 工具栏配置
zh_fn的专栏
03-18 9979
toolbar的配置，有两个Full和Basic，默认是Full，可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下 注意工具按钮是分组的，一个name内的大括号就是一个工具按钮分组，items后边是具体的按钮，“/”表示工具栏换行，“-”表示工具图标之间的中隔线“|” config.toolbar = 'Full'; confi
禁用ckeditor的编辑功能
helloworld的博客
12-27 4560
项目中有一个需求需要在查看内容的时候禁用富文本的编辑功能，查询很多资料没有切实可行的方法，最后找到一种写法，有效果。原理是配置ckedtior属性为可读 代码如下，可供有需求的朋友参考 $(document).ready(function() {    CKEDITOR.config.readOnly = true; });
Ckeditor编辑器的配置使用
responsecool的专栏
01-21 2095
Ckeditor编辑器的配置使用
vue-quill-editor动态禁用 改变readOnly 值禁用不生效
小张的blog
10-06 816
当时试了好几种办法，一直思路是在公共组件上下功夫，以为是redOnly没有生效是写法问题，耽误了很长的时间，后来发现直接让组件强制刷新一下，就会更新出最新的状态，用到了Key,这个属性 ，在父组件中给组件添加一个key值与变量关联，这样readOnly改变组件就会刷新，具体如图。readOnly为false的时候，富文本出现光标可编辑。喵的，这么多坑，查了很多博客，很多关于vue 富文本的坑，大家可谓是坑坑不一样，没有找到和我一样的问题的 ，所以写下这篇博客帮助需要的小伙伴，少走弯路，么么哒。
vue-quill-editor 在vue2中禁用和启用
成长的博客
08-08 926
vue-quill-editor 在vue2中禁用和启用
ckeditor4 使用总结
猎人在吃肉
09-21 6562
ckeditor4 定制工具栏 增加字体 配置主题皮肤 配置 默认字体大小和样式 ckeditor4 中，config.js 配置文件不生效的解决方法 ckeditor4 窗口根据内容高度，动态变化 ckeditor4 内容没有同步到 textarea 中 ckeditor4 图片上传相关的配置 删除 图片上传时的高级配置 tab 项 指定图片上传地址 、清除预览区的文字 springboot2.x 实现后台保存图片 图片上传成功和失败时的返回格式 ckeditor4 只显示内容，工具栏不显示，隐藏
Bootstrap Blazor中的富文本编辑器（Editor）如何禁用？
最新发布
bdbox
12-13 576
我同时定义了onmouseover="disableSummernote()" onmousedown="disableSummernote()"两个。Bootstrap Blazor的富文本编辑器（Editor）没有直接提供disable功能，不能在“仅预览”富文本。Bootstrap Blazor是一套件balzor开源的控件（组件）库。不知道还有没有其它办法。
vue-quill-editor 富文本编辑器禁用/不可编辑
热门推荐
julying的博客
08-15 2万+
最近需要用vue做一个富文本编辑器，我选择了vue-quill-editor，可是需要实现禁用的效果，Quill-editor官方网站上虽然说明了如何禁用，但我没有找到用vue如何实现的方法，在网上也没有找到解决方法后，我自己实现了一下。 vue： &amp;lt;el-form-item label=&quot;描述：&quot; :label-width=&quot;formLabelWidth&quot;&amp;gt; ...
ckeditor5添加工具栏
11-22
以下是在CKEditor 5中添加工具栏的步骤： 1. 在CKEditor 5的构建器中选择所需的插件和工具栏按钮，然后下载构建器生成的zip文件。 2. 将zip文件解压缩到您的项目目录中。 3. 在您的HTML文件中引入CKEditor 5的构建器生成的JS文件和CSS文件。 4. 在您的HTML文件中创建一个textarea元素，并将其ID设置为“editor”。 5. 在您的JavaScript文件中，使用以下代码初始化CKEditor 5： ```javascript ClassicEditor .create( document.querySelector( '#editor' ), { toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ] } ) .then( editor => { console.log( editor ); } ) .catch( error => { console.error( error ); } ); ``` 6. 在上面的代码中，toolbar选项是一个数组，其中包含您想要在工具栏中显示的按钮。在这个例子中，我们添加了标题，粗体，斜体和链接按钮。 7. 运行您的应用程序并查看CKEditor 5中的工具栏。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值