PHPCMS编辑器ckeditor升级最新版改宽版并自定义工具栏图标

作者:@ouyang 发布时间:2017年04月21日 阅读: 3,854 分类:学习笔记

v9.6依旧还是使用老版本的 ckeditor ,升级最新版还是非常有必要的,除了在复制粘贴上面标签合理多了,在UI上也是美观不少,整体黑灰色显得高大上,通过简单的样式修改让编辑器原本万年不变的980px变宽版编辑文字还是非常不错的,毕竟现在多是1366以上分辨率了,内容框太小总觉得好难受!另附上相关的方法可以自己定制需要显示工具栏上的图标,方便定制哪些常用的功能!

ckeditor下载
首先我们从ckeditor官方下载需要的版本,一般都选择全功能包(右侧那个)。ckeditor官方下载地址 http://ckeditor.com/download
2016032410111753.jpg
这里方面大家作对比,就一次性放出三个版本的图作对比吧!
20160324101117532.jpg
Basic Package 基础包 只提供8个工具,非常简洁!
20160324101224407.jpg

Standard Package 标准包 工具栏多了一点,其实我感觉这个就够用了,唯一感觉少的就是没有字号选择。
20160324101224407.jpg
Full Package 全功能包,这个版本和老版本基本是一致的,好吧,其实大伙都是下的这个,就我二了在这对比了。

下载好后解压ckeditor,用FTP工具,找到phpcms放ckeditor编辑器的文件夹 /statics/js/ckeditor,ckeditor文件夹整个删除,然后把下载好的ckeditor上传上去,直接就可以用了,注意一定要更新 缓存,浏览器缓存也要全部删除,才能看见新版的,要不然还是老版的样子。 注意变化是复制的文章再也不会div成群,文本文档复制过去的文章,大多都是P标签,有空行的才会出现换行,变得非常有原则了,写文章的同时,标签生成也比旧版少很多。这里很多人估计会选择百度的UEditor编辑器,这里就不讨论了,个人品位,都挻强大的,要用UEditor要修改的地方实在感觉有点多,考虑到以后升级或者鬼知道下一版 PHPCMS 会不会调整编辑器,所以就不去折腾了。

删除子标题的输入框

细心看下编辑器下方多出一个子标题的输入框,对于一般用户根本用不上这个功能,如果看着不顺眼,那就干掉它吧!
打开目录 /phpcms/libs/classes/form.class.php 大概151行,删除或注释以下代码即可!

$ext_str .= "
    <div id='page_title_div'>
        <table cellpadding='0' cellspacing='1' border='0'>
            <tr>
                <td class='title'>".L('subtitle')."<span id='msg_page_title_value'></span>
                </td>
                <td>
                    <a class='close' href='javascript:;' onclick='javascript:$(\"#page_title_div\").hide();'><span>×< /span></a>
                </td>
            </tr>
            <tr>
                <td colspan='2'>
                    <input name='page_title_value' id='page_title_value' class='input-text' value='' size='30'>&nbsp;<input type='button' class='button' value='".L('submit')."' onclick=insert_page_title(\"$textareaid\",1)>
                </td>
            </tr>
        </table>
    </div>";
$ext_str .= "</div>";

对于下面减少了三个按钮,“分页符”,“子标题”,“附件上传”。网上现有教程,我测试在4.5.7下都不能用,因为很少用,我现在就没有去再折腾了,以后有需要再慢慢来研究。

修改编辑器的宽度
只要小做修改一下CSS样式,就能达到改变宽度的目的,以适合现在主流分辨率下的宽屏的风格。
这里我们找到css样式文件,你的网站目录/statics/css/zh-cn-system.css 大概在192行

.addContent{width:980px; margin:0 auto; overflow:hidden;}

我们修改为自己想要的宽度,我的博客响应式设计的,所以我选择了目前主流的1200px,兼容性比较好,现在正屏老电脑也都1280以上的分辨率。

.addContent{width:1200px; margin:0 auto; overflow:hidden;}

其实改为响应式的按百分比,比如90%也是非常不错的(在1920下)。看下图。
20160324102202355.jpg
光修改这个宽度,如果你修改的1200px,图标只能是三行,如果你修改为1200px以上的宽度,想要让他自适应宽度变为两排或三排自适应,还要再修改一下editor的样式,特别是下面讲到的自定义图标的时候,更需要修改一下让他 自适应宽度变为两排或三排 。

修改工具栏图标自适应两栏还是三栏!

打开 statics/js/ckeditor/skins/moono/editor.css 搜索一下

.cke_toolbar_break{display:block;clear:left}.cke_rtl .cke_toolbar_break{clear:right}

修改为 .cke_rtl{clear:right}
然后更新缓存,再清除一下浏览器的缓存,重新打开后台就可以看到效果了。
自定义工具栏的图标,自己想要的才是最好的!
我百度过冒似现在还没有人发过,官方论坛里也有人问,没有人回答。简单的有两种方法,一是修改 ckeditor 的 config.js 文件, ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\ 目录中,但新版本我打开 config.js 文件一看,嘿嘿,还是算了吧,代码量看的头晕。二是我这种改CSS样式表的,比较简单粗暴,而且发生意外也能简单的“回到过去”,因为没准你什么时候又想用了。
20160324104529803.jpg
如图所示,每一个按扭对应图中的一个id,只需要在编辑器主题CSS文件最后面把相应的id添加一个display:none;样式,把它隐藏了就OK了。注意这些所有ID都是cke_xx,我下面简写了。上面数字代码是框内一整个小部分的id名称,下面简写的是对应每个id名称,比如字体大小是 cke_14,左对齐就是 cke_54, 分布仔细对照好。

比如我现在要把,cke_39里面四个字体变粗,斜体,下划线和删除线等我都不要了。打开

打开 statics/js/ckeditor/skins/moono/editor.css
在editor.css最后面取一行添加一个样式 #cke_39{display:none;} 就可以了。如下图,我已经把字体变粗,斜体,下划线和删除四个图标都隐藏了,什么时候有需要了,把添加的样式去除就可以了。最简单粗暴!
20160324104514939.jpg
本文章来源地址:蒙奇时光 - 博客 Muntime.com

如果您还有什么疑惑或建议,欢迎在下方评论区继续讨论。
如果您觉得本文还不错,欢迎分享/打赏本文。当然,如果你无视它,也不会影响你的阅读。再次表示欢迎和感谢!

标签: phpcms

添加新评论 »