手工集成’Simple TinyMCE’ 仿WORD编辑器以及’Syntax Highlighter for WordPress’ 代码高亮插件

Simple TinyMCE是一个强大的类WORD文本排版编辑器，如下图:

可惜作为经常敲代码的鄙人来说，少了一个最为常用的代码高亮功能。我可不想让一大串代码在页面上就那样一色无味的显示出来。

我在网上发现有一个GOOGLE的很不错的代码高亮插件：Syntax Highlighter for WordPress

没有UI，使用方式是自己手动的为代码片段前后加入,如：

在前端插件会自动进行JS解析，采用JAVA风格使其代码高亮.

可是我是一个很爱偷懒的人，这样用着很是不舒服，即然有这个类WORD编辑器，为什么不把两者结合起来呢？实践吧!

这是我第一次手动改WORDPRESS的插件，我以前没有接触过PHP以及WORDPRESS这方面的东西，所以刚开始感觉压力还是挺大的，但是我打开这些插件的源码一看，好家伙，全是JS啊，不要怪我无情的动刀了。

首先说明一下更改的思路：

在Simple TinyMCE中，有一个引用按钮，这个按钮对我来说没有什么用处，所以我就直接更改这个按钮的事件，而且这个按钮有一个很适合代码高亮的UI操作块:

当点击引用这个按钮的时候，会弹出一个选项框，这里有一个language的输入框，那这就太方便了，直接用此输入框作为代码高亮的语言选项,当在language中输入相应的code时，即会在选中的字符首尾追加，这样就首先了方便的代码高亮.

Action:

打开pluginssimple-tinymce-button-upgradexhtmlxtrasjselement_common.js

加入以下脚本，此脚本就是添加代码高亮模块

[javascript]

function codeLight(elm,attrib)
{
var formObj = document.forms[0];
var valueElm = formObj.elements[attrib.toLowerCase()];
tinyMCEPopup.editor.dom.setAttrib(elm, attrib, valueElm.value);
if(attrib == ‘lang’)
{
var content = SXE.focusElement;             // 用户当前选择的文本块
var before = document.createElement(“p”);
before.innerHTML =”[“+valueElm.value+”]”;   // valueElm.value就是当前用户输入的语言
var after = document.createElement(“p”);
after.innerHTML = “[/”+valueElm.value+”]”;
content.parentNode.insertBefore(before,content);  //首追加
content.appendChild(after);   //尾追加
return false;   //暴力结束
}
}

[/javascript]

将脚本加入执行链：

[javascript]

SXE.insertElement = function(element_name) {
var elm = SXE.inst.dom.getParent(SXE.focusElement, element_name.toUpperCase()), h, tagName;

if (elm == null) {
var s = SXE.inst.selection.getContent();
if(s.length > 0) {
tagName = element_name;

//insertInlineElement(element_name)
codeLight(elm,’lang’)  // 执行代码高亮，因暴力返回，后面的代码码片段将不再执行
var elementArray = tinymce.grep(SXE.inst.dom.select(element_name));
for (var i=0; i<elementArray.length; i++) {
var elm = elementArray[i];
//setAllCommonAttribs(elm);
if (SXE.inst.dom.getAttrib(elm, ‘data-mce-new’)) {
//elm.id = ”;
//elm.setAttribute(‘id’, ”);
//elm.removeAttribute(‘id’);
//elm.removeAttribute(‘data-mce-new’);
//setAllCommonAttribs(elm);
}
}
}
} else {
setAllCommonAttribs(elm);
}
SXE.inst.nodeChanged();
tinyMCEPopup.execCommand(‘mceEndUndoLevel’);
}

[/javascript]

集成至此结束，是不是很简单呢？

来看一下显示的效果吧：