博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ckeditor_学习(1) 基本使用
阅读量:4986 次
发布时间:2019-06-12

本文共 1971 字,大约阅读时间需要 6 分钟。

ckeditor 是一款强大的web编辑器。工作需要用到记录学习和使用过程,版本是ckeditor4。

1.下载ckeditor的安装包,建议下载的。

j将ckeditor.js 引入页面,调用CKEDITOR。replace() 方法初始编辑器

            
例子

建议直接引用现在的包中的js,因为需要config.js 的依赖。 

可以看到编辑器已经初始化好了。

 

2.编辑器的基本展现形式分为两种,一种是经典的样式,一中的行内的样式

2.1 经典的样式

调用CKEDITOR.replace() 方法初始编辑器

2.2 行内的样式

是通过html5 中的contenteditable 属性来实现的

html代码:

行内编辑器!

这是一个普通段落

js调用代码:

这是点击段落文,就能够进入文本编辑状态了。

 3.ckeditor的三种配置方式

1.在页面中配置

这是最好的一种配置方式,不用依赖于外部文件维护方便。

CKEDITOR.editorConfig = function( config ) {    config.language = 'fr';    config.uiColor = '#AADC6E';};

 

2.使用config.js

在ckeditor.js 的文件目录放置config.js 文件,为CKEDITOR编写 editorConfig 方法

 

CKEDITOR.editorConfig = function( config ) {    config.language = 'fr';    config.uiColor = '#AADC6E';};

 

3.自定义config.js

可以自定义一个config.js,同样为CKEDITOR编写 editorConfig 方法,格式和config.js 一样不过这样可以在项目制定的位置放置cofig文件。制定的文件目录是相对于ckeditor.js 的相对文件目录或者引用绝对路径

CKEDITOR.replace( 'editor1', {    customConfig: '/custom/ckeditor_config.js'});

 

优先级顺序  2 < 3 < 1

 

4. 内容过滤(ACF,Advanced Content Filter)

可以对编辑器内容进行过滤,编辑器默认是打开过滤器的(出于安全考虑,方式xss攻击)<这是在客户端做过滤,如果服务器端能够做过滤就可以考虑不用再客户端做>

1. 关闭编辑器的内容过滤

 config.allowedContent = true;

2.使用编辑器的内容过滤,但对例外的情况进行编辑,分为允许标签和内容,不允许的标签和内容

 // Allow <dl>, <dt>, <dd>. config.extraAllowedContent = 'dl dt dd';  用来定义例外被允许的标签 dl dt dd

// Disallow <a> element. The Link button will be removed from the toolbar. config.disallowedContent = 'a'; 用来定义不被允许的标签,这是会对工具栏中的按钮进行相应的关闭,如果有连接按钮将会被禁止。

 

 5. 数据获取

ckeditor 对于获取数据很方便

var data = CKEDITOR.instances.editor1.getData(); // editor1 是编辑设置的id

编辑器内容的改变都会出发编辑器change事件,通过对编辑器事件进行监听可以完成自动保存的相关的功能。

 

editor.on( 'change', function( evt ) { // getData() returns CKEditor's HTML content. console.log( 'Total bytes: ' + evt.editor.getData().length ); });

 

6.插件和皮肤安装

可以通过ckeditor 网站的online-builder 很方便的安装插件和更换皮肤

1.插件安装

2.皮肤安装

转载于:https://www.cnblogs.com/pipu-qiao/p/8488737.html

你可能感兴趣的文章
使用时间戳解决缓存问题
查看>>
HTTP的客户端识别与cookie机制
查看>>
【SHOI2015】脑洞治疗仪(恶心的线段树,区间最大子段和)
查看>>
Educational Codeforces Round 17
查看>>
源码安装pipelineDB之CentOS7
查看>>
剑指Offer 斐波那契数列
查看>>
C#: string与byte[]互转
查看>>
hdu 5381 The sum of gcd
查看>>
控制台修改Mysql 密码
查看>>
C 【block类型全方位详解】
查看>>
蚂蚁拼图
查看>>
java是传值还是传引用
查看>>
angularJS快速入门
查看>>
markdown基本语法
查看>>
【译】为什么估算很难?!从旧金山到洛杉矶的旅行
查看>>
半年没玩机会碰到驱动了,最近才有机会研究了下所谓防黑墙demo
查看>>
我记录开源系统1.6源码解析(一)
查看>>
256. Paint House房屋染色
查看>>
671. Second Minimum Node In a Binary Tree 非递减二叉树中第二小的元素
查看>>
747. Largest Number At Least Twice of Others比所有数字都大两倍的最大数
查看>>