您的位置：站点首页 > 技术文章 >正文

ASP.NET(C#)站点ckeditor的使用总结

2012-05-04 23:05:21|?次阅读|上传:wustguangh【已有?条评论】发表评论

关键词：C#, Web, CKEditor, ASP.NET|来源：唯设编程网

到此，就完成了ckeditor的基本配置工作，下面我们介绍对ckeditor进行定制的常用方法。在实际的使用过程中，我们对ckeditor的定制通常包含工具栏的定制和皮肤的定制，有时也需要增加自定义的插件，比如源码高亮。

三、ckeditor的个性化定制

3.1 ckeditor工具栏的定制

在ASP.NET的.CS文件中，增加下列的配置语句：

    protected void Page_Load(object sender, EventArgs e) {
        //设置编辑模式               
        ck_content.config.enterMode = EnterMode.P;
        //对应i.toolbar_Custom
        ck_content.config.toolbar = "Custom";
        ck_content.config.height = "520px";

        ......
    }

enterMode设置编辑器默认的换行方式，本实例采用<P></P>编辑响应换行，给toolbar赋值“Custom”，表示我们使用的是Custom工具栏，最后一句是对编辑器的高度进行设置。需要特别注意的是，此处的Custom在ckeditor.js文件中对应的是i.toolbar_Custom工具栏，配置代码如下：

    i.toolbarLocation = 'top';
    i.toolbar_Basic = [['Bold', 'Italic', '-', 'NumberedList', 'BulletedList',
            '-', 'Link', 'Unlink', '-', 'About', 'insertcode']];
    i.toolbar_Full = [{
        name : 'document',
        items : ['Source', '-', 'Save', 'NewPage', 'DocProps', 'Preview',
                'Print', '-', 'Templates']
    }, {
        name : 'clipboard',
        items : ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-',
                'Undo', 'Redo']
    }, {
        name : 'editing',
        items : ['Find', 'Replace', '-', 'SelectAll', '-', 'SpellChecker',
                'Scayt']
    }, {
        name : 'forms',
        items : ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea',
                'Select', 'Button', 'ImageButton', 'HiddenField']
    }, '/', {
        name : 'basicstyles',
        items : ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript',
                'Superscript', '-', 'RemoveFormat']
    }, {
        name : 'paragraph',
        items : ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-',
                'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter',
                'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']
    }, {
        name : 'links',
        items : ['Link', 'Unlink', 'Anchor']
    }, {
        name : 'insert',
        items : ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley',
                'SpecialChar', 'PageBreak', 'Iframe']
    }, '/', {
        name : 'styles',
        items : ['Styles', 'Format', 'Font', 'FontSize']
    }, {
        name : 'colors',
        items : ['TextColor', 'BGColor']
    }, {
        name : 'tools',
        items : ['Maximize', 'ShowBlocks', '-', 'About', 'insertcode']
    }];
    i.toolbar_Custom = [{
        name : 'align',
        items : ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock']
    }, {
        name : 'tools',
        items : ['TextColor', 'BGColor', '-', 'Format', 'FontSize', 'Bold',
                'Italic', 'Underline', 'Subscript', 'Superscript', 'Link',
                'Unlink']
    }, {
        name : 'past',
        items : ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord']
    }, {
        name : 'link',
        items : ['Image', 'Flash', 'Table', 'SpecialChar', 'PageBreak']
    }, {
        name : 'source',
        items : ['insertcode']
    }];
    ......

源文件中的ckeditor.js是经过压缩的，可读性较差，这些代码是使用spket+Ecllipse格式化以后的效果。

3.2 ckeditor皮肤设置

在ckeditor.js文件中，通过对a.config赋值，完成了ckeditor大部分自定义配置，本例皮肤的配置方法是：skin:'v2'，下面是a.config配置语句：

    a.config = {
        customConfig : 'config.js',
        autoUpdateElement : true,
        baseHref : '',
        jqueryPath : m_jquerypath,
        contentsCss : a.basePath + 'contents.css',
        contentsJs : a.basePath + 'contents.js',
        contentsLangDirection : 'ui',
        contentsLanguage : '',
        language : '',
        defaultLanguage : 'en',
        enterMode : 1,
        forceEnterMode : false,
        shiftEnterMode : 2,
        corePlugins : '',
        docType : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"'+
            '"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">',
        bodyId : '',
        bodyClass : '',
        fullPage : false,
        height : 200,
        plugins : 'about,insertcode,a11yhelp,basicstyles,bidi,blockquote,button,'+
            'clipboard,colorbutton,colordialog,contextmenu,dialogadvtab,div,'+
            'elementspath,enterkey,entities,filebrowser,find,flash,font,format,'+
            'forms,horizontalrule,htmldataprocessor,iframe,image,indent,justify,'+
            'keystrokes,link,list,liststyle,maximize,newpage,pagebreak,pastefromword,'+
            'pastetext,popup,preview,print,removeformat,resize,save,scayt,smiley,'+
            'showblocks,showborders,sourcearea,stylescombo,table,tabletools,'+
            'specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc',
        extraPlugins : '',
        removePlugins : '',
        protectedSource : [],
        tabIndex : 0,
        theme : 'default',
        skin : 'v2',
        width : '',
        baseFloatZIndex : 10000
    };

在其中你还可以定义其他项的配置参数，实现特定的功能和特效。到此，ckeditor的基本使用方法就介绍完了，有任何意见和建议，欢迎在评论区域进行讨论！

<12>
【发表评论0条 】
网友评论(共?条评论)..
ASP.NET(C#)站点ckeditor的使用总结