转:织梦ckeditor添加自定义按钮,实现自定义样式

1、首先打开/include/ckeditor 注:这里为本站目录。

2、打开ckeditor文件夹下的ckeditor.js文件,查找代码:

n(‘Bold‘,p.bold,‘bold‘,o.coreStyles_bold);

在其后添加代码: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’,、

添加完成后代码为:

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

6、打开/include/ckeditor/ckeditor.inc.php

注:这里为本站目录

这里我们以软件栏目的编辑器来讲,其他同理,软件栏目编辑器引用的按钮数组为small

这个可以在dede/templets/soft_add.htm中查询到:

<?php

GetEditor(‘body‘, ‘‘, 250, ‘Small‘);

?>

修改ckeditor.inc.php 中$toolbar[‘Small‘] = 其后面的内容

在array( ‘Bold‘,‘Italic‘,‘Underline‘,‘Strike‘,‘-‘),中添加’Custom’,

7、这时候基本修改完成,清理cookies和历史记录后,打开软件栏目,添加文档,编辑器样子如下:

注意:一定要清除cookies和历史记录。

8、按钮出现了,但按钮还是空白,并没有一个图标,下面开始制作图标。

打开 /include/ckeditor/skin注:此处为本站目录。

这里是织梦的皮肤文件夹,其中只有kama这一个皮肤。打开kama文件夹下的icons.png

在最下面添加一个按钮

接着打开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 -1295px;}

现在清理cookies和历史记录,进入后台添加软件,编辑器效果如下:

我们来看使用效果,输入文字后,点击源码按钮:

OK,织梦ckeditor编辑器添加自定义按钮,并实现自定义样式完成。

9、下面测试前台显示效果。

在/templets/default/style/page.css (此文件为你前端展示的样式文件)中找到.viewbox .content样式,在这个样式后面添加样式.viewbox .content custom{border:1px dotted red;font-size:20px;}

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

后台编辑如下:

效果测试完毕。

如果你需要各种样式的按钮,直接按以上方法套用即可。

注:IE8及以下无法支持自定义标签,所以这里的自定义标签custom,最好设置为html5的标签,如article,然后再在文章页模板上添加

<!--[if lt IE 9]>

  <script src="http://cdn.static.runoob.com/libs/html5shiv/3.7/html5shiv.min.js"></script>

<![endif]-->
再对此标签进行设置样式

文章转载自:http://blog.sina.com.cn/s/blog_828096f30101ckpr.html

      http://blog.sina.com.cn/s/blog_828096f30101ckq7.html

原文地址:https://www.cnblogs.com/fudanchencds/p/11352665.html

时间: 2024-11-07 18:56:56

转:织梦ckeditor添加自定义按钮,实现自定义样式的相关文章

ckeditor添加自定义按钮整合swfupload实现批量上传图片

ckeditor添加自定义按钮整合swfupload实现批量上传图片给ckeditor添加自定义按钮,由于ckeditor只能上传一张图片,如果要上传多张图片就要结合ckfinder,而ckfinder是收费的,所以就想通过自定义按钮整合swfupload实现一次上传多张图片的功能首先下载并安装ckeditor.下载swfupload解压拷贝到对应的文件目录下3.自定义工具栏按钮:我们可以自定义ckeditor工具栏要显示的按钮,工具栏按钮定义可以参考这里.现在我们需要向工具栏添加一个自定义功能

CKEditor 添加自定义按钮

1.下载ckeditor,我这里下载的是CKEditor 3.6.2. 2.里边有压缩过的代码及源码,源码所在目录为_source,还有一些使用例子,具体不做累述 此处主要讲的是在使用过程需要添加自定义按钮. 2. 比如我要添加“插入代码”的按钮,起名为code.在ckeditor/plugins下新建文件夹code,在code文件夹里加入一个小图片如code.gif,然后在code文件夹里新建plugin.js文件,内容如下: //一键排版(function () { b = 'format_

织梦添加超过两百个自定义字段后在使用addfields调用自定义字段出错的解决方法

dedecsm 自定义模型  添加自定义字段(个数一百多个),使用addfields  方法调用,出现调用不出来的情况[addfields  里面就能添加145个字段,多了直接乱码或者无法显示] 解决方法 分别打开 include/dedehtml2.class.php include/dedetag.class.php include/dedetemplate.class.php 搜索 1024 全部改成 10240 文件存储字节改大就可以了. 原文地址:https://www.cnblogs

织梦dedecms怎样让在自定义表单显示时间

一下是部分代码,红色部分,即为调用的时间代码.其他代码,可在图3页面,右键查看源代码获取,谢谢. 图1 图2 图3 ----------------------------------------------------------------------------- 首先自定义表单,然后添加字段,比如联系人(单行文本),联系方式(单行文本),地址(单行文本),留言内容(单行文本),留言时间(单行文本)等字段 注意:留言时间这里不要选择"时间类型",选择默认的"文本形式&q

织梦添加和调用自定义字段的方法

织梦自定义字段要想在任何位置任何模版中调用或者在{dede:list }和{dede:arclist }标签中调用,需要特殊设置.自定义字段就是列表附加字段自定义的字段. 一,织梦如何添加自定义字段:网站后台>核心>频道模型>内容模型管理>选择要添加自定义字段的频道模型,这里以图片集频道举例 注意:创建字段,前台参数这里“使字段可以在列表的底层模板中获得”这个必须勾选 在字段管理>添加新字段中添加(价格属性) 在基本设置里>列表附加字段中添加jiage(可以在列表模板{

使用JS解决织梦dedecms多标签嵌套的问题

我们知道织梦系统除了channelartlist和自定义宏标签外,其他所有标签都不支持标签嵌套.但我们有时又会碰到需要标签嵌套的情况,如: {dede:list titlelen=60 pagesize='5'} <li><img src="{dede:global.cfg_templets_skin/}/images/dot.gif"><a href="[field:arcurl/]">[field:title/]</a&

织梦Fatal error: Call to a member function GetInnerText()

问题:织梦修改或者添加了自定义表单后在后台修改文章的时候出现如下错误:Fatal error: Call to a member function GetInnerText() on a non-object in \include\customfields.func.php on line 539 解决代码: 找到这段代码 $fvalue = trim($ntag->GetInnerText()); 换成 $innerTmp = ($arcTag=="") ? trim($ar

文件上传按钮的用户自定义样式的实现

一般在做 WEB 开发项目的时候碰到文件上传必不可少,但是因为各家浏览器对于 <input type="file"> 标签支持不同所以在各个浏览器下的显示也是不一样的.可能在用户体验方面会形成困扰,今天就给大家介绍一下文件上传按钮的用户自定义样式的实现. 实现原理: 建立两个层,一个层包装 <input type="file"> 以下简称文件按钮层,一个层包装上传文件按钮的自定义样式,以下渐层样式层.设置两个层的大小一致,将文件按钮层设置相对

dedecms(织梦)自定义表单后台显示不全

我们常用dedecms 自定义表单做留言功能.但是偶尔会遇到这样一个问题,就是 在前台提交表单后..后天显示不全.特别是中文字符  都不会显示, 比如下图: 这是因为  如果你织梦是gbk的话那就对了 是htmlspecialchars这个函数的原因 默认是utf8 如果不想换php版本的话就把htmlspecialchars($str);替换为htmlspecialchars($str, ENT_COMPAT ,'GB2312'); 所以 要在后台模板 wwww.baidu.com/dede/