详细内容
您当前的位置:网站主页 > 技术文档 > 织梦技术 >

dedecms编辑器ckeditor添加“加框加背景”自定义按钮

作者:admin 点击:


dedecms编辑器ckeditor添加“加框加背景”自定义按钮

修改:include/ckeditor/ckeditor.js
查找代码:n('Bold',p.bold,'bold',o.coreStyles_bold);
在其后添加代码:n('Custom',p.custom,'custom',o.coreStyles_custom);
【注】这里的Custom为自定义,但必须第一个首字母大写,后面全为小写。

继续在ckeditor.js中查找:i.coreStyles_bold={element:'strong',overrides:'b'};
在其后添加代码:i.coreStyles_custom={element:'custom'};

继续在ckeditor.js中查找:i.toolbar_Basic=
可以看到其后面有:[['Bold','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];
这里是编辑器的最基础编辑按钮,在'Bold',后添加’Custom’,
添加完成后代码为:[['Bold','Custom','Italic','-','NumberedList','BulletedList','-','Link','Unlink','-','About']];

继续查找代码:{name:'basicstyles',items:['Bold',
在后面同样加上'Custom',
添加完成后代码为:

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


修改:include/ckeditor/ckeditor.inc.php,
查找:

$toolbar['Basic'] = array(
$toolbar['Default'] = array(

修改Basic数组、Default数组的代码:array( 'Bold','Italic','Underline','Strike','-'),
添加:'Custom',
添加后的代码为:

$toolbar['Basic'] = array(array( 'Bold','Custom','Italic','Underline','Strike','-'),
$toolbar['Default'] = array(array( 'Bold','Custom','Italic','Underline','Strike','-'),

到这里基本修改完成,清理cookies和历史记录后,打开普通文章栏目,添加新文档,编辑器样子如图:
加粗、倾斜中间出现了空白按钮,但没有图标,下面开始制作图标。【注意】如果看不到空白按钮,就需要清除cookies和历史记录。

用photoshop编辑include/ckeditor/skins/kama/icons.png,在最下面添加一个按钮,如图:

编辑:include/ckeditor/skins/kama/editor.css
查找:.cke_skin_kama .cke_button_bold .cke_icon{background-position:0 -304px;}
在其后添加样式:
.cke_skin_kama .cke_button_custom .cke_icon{background-position:0 -1297px;}
编辑器上可以看见空白按钮那里可以显示图标了。

修改:include/ckeditor/lang/zh-cn.js
查找:bold:'加粗',
在后面添加图标说明:custom:'加框加背景',
鼠标放到新加的按钮上,出现文字提示:加框加背景。

进入网站后台添加文章,编辑器效果如下:


【注意】如果看不到效果,就必须清理cookies和历史记录。

我们来看使用效果,输入文字,拖选文字,点击新添加的按钮,文字被添加了<custom></custom>自定义样式。如图:


后台编辑器里还看不到<custom></custom>的“加框加背景”效果,如图:


修改:include/ckeditor/contents.css

添加:

.cke_show_borders custom{display:block;background: #F2F6FB; border: 1px solid #0099CC;padding:10px;font-family:arial;}

在编辑器里输入文字,拖选文字,点击新添加的“加框加背景”按钮,效果出来了,如图:


【注意】如果看不到效果,就必须清理cookies和历史记录。

如果出现下面的现象,就是css样式忘了添加块状化显示代码:display:block;


下面给“加框加背景”自定义按钮的标签<custom></custom>添加前台页面的css样式:
修改前台文章内容页模板的css文件,
查找文章主体部分的css,
我的模板文章主体部分的css样式是:.viewbox.content
在这个样式后面添加样式:
.viewbox .content custom{background: #F2F6FB; border: 1px solid #0099CC;padding:10px;font-family:arial;}
前台已经可以看到自定义样式“加框加背景”的效果了。备注:如果无法块状化显示,请添加代码:display:block;
样式根据自身需要随便填写,这里只是做测试效果。




【 打印本页 】  【 点击返回 】

专业提供: 武汉做网站武汉网站建设武汉网站制作武汉网页设计武汉网站仿制武汉网站维护等服务

木兰山网站建设工作室   联系QQ: 1003959393    412852887    电话:15972107637

Copyright © 2009-2013    技术支持:木兰山网络