ckeditor_学习(1) 基本使用
ckeditor 是一款强大的web编辑器。工作需要用到记录学习和使用过程,版本是ckeditor4。
1.下载ckeditor的安装包,建议下载标准版的。
j将ckeditor.js 引入页面,调用CKEDITOR。replace() 方法初始编辑器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>例子</title>
<!--正确的js路径-->
<script src="../ckeditor.js"/>
</meta></head>
<body>
<form>
<textarea name="editor1" id="editor1" rows="10" cols="80">
文章正文
</textarea>
<script>
// 替换<textarea id="editor1"> with a CKEditor
// 直接替换
CKEDITOR.replace( 'editor1' );
</script>
</form>
</body>
</html>
建议直接引用现在的包中的js,因为需要config.js 的依赖。
可以看到编辑器已经初始化好了。
2.编辑器的基本展现形式分为两种,一种是经典的样式,一中的行内的样式
2.1 经典的样式
调用CKEDITOR.replace() 方法初始编辑器
2.2 行内的样式
是通过html5 中的contenteditable 属性来实现的
html代码:
<div id="editor1" contenteditable="true">
<h1>行内编辑器!</h1>
<p>这是一个普通段落</p>
</div>
js调用代码:
<script>
// Turn off automatic editor creation first.
CKEDITOR.disableAutoInline = true;
CKEDITOR.inline( 'editor1' );
</script>
这是点击段落文,就能够进入文本编辑状态了。
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.皮肤安装
ckeditor_学习(1) 基本使用的更多相关文章
- ckeditor_学习(2) 功能概览
这篇文章用来说明 ckeditor 的所有可配置的功能,分为终端用户配置和开发者配置 1.终端用户配置 用户接口 – 设置编辑器的UI和语言 Editor 尺寸设置 – 设置编辑器的尺寸 插入内容 – ...
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
- ABP入门系列(1)——学习Abp框架之实操演练
作为.Net工地搬砖长工一名,一直致力于挖坑(Bug)填坑(Debug),但技术却不见长进.也曾热情于新技术的学习,憧憬过成为技术大拿.从前端到后端,从bootstrap到javascript,从py ...
- 消息队列——RabbitMQ学习笔记
消息队列--RabbitMQ学习笔记 1. 写在前面 昨天简单学习了一个消息队列项目--RabbitMQ,今天趁热打铁,将学到的东西记录下来. 学习的资料主要是官网给出的6个基本的消息发送/接收模型, ...
- js学习笔记:webpack基础入门(一)
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- Unity3d学习 制作地形
这周学习了如何在unity中制作地形,就是在一个Terrain的对象上盖几座小山,在山底种几棵树,那就讲一下如何完成上述内容. 1.在新键得项目的游戏的Hierarchy目录中新键一个Terrain对 ...
- 《Django By Example》第四章 中文 翻译 (个人学习,渣翻)
书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:祝大家新年快乐,这次带来<D ...
- 菜鸟Python学习笔记第一天:关于一些函数库的使用
2017年1月3日 星期二 大一学习一门新的计算机语言真的很难,有时候连函数拼写出错查错都能查半天,没办法,谁让我英语太渣. 关于计算机语言的学习我想还是从C语言学习开始为好,Python有很多语言的 ...
随机推荐
- zabbix 配置维护
Centos 6.5, Zabbix 3.0.4 在配置了邮件报警后,如果正常的软硬件变更(比如发版)也不停的发邮件肯定很烦,这个时候就需要在操作前挂上维护: 浏览器登录zabbix后台,Config ...
- 【题解】JSOIWC2019 Round 5
题面: 题解: T1: 算法1: 枚举每个灯塔的方向,并分别判断是否有解.时间复杂度O(K*4^K). 预计得分:50-70分 算法2: 不难发现,当k≥4的时候一定有解,将最靠左的两个下面的朝右上. ...
- 安装GDB-ImageWatch ,在QT中查看图像
GDB_ImageWatch是在Linux下基于QT编写图像处理程序的调试程序. 由于并非像ImageWatch一样由官方提供,而是在github上以代码的方式进行提供,我们在使用的时候需要自己编译, ...
- Linux下的串口调试工具——Xgcom
Linux下的串口调试工具——Xgcom xgcom的下载网址:https://code.google.com/archive/p/xgcom/downloads (1)安装必须的库 apt-get ...
- LaF: Fast Access to Large ASCII Files
貌似可以随机读取dataframe格式的文本文件.
- English trip V2 - A 1. Fastival Teacher:Julia Key:
In this lesson you will learn to talk about dates and times. 课上内容(Lesson) Tell your tutor about a fe ...
- 微信小程序 密码键盘 - 密码页面组件 (原生小程序代码)
1.WXML页面 <view> <!--<section class="mask" catchtap="canclePwd" wx:if ...
- CentOS6上ftp服务器搭建实战
1.安装程序包 [root@node1 ~]$ yum install -y vsftpd[root@node1 ~]$ yum install -y lftp # 安装测试软件 2.启动vsftpd ...
- day042 css 选择器
css(Cascading Style Sheet) 层叠样式表,定义了如何显示HTML元素,给HTML设置样式,让它看起来更好 一.css语法 css样式包括两部门,选择器(给谁的样式)和声明(什么 ...
- maven--插件篇(assembly插件)
maven-assembly可以通过dependencySets将依赖的jar包打到特定目录. 1. 简介 简单的说,maven-assembly-plugin 就是用来帮助打包用的,比如说打出一个什 ...