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

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

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

ckeditor下载
首先我们从ckeditor官方下载需要的版本，一般都选择全功能包（右侧那个）。ckeditor官方下载地址 http://ckeditor.com/download

这里方面大家作对比，就一次性放出三个版本的图作对比吧！

Basic Package 基础包只提供8个工具，非常简洁！

Standard Package 标准包工具栏多了一点，其实我感觉这个就够用了，唯一感觉少的就是没有字号选择。

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下）。看下图。

光修改这个宽度，如果你修改的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样式表的，比较简单粗暴，而且发生意外也能简单的“回到过去”，因为没准你什么时候又想用了。

如图所示，每一个按扭对应图中的一个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;} 就可以了。如下图，我已经把字体变粗，斜体，下划线和删除四个图标都隐藏了，什么时候有需要了，把添加的样式去除就可以了。最简单粗暴！

本文章来源地址：蒙奇时光 - 博客 Muntime.com