专栏首页菲宇前端使用ckeditor

前端使用ckeditor

版权声明:本文为博主原创文章,遵循 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配置:

    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;
     };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • redis缓存数据库

    NoSQL(NoSQL = Not Only SQL ),意即“不仅仅是SQL”,泛指非关系型的数据库,随着互联网web2.0网站的兴起,传统的关系数据库在应...

    菲宇
  • Django xadmin图片上传与缩略图处理

    默认情况下,StdImageField 存储图像而不修改文件名。 如果您想使用更一致的文件名,可以使用内置的上传调用 比如:

    菲宇
  • python之反射

    python中的反射功能是由以下四个内置函数提供:hasattr、getattr、setattr、delattr,改四个函数分别用于对对象内部执行:检查是否含有...

    菲宇
  • Spring IOC容器分析(1) -- BeanFactory

    搭建好源码阅读环境后,就可以慢慢走进Spring殿堂了。IOC是Inversion of Control的缩写,控制反转的意思。很多人可能都知道IOC是spri...

    YGingko
  • 基于K8s的Jenkins持续集成实战(上)

    Jenkins是一款广泛受到的欢迎的持续集成工具,有着丰富的插件以及扩展能力,基本上能够满足大多数团队的需求。本文将从工具使用的角度,来讲述如何在kuberne...

    100000798482
  • 小朋友学Java(12):包

    包(package)是Java语言提供的一种区别类名字命名空间的机制,它是类的一种文件组织和管理方式、是一组功能相似或相关的类或接口的集合。Java packa...

    海天一树
  • 中国台湾大学林轩田机器学习技法课程学习笔记8 -- Adaptive Boosting

    上节课我们主要开始介绍Aggregation Models,目的是将不同的hypothesis得到的gtg_t集合起来,利用集体智慧得到更好的预测模型G。首先我...

    红色石头
  • 融资+上市,内外兼修的创业者,真的可以为所欲为

    2018年对于很多创业者和准备创业者来说,是一个充满机遇,同时又更趋于焦虑的一年。

    齿轮易创说互联网
  • Python 端口扫描(全连接,无多线程

    ps: 关于Python中的 if __name__ == '__main__'  的解释可以参考:https://www.cnblogs.com/kex1n/...

    用户2398817
  • 数据猿专访 | 罗斌:微软加速器北京创投圈的神秘“掌门人”

    数据猿导读 微软加速器自2012年7月在中国北京启动以来,以往入选团队的入选率从未超过2%。为什么这家加速器会有“比哈佛还难进”的口碑?它的掌门人是谁?这篇文章...

    数据猿

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动