前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端使用ckeditor

前端使用ckeditor

作者头像
菲宇
发布2019-10-22 14:55:36
1.4K0
发布2019-10-22 14:55:36
举报
文章被收录于专栏:菲宇菲宇

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:https://blog.csdn.net/bbwangj/article/details/100025915

一、导入js文件

<script src="js/plugins/ckeditor/ckeditor.js"></script>

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

<textarea rows="20" class="form-control" name="liasionContent" id="liasionContent"></textarea>

三、配置

js配置:

CKEDITOR.replace( 'liasionContent' );

配置文件config.js配置:

代码语言:javascript
复制
    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;
     };
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019-08-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档