您现在的位置是:首页 > cms教程 > dedecms教程dedecms教程
dedecms织梦ckeditor编辑器添加自定义按钮实现编辑器自定义样式
宁儒熙2023-09-28 11:50:13dedecms教程已有37人查阅
导读大家在使用织梦网站建设系统时,在对内容页面的body正文部分进行编辑的时候,前台正文部分有的时候需要一个自定义样式,比如对特定的代码加个边框,让用户更容易区别及识别
大家在使用织梦网站建设系统时,在对内容页面的body正文部分进行编辑的时候,前台正文部分有的时候需要一个自定义样式,比如对特定的代码加个边框,让用户更容易区别及识别......但ckeditor并没有自定义样式涉及。而且织梦到了5.7版本之后编辑器不再是之前fck编辑器,而是升级成了ckeditor编辑器。
如果你认为没有必要那也可以直接在模板中写一个样式,调用一个自定义字段来实现,但这个方法,在文章不需要这个字段属性的时候,在前台页面一样会有这样一个样式存在,造成代码繁冗,不利于优化。而自定义按钮,在编辑时,我们使用的话,就会出现,而不使用,则在前台页面并无任何样式或代码,所以自定义按钮添加自定义属性是一个完美的方法。
Ckeditor添加自定义按钮,实现自定义属性流程
1、首先打开网站根目录,请在自己空间或服务器上找到/include/ckeditor;
2、打开ckeditor文件夹下的ckeditor.js文件,查找代码: 在其后添加代码: 注:这里的Custom为自定义,但必须第一个首字母大写,后面全为小写。
3、继续在ckeditor.js中查找 在其后添加代码: 4、继续在ckeditor.js中查找i.toolbar_Basic= 可以看到其后面有[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];这里是编辑器的最基础编辑按钮,在'Bold',后添加’Custom’,
添加完成后代码为: 5、继续查找代码:{name:'basicstyles',items:['Bold',在后面同样加上’Custom’,
添加完成后代码为: 6、打开http://www.ebingou.cn/include/ckeditor/ckeditor.inc.php
注:这里为本站目录,相对目录为/include/ckeditor/ckeditor.inc.php
这里我们以软件栏目的编辑器来讲,其他同理,软件栏目编辑器引用的按钮数组为small,这个可以在dede/templets/soft_add.htm中查询到:
修改ckeditor.inc.php中$toolbar['Small'] = 其后面的内容
在array( 'Bold','Italic','Underline','Strike','-'),中添加’Custom’,
7、这时候基本修改完成,清理cookies和历史记录后,打开软件栏目,添加文档,编辑器样子如下:
注意:一定要清除cookies和历史记录。
8、按钮出现了,但按钮还是空白,并没有一个图标,下面开始制作图标。
打开/include/ckeditor/skins注:此处为本站目录。
这里是织梦的皮肤文件夹,其中只有kama这一个皮肤。打开kama文件夹下的icons.png
最下面添加一个按钮,
接着打开kama文件夹下的editor.css,查找: 在其后添加样式: 现在清理cookies和历史记录,进入后台添加软件,我们来看使用效果,输入文字后,点击源码按钮:
OK,织梦ckeditor编辑器添加自定义按钮,并实现自定义样式完成。
9、下面测试前台显示效果。
在/templets/default/style/page.css中找到.viewbox .content样式,在这个样式后面添加样式: 注:以上是本站路径,如果你已进行修改,那么请根据自己网站情况查找。样式根据自身需要填写,这里只是做测试效果。
如果你认为没有必要那也可以直接在模板中写一个样式,调用一个自定义字段来实现,但这个方法,在文章不需要这个字段属性的时候,在前台页面一样会有这样一个样式存在,造成代码繁冗,不利于优化。而自定义按钮,在编辑时,我们使用的话,就会出现,而不使用,则在前台页面并无任何样式或代码,所以自定义按钮添加自定义属性是一个完美的方法。
Ckeditor添加自定义按钮,实现自定义属性流程
1、首先打开网站根目录,请在自己空间或服务器上找到/include/ckeditor;
2、打开ckeditor文件夹下的ckeditor.js文件,查找代码: 在其后添加代码: 注:这里的Custom为自定义,但必须第一个首字母大写,后面全为小写。
3、继续在ckeditor.js中查找 在其后添加代码: 4、继续在ckeditor.js中查找i.toolbar_Basic= 可以看到其后面有[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];这里是编辑器的最基础编辑按钮,在'Bold',后添加’Custom’,
添加完成后代码为: 5、继续查找代码:{name:'basicstyles',items:['Bold',在后面同样加上’Custom’,
添加完成后代码为: 6、打开http://www.ebingou.cn/include/ckeditor/ckeditor.inc.php
注:这里为本站目录,相对目录为/include/ckeditor/ckeditor.inc.php
这里我们以软件栏目的编辑器来讲,其他同理,软件栏目编辑器引用的按钮数组为small,这个可以在dede/templets/soft_add.htm中查询到:
修改ckeditor.inc.php中$toolbar['Small'] = 其后面的内容
在array( 'Bold','Italic','Underline','Strike','-'),中添加’Custom’,
7、这时候基本修改完成,清理cookies和历史记录后,打开软件栏目,添加文档,编辑器样子如下:
注意:一定要清除cookies和历史记录。
8、按钮出现了,但按钮还是空白,并没有一个图标,下面开始制作图标。
打开/include/ckeditor/skins注:此处为本站目录。
这里是织梦的皮肤文件夹,其中只有kama这一个皮肤。打开kama文件夹下的icons.png
最下面添加一个按钮,
接着打开kama文件夹下的editor.css,查找: 在其后添加样式: 现在清理cookies和历史记录,进入后台添加软件,我们来看使用效果,输入文字后,点击源码按钮:
OK,织梦ckeditor编辑器添加自定义按钮,并实现自定义样式完成。
9、下面测试前台显示效果。
在/templets/default/style/page.css中找到.viewbox .content样式,在这个样式后面添加样式: 注:以上是本站路径,如果你已进行修改,那么请根据自己网站情况查找。样式根据自身需要填写,这里只是做测试效果。
本文标签:
很赞哦! (1)
暂无内容 |
暂无内容 |
相关文章
- dedecms织梦发布内容网站为空白的原因有哪些
- dedecms织梦程序安装后无法修改栏目的解决方法
- 用dedecms织梦程序做中英双语网站制作方法
- dedecms织梦cms搜索页面中调用最新文章的实现方法
- 去除dedecms织梦后台与前台登陆验证码的方法
- dedecms织梦自定义文章排序的实现方法
- dedecms织梦终极SEO优化步骤教程
- 怎么取消dedecms织梦后台登陆验证码
- dedecms织梦模板文件不存在,无法解析文档的解决方法
- dedecms织梦留言板调用head.htm的方法
- dedecms织梦修改软件类型标签等数据默认不能修改怎么办
- dedecms织梦系统生成静态页面提示“模板文件不存在,无法解析文
暂无内容 |
暂无内容 |
随机图文
DedeCMSV5.3/V5.5/V5.7安全设置教程
我们不建议用户把栏目目录设置在根目录, 原因是这样进行安全设置会十分的麻烦, 在默认的情况下,安装完成后,目录设置如下:dedecms织梦图片相对地址和绝对地址的问题
我搜了很久也没有找到,高手帮帮我忙啊!我想复制文章内容可以把图片也复制走,不知道怎么设置?在哪里设置?织梦cmsRSS订阅功能实现带图全文输出的实例教程
dedecms自带rss生成后只显示文章的简介,这样让一些RSS阅读器无法展示整篇文章。现在,很多人喜欢使用平板电脑等终端,离线下载好网站的文章来阅读dedecms修改文章TAG给TAG加链接去掉TAG字数限制的方法
1、给TAG加链接:就可以调用出本文对应的TAG,并且是带链接的。2、去掉系统默认TAG标签的字数限制:
留言与评论 (共有 0 条评论) |