PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > 编程杂谈 > 正文

    CKEditor4.x部署和配置

    作者:w634381967来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:CKEditor4 x && JSP官网下载CKEditor,可选Basic, Standard, Full解压放置其WebRoot下JSP中引入以下文件:<script type="text javascri
    CKEditor4.x && JSP
    官网下载CKEditor,可选Basic, Standard, Full
    解压放置其WebRoot下

    JSP中引入以下文件:

    <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 
    <script type="text/javascript" src="ckeditor/config.js"></script> 

    有以下几种方法可实现CKEditor
    一:通过设置class样式

    <textarea class="ckeditor" name="editor1"></textarea> 

    二:使用JS代码

    $(document).ready(function(){ 
        CKEDITOR.replace('entity_content');  //entity_content为textarea元素ID 
    }); 

    三:使用jquery
    使用jquery之前一定要先引入jquery文件,另外还要引入ckeditor/adapters下的一个jquery.js
    (两者不一样,务必要引入)

    $(document).ready(function(){ 
        $('textarea#editor1').ckeditor(); 
    }); 

    另外配置config.js以满足自己的项目需求。

    CKEDITOR.editorConfig = function( config ) { 
        // Define changes to default configuration here. 
        // For the complete reference: 
        // http://docs.ckeditor.com/#!/api/CKEDITOR.config 
     
        // The toolbar groups arrangement, optimized for a single toolbar row. 
        config.toolbarGroups = [ 
            { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] }, 
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] }, 
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] }, 
            { name: 'forms' }, 
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] }, 
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] }, 
            { name: 'links' }, 
            { name: 'insert' }, 
            { name: 'styles' }, 
            { name: 'colors' }, 
            { name: 'tools' }, 
            { name: 'others' }, 
            { name: 'about' } 
        ]; 
     
        // The default plugins included in the basic setup define some buttons that 
        // we don't want too have in a basic editor. We remove them here. 
        config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript'; 
     
        // Let's have it basic on dialogs as well. 
        config.removeDialogTabs = 'link:advanced'; 
    }; 
    根据需要  具体配置查阅其他资料

    PS:需要注意的是路径问题,在引入js的时候 如果ckeditor放在了WebRoot根目录下。
    src应该是src="ckeditor/ckeditor.js" ,不能为src="/ckeditor/ckeditor.js"
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-74-1199-1.html
    相关热词搜索: