PivotX改造

发布 by 猛禽 需要1分钟读完

因为不能贴HTML代码的问题，不得不把用了很多年的pivot 1.4x升级到最新的Pivotx 2.3.6。

但是因为我原来用的pivot是自己定制修改过的，现在换新的用着很不爽，所以需要重新改造一下——因为Pivotx的代码与Pivot还是有不少变化的。

把编辑器换成CKEditor

TinyMCE用了一下，很不习惯，而且也不知道怎么扩展，所以还是换成用惯了的CKEditor吧。

首先下载最新版CKEditor解压后放在pivotx目录下。

然后修改 pivotx/templates_internal/inc_header.tpl 文件，在 head 段里加入如下代码：

<script language="javascript" type="text/javascript" src="ckeditor/ckeditor.js"></script>

接着修改 pivotx/templates_internal/inc_init_tinymce.tpl 文件，将其中所有内容全部删除。

然后分别修改 pivotx/templates_internal/editentry.tpl 和 editpage.tpl 文件，把其中的 textarea 里的 class="Editor" 改成 class="ckeditor" 。

注意：每个文件里都有两处，分别是文章的介绍部分和主体部分。

至于bookmarklet里还用到TinyMCE就懒得改了，不管。

修改CKEditor的image对话框

目前版本的CKEditor的image对话框里，图像的宽高设置是被放在img标签的style里的width/height，但这种方式有个问题：

在图片还没有显示出来的时候不会显示空白位置，而是像不存在图片一样紧接着下面的内容。

我还是习惯传统的width/height属性，这样可以在图片显示出来之前显示一个空白框。

所以需要修改CKEditor的代码。

打开 ckeditor/plugins/image/dialog/image.js 文件，查找替换其中的：

setStyle("width"... 为 setAttribute("width"...

height也同样替换。

另外还要查找所有 removeAttribute("width") 和 removeAttribute("height") 并删除之。

给CKEditor增加贴代码的功能（包含SyntaxHighLighter支持）

因为以前用的那个SyntaxHighLight扩展是for CKEditor 3.x的，在最新的 4.x 上会有问题，但是原作者已经不再更新，我自己也不会改，只好另外找过。

幸好最后在 WordPress 找到一个扩展叫做： syntaxhighlight-ckeditor-button 。

虽然这是一个WP的扩展，但是其中对CKEditor的支持部分是通用的，所以也可以移植过来。

下载这个扩展后解压，把其中的 syntaxhighlight 目录放到 ckeditor/plugins 下，然后修改 ckeditor/config.js 加入：

config.extraPlugins = 'syntaxhighlight';

即可。

让文章显示SyntaxHighLighter效果

上面的修改只是在写文章时可以方便地帖代码，并且在代码上加入SyntaxHighLighter需要需要语法，但并不会自动显示出效果来。要让效果显示出来，需要给模板也加上SyntaxHighLighter支持。

以默认模板中的Skinny为例：

修改 templates/skinny/_sub_header.tpl 文件，在其 head 段加入：

<script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shCore.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shAutoloader.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushBash.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushCpp.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushCss.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushDelphi.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushDiff.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushPhp.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushPlain.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushPython.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushSql.js"></script>
    <script type="text/javascript" src="pivotx/ckeditor/plugins/syntaxhighlight/scripts/shBrushXml.js"></script>
    <link type="text/css" rel="stylesheet" href="pivotx/ckeditor/plugins/syntaxhighlight/styles/shCore.css"/>
    <link type="text/css" rel="stylesheet" href="pivotx/ckeditor/plugins/syntaxhighlight/styles/shThemeDefault.css"/>
    <script type="text/javascript">
        SyntaxHighlighter.all();
    </script>

但是这样加完了以后虽然有了语法高亮的效果，但是格式全乱了，查了一下，是因为模板默认的CSS与语法高亮有冲突。

修改 templates/skinny/style.css ，把其中的 code 项注释或删掉即可。

类似这样：

/*
code {
	display: block;
	padding: 5px;
	border: 1px solid #e6e6e6;
}
*/

增加页面关闭警告

pivotx在设置页面是有关闭警告的，当你修改过设置没有保存就关闭或离开页面时会弹出警告，以防止设置没保存。

但是在写文章或修改时居然没有这样的警告，只好自己加一个。

不过懒得去判断文章有没有修改，所以只是简单地加上每次关闭都警告。但加了个条件，只在文章的编辑修改页面弹出，其它页面不弹出。

在 pivotx/templates_internal/ 下创建一个 closeconfirm.js 的文件，内容为：

function closeConfirm() {
    s=window.location.href;
    if (s.indexOf("page=entry")>0)
        return "离开当前页面前请确认所作的修改是否已保存？";
    else
        return;
};

$(function () {
window.onbeforeunload = closeConfirm;
});

然后修改 pivotx/templates_internal/inc_header.tpl 文件，在其 head 段增加这一句：

<script type="text/javascript" src="includes/js/closeconfirm.js"></script>

即可。

推送到[go4pro.org]