2012-05-05 15:01:14|?次阅读|上传:wustguangh【已有?条评论】发表评论
关键词:Web, JavaScript, CKEditor|来源:唯设编程网
准备工作已经完成,现在正式开始介绍ckeditor添加源码高亮插件的方法:
第一步:在ckeditor文件夹的plugins子文件夹中创建insertcode的文件夹,最终的目录结构如下:

plugin.js实现了工具栏按钮的添加以及将按钮和对应的命令关联,plugin.js文件的完整源码如下:
CKEDITOR.plugins.add('insertcode', {
requires : ['dialog'],
init : function(editor) {
editor.addCommand('insertcode', new CKEDITOR.dialogCommand('insertcode'));
editor.ui.addButton('insertcode', {
label : editor.lang.insertcode.toolbar,
command : 'insertcode',
icon : this.path + 'images/insertcode.gif'
});
CKEDITOR.dialog.add('insertcode', this.path + 'dialogs/insertcode.js');
}
});
insertcode.js实现了源码插入对话框的设计以及对应事件的响应,完整源代码如下:
// JavaScript Document
CKEDITOR.dialog.add('insertcode', function(editor){
var escape = function(value){
value=value.replace(/(<)/g,"<");
value=value.replace(/(>)/g,">");
return value;
};
return {
title: editor.lang.insertcode.title,
resizable: CKEDITOR.DIALOG_RESIZE_BOTH,
minWidth: 600,
minHeight: 400,
contents: [{
id: 'cb',
name: 'cb',
label: 'cb',
title: 'cb',
elements: [
{
type: 'select',
style: 'width:100%;height:25px;margin-bottom:10px',
label: editor.lang.insertcode.language,
id: 'lang',
required: true,
'default': 'csharp',
items: [
['ActionScript3', 'as3'],
['Bash/shell', 'bash'],
['C#', 'csharp'],
['C++', 'cpp'],
['CSS', 'css'],
['Delphi', 'delphi'],
['Diff', 'diff'],
['Groovy', 'groovy'],
['Html', 'xhtml'],
['JavaScript', 'js'],
['Java', 'java'],
['JavaFX', 'jfx'],
['Perl', 'perl'],
['PHP', 'php'],
['Plain Text', 'plain'],
['PowerShell', 'ps'],
['Python', 'py'],
['Ruby', 'rails'],
['Scala', 'scala'],
['SQL', 'sql'],
['Visual Basic', 'vb'],
['XML', 'xml']
]
},
{
type: 'textarea',
label: editor.lang.insertcode.code,
id: 'code',
rows: 20 ,
style: 'width:100%;margin-top:5px'
}
]
}],
onOk: function(){
var code = this.getValueOf('cb', 'code');
var lang = this.getValueOf('cb', 'lang');
//代码文本输入区域为空,则不进行添加
if(code.replace(/^s*|s*$/g,'')!=""){
var html ="<pre class="brush:" + lang + ";">";
html+=escape(code);
html+="</pre>";
editor.insertHtml(html);
}
},
onLoad: function(){
}
};
});