dedecms织梦ckeditor编辑器添加自定义按钮,如何实现编辑器自定义样式

大家在使用织梦 网站建设 系统时,在对内容页面的body正文部分进行编辑的时候,前台正文部分有的时候需要一个自定义样式,比如对特定的代码加个边框,让用户更容易区别及识别......但ckeditor并没有自定义样式涉及。而且织梦到了5.7版本之后编辑器不再是之前

大家在使用织梦网站建设系统时,在对内容页面的body正文部分进行编辑的时候,前台正文部分有的时候需要一个自定义样式,比如对特定的代码加个边框,让用户更容易区别及识别......但ckeditor并没有自定义样式涉及。而且织梦到了5.7版本之后编辑器不再是之前fck编辑器,而是升级成了ckeditor编辑器

如果你认为没有必要那也可以直接在模板中写一个样式,调用一个自定义字段来实现,但这个方法,在文章不需要这个字段属性的时候,在前台页面一样会有这样一个样式存在,造成代码繁冗,不利于优化。而自定义按钮,在编辑时,我们使用的话,就会出现,而不使用,则在前台页面并无任何样式或代码,所以自定义按钮添加自定义属性是一个完美的方法。

织梦编辑器

Ckeditor添加自定义按钮,实现自定义属性流程

1、首先打开网站根目录,请在自己空间或服务器上找到/include/ckeditor;  
2、打开ckeditor文件夹下的ckeditor.js文件,查找代码:

 

1 n('Bold',p.bold,'bold',o.coreStyles_bold);
2 在其后添加代码:
3 n('Custom',p.custom,'custom',o.coreStyles_custom);  

 
注:这里的Custom为自定义,但必须第一个首字母大写,后面全为小写。   
3、继续在ckeditor.js中查找i.coreStyles_bold={element:'strong',overrides:'b'};在其后添加代码:i.coreStyles_custom={element:'custom'};   
4、继续在ckeditor.js中查找i.toolbar_Basic= 可以看到其后面有[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];这里是编辑器的最基础编辑按钮,在'Bold',后添加’Custom’,   添加完成后代码为:   [['Bold','Custom','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];   
5、继续查找代码:{name:'basicstyles',items:['Bold',在后面同样加上’Custom’,
添加完成后代码为:

 

1 {name:'basicstyles',items:['Bold','Custom','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat']}

6、打开http://www.badubox.com/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,查找:

1 .cke_skin_kama .cke_button_bold .cke_icon{background-position:0 -304px;}

在其后添加样式:

1 .cke_skin_kama .cke_button_custom .cke_icon{background-position:0-1295px;}

现在清理cookies和历史记录,进入后台添加软件,我们来看使用效果,输入文字后,点击源码按钮:   
OK,织梦ckeditor编辑器添加自定义按钮,并实现自定义样式完成。   
9、下面测试前台显示效果。   
在/templets/default/style/page.css中找到.viewbox .content样式,在这个样式后面添加样式:

 

1 .viewbox .content custom{border:1px dotted red;font-size:20px;}  

 
注:以上是本站路径,如果你已进行修改,那么请根据自己网站情况查找。样式根据自身需要填写,这里只是做测试效果。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

dedecms织梦默认的TAG标签不是很灵活。有时候我们的标签需要进行一个分类,能不能像{dede:arclist}标签的自定义属性(如:flag=c,h),这样全站调用的时候更灵活。 全站调用TAG标签方法一般是: {dede:tag row='100' sort='new' getall='1'}a target="_blank
未审核文档的TAG会显示在TAG列表页面, 固然点击进入TAG时, 相关的未审核文章不会显示出来, 这样对用户体验是很不好的. DEDECMS暂时没有提供这个功能,所以要解决这个问题, 让DEDECMS不显示未审核文档的TAG, 就要修改TAG的显示库文件 tag.lib.php。 方法一 打
我们都知道DEDECMS生成的文件夹是按天生成的,只要传了图片就会自动建立个年月日的文件,centos系统下,都是随便排序的,很难找到对应文件夹,如果要按顺序排列,要怎么操作呢? 一、文件管理器: 修改 /dede/templets/file_manage_main.html $dh = dir($inp
我们在用到织梦dedecms软件模型的时候,手动指定地址通常只能是引用其他网址或者链接,我们要实现直接选取站内的文件,这个要怎么操作呢?下面小编一步步为您解答,最终效果如下图所示: 实现教程 1、打开 /dede/templets/soft_add.htm 找到 input type=text
我们有时候需要对织梦文档的点击量进行批量维护,比如采集来的文章,点击量都为0,需要批量修改,可以用到如下方法1。 1、在数据库里运行下面的代码就可以了,文章的点击量变得随机从500到1000 UPDATE dede_archives SET click=FLOOR(500 + (RAND() * 1000))
用过dedecms的朋友都知道,织梦cms后台系统基本参数里是无法直接上传图片的,我们更换logo图只能到ftp里替换,非常的不方便,我们如果想直接在系统基本参数里上传,要怎么处理呢?在这里需要对代码进行修改,具体流程如下: 实现方法,打开/dede/templets/sy