PivotX改造

因为不能贴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]