前端使用ckeditor

一、导入js文件

将下载的文件导入相应html目录下
二、html代码

三、配置

js配置：

CKEDITOR.replace( 'liasionContent' );

配置文件config.js配置：

    CKEDITOR.editorConfig = function( config ) {
       //显示窗口设置
       config.toolbarGroups = [
           { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
           { name: 'styles', groups: [ 'styles' ] },
           { name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
           { name: 'colors', groups: [ 'colors' ] },
           { name: 'forms', groups: [ 'forms' ] },
           { name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
           '/',
           { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
           { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
           { name: 'links', groups: [ 'links' ] },
           { name: 'insert', groups: [ 'insert' ] },
           { name: 'tools', groups: [ 'tools' ] },
           { name: 'others', groups: [ 'others' ] },
           { name: 'about', groups: [ 'about' ] }
       ];
       //移除多于按钮
       config.removeButtons = 'Source,Save,NewPage,Preview,Print,Templates,Scayt,Form,Checkbox,Radio,TextField,Textarea,Select,Button,ImageButton,HiddenField,Blockquote,CreateDiv,BidiLtr,BidiRtl,Language,Link,Unlink,Anchor,Flash,Smiley,Iframe,Styles,ShowBlocks,About';
        //设置图片上传时，预览中的文字为空
       config.image_previewText=' ';
       //开启图片上传
       config.filebrowserImageUploadUrl= "ImageUpload";
       config.format_tags = 'p;h1;h2;h3;pre';
       //设置显示高度
       config.height = 400;
       移除图片上传按钮
       config.removeDialogTabs = 'image:advanced;link:advanced';

       //当用户键入TAB时，编辑器走过的空格数，( ) 当值为0时，焦点将移出编辑框 plugins/tab/plugin.js
       config.tabSpaces = 4;

       //从word中粘贴内容时是否移除格式
       config.pasteFromWordRemoveStyle = false;
       //设置快捷键
       config.keystrokes =[[ CKEDITOR.CTRL + 13 /*Enter*/, 'maximize' ],
                           [ CKEDITOR.ALT + 121 /*F10*/, 'toolbarFocus' ], //获取焦点
                   [ CKEDITOR.ALT + 122 /*F11*/, 'elementsPathFocus' ], //元素焦点
                   [ CKEDITOR.SHIFT + 121 /*F10*/, 'contextMenu' ], //文本菜单
                   [ CKEDITOR.CTRL + 90 /*Z*/, 'undo' ], //撤销
                   [ CKEDITOR.CTRL + 89 /*Y*/, 'redo' ], //重做
                   [ CKEDITOR.CTRL + CKEDITOR.SHIFT + 90 /*Z*/, 'redo' ], //
                   [ CKEDITOR.CTRL + 76 /*L*/, 'link' ], //链接
                   [ CKEDITOR.CTRL + 66 /*B*/, 'bold' ], //粗体
                   [ CKEDITOR.CTRL + 73 /*I*/, 'italic' ], //斜体
                   [ CKEDITOR.CTRL + 85 /*U*/, 'underline' ], //下划线
                   [ CKEDITOR.ALT + 109 /*-*/, 'toolbarCollapse' ]
           ];
       //设置字体
       config.font_names='黑体/黑体;楷体/楷体_GB2312;隶书/隶书;幼圆/幼圆;微软雅黑/微软雅黑;'+config.font_names;
    };

菲宇

发布了375 篇原创文章 · 获赞 468 · 访问量 167万+

他的留言板关注

猜你喜欢