ckeditor添加自定义语法高亮按钮

2Mar/11Off

ckeditor添加自定义语法高亮按钮

首先下载并安装ckeditor，我们可以自定义ckeditor工具栏要显示的按钮，工具栏按钮定义可以参考这里。

现在我们需要向工具栏添加一个自定义功能的按钮。ckeditor工具栏中的每个按钮都是作为插件定义在ckeditor\plugins\ 目录中。我们在ckeditor\plugins\中创建一个新文件夹highLight。在highLight内包含以下文件：

high-light.png 编辑器工具栏显示图标
plugin.js 给自定义按钮绑定事件
my_dialog.js 单击自定义按钮后，弹出的自定义窗口
highLight.js 语法高亮，只实现HTML/CSS/JavaScript

plugin.js代码：

(function(){
    CKEDITOR.plugins.add('highLight', {
        init:function(editor){
            var path = this.path;
            editor.ui.addButton('highLight', {
                label: 'highLight code',
                icon: path + 'high-light.png',
                command: 'highLightCmd'
            });
            editor.on( 'pluginsLoaded', function( ev ){
                if ( !CKEDITOR.dialog.exists( 'highLightDialog' ) ){
                    var href = path + 'my_dialog.js';

                    // Finally, register the dialog.
                    CKEDITOR.dialog.add( 'highLightDialog', href );

                    //load highLight.js
                    var s = document.createElement('script');
                    s.type = 'text/javascript';
                    s.src = path + 'highLight.js';
                    document.getElementsByTagName('head')[0].appendChild(s);
                }
                // Register the command used to open the dialog.
                editor.addCommand( 'highLightCmd', new CKEDITOR.dialogCommand( 'highLightDialog' ) );
            });
        }
    });
})();

my_dialog.js代码

CKEDITOR.dialog.add( 'highLightDialog', function( editor )
{
 return {
 title : 'highLight code',
 minWidth : 400,
 minHeight : 200,
 onOk : function(){
 var lang = this.getValueOf('tab1', 'hl-lang'),
 code = this.getValueOf('tab1', 'hl-cotent');

 switch(lang){
 case 'JavaScript':
 code = highLightJS.format(code);
 break;
 case 'HTML':
 code = highLightHTML.format(code);
 break;
 case 'CSS':
 code = highLightCSS.format(code);
 break;
 default:
 break;
 }

 editor.insertHtml('<div class="code">' + code + '</div>');
 },
 contents : [
 {
 id : 'tab1',
 label : 'First Tab',
 title : 'First Tab',
 elements :
 [
 {
 id : 'hl-lang',
 label : '',
 type : 'select',
 items : [['JavaScript'], ['HTML'], ['CSS']],
 'default' : 'JavaScript'
 },
 {
 id : 'hl-cotent',
 type : 'textarea',
 label : '',
 rows : 12
 }
 ]
 }
 ]
 };
} );

highLight.js代码

if(typeof Object.create !== 'function'){
 Object.create = function(o){
 function F(){}
 F.prototype = o;
 return new F();
 }
}
var highLight = {
 //value: 'vapour',
 i: 0,//计数器
 buff: [],//缓存
 encode: function(){//对<、>和&进行编码
 this.replace(/&(\S+?;)/g, '&$1').replace(/</g, '<').replace(/>/g, '>');
 return this;
 },
 replace: function(reg, fn){
 this.value = this.value.replace(reg, fn);
 return this;
 },
 whiteSpace: function(){
 this.replace(/^\t+/gm, function(val){
 return (new Array(val.length + 1)).join('    ');
 }).replace(/^ +/gm, function(val){
 return (new Array(val.length + 1)).join(' ');
 }).replace(/\r?\n/g, function(val){
 return ' ';
 });
 return this;
 },
 get: function(){
 return this.value;
 },
 set: function(v){
 this.value = v;
 return this;
 },
 format: function(v){
 return this.set(v).encode().process().whiteSpace().get();
 }
};

highLightHTML = Object.create(highLight);
highLightHTML.process = function(){
 var that = this,
 reg,
 scripts = [],
 styles = [],
 i = 0,
 j = 0,
 tableList = "table|thead|tbody|tfoot|td|th|tr",
 formList = "form|input|select|option|textarea";

 this.replace(/(<script[^&]*>)([\s\S]*?)(<\/script[^&]*>)/g, function(all, start, middle, end){//缓存内联JS
 scripts[i] = {
 start: '' + start.replace(/(['"]).*?\1/g, function(m){ return '' + m + '<_buff_81_buff_span>',
 middle: middle,
 end: '' + end + ''
 };
 return "_js_" + i++ + "_js_";
 }).replace(/(<style[^&]*>)([\s\S]*?)(<\/style[^&]*>)/g, function(all, start, middle, end){//缓存内联CSS
 styles[j]={
 start: '' + start.replace(/(['"]).*?\1/g, function(m){ return '' + m + '<_buff_84_buff_span>',
 middle: middle,
 end: '' + end + ''
 };
 return "_css_" + j++ + "_css_";
 }).replace(//g, function(val){//缓存html注释
 that.buff.push({
 cls: 'xml-comment',
 value: val
 });
 return '_buff_' + that.i++ + '_buff_';
 }).replace(/([^\\])?((\"|\').*?([^\\])\3)/g, function(val){
 return '' + val + '';
 }).replace(/<\/?([a-z]+)(?:.|\n)*?>/g, function(m, n){
 reg = new RegExp('^' + tableList + '$', 'gi');
 if(reg.test(n)){
 return '' + m + '';
 }
 reg = new RegExp('^' + formList + '$', 'gi');
 if(reg.test(n)){
 return '' + m + '';
 }
 switch(n){
 case 'img':
 return '' + m + '';
 case 'a':
 return '' + m + '';
 default:
 return '' + m + '';
 }
 }).replace(/_buff_(\d+)_buff_/g, function(val, index){
 return '' + that.buff[index].value + '';
 }).replace(/_css_(\d+)_css_/g, function(all, num){//高亮内联CSS
 return styles[num].start + highLightCSS.format(styles[num].middle) + styles[num].end;
 }).replace(/_js_(\d+)_js_/g, function(all,num){//高亮内联JS
 return scripts[num].start + highLightJS.format(scripts[num].middle) + scripts[num].end;
 });

 return this;
}

接下来我们需要在config.js中注册我们自定义的插件highLight，并显示在编辑器工具栏中，config.js代码

CKEDITOR.editorConfig = function( config )
{
    config.height = '360px';
    config.extraPlugins = 'highLight';
    config.toolbar = 'Full';

    config.toolbar_Full =
    [
        ['Source','-','Save','NewPage','Preview','-','Templates'],
        ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
        ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
        ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
        '/',
        ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
        ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
        ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
        ['BidiLtr', 'BidiRtl'],
        ['Link','Unlink','Anchor'],
        ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe'],
        '/',
        ['Styles','Format','Font','FontSize'],
        ['TextColor','BGColor'],
        ['Maximize', 'ShowBlocks','-','About','-','highLight']
    ];
};

注意：自定义插件的名称必须在任何地方都要保持一致。这个例子中highLight显示为红色的地方。

参考：Customizing Ckeditor and adding a new toolbar button

Tagged as: ckeditor, highLight Comments Off

Comments (2) Trackbacks (0) ( subscribe to comments on this post )

圆圆
April 21st, 2011 - 11:27

类似：items : [['JavaScript'], ['HTML'], ['CSS']],
这样的值我想用.aspx页面从数据库读取的值来绑定，有没有办法？？
dovapour
April 29th, 2011 - 15:59

.net中服务器控件都可以绑定数据源的

Trackbacks are disabled.

检测用户自定义的全局变量 » « 跨浏览器的box-shadow实现文案

vapour's blog

ckeditor添加自定义语法高亮按钮

Pages

Categories

Blogroll

Archive

Meta