CKEditor插件的使用

富文本编辑很多地方需要用到，其中比较有名的是CKEditor，以前叫FCKEditor，虽然百度出的UEditor也比较火，但还是老牌子好用。

首先，去官网http://www.ckeditor.com下载最新版3.6.5的。然后删除_samples和_source文件夹，在项目根目录下新建个文件夹，名字自己估摸着起，叫ckeditor吧，然后把剩余的全部拷贝进去。初步的配置就这样。

下面是使用方法。

首先页面中需要引用ckeditor.js这个文件，按上述路径，就是<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>

然后在使用的位置如下代码所示：

<textarea name="content" id="content"></textarea><script type="text/javascript">var editorContent;$(document).ready(function () {editorContent = CKEDITOR.replace("content");});</script>

然后就是一些常用接口

获得值：getData()

设置值：setData("******")

追加插入值：insertHTML("*******")

上述代码中，editorContent获得了实例，就可以通过editorContent.getData()获得编辑框里的html内容了

获得的值和设置的值以及插入的都是html格式的字符串

（如果你用的MVC的话，因为有特殊字符默认是不允许提交的，需要在HttpPost的action上加[AcceptVerbs(HttpVerbs.Post)]和[ValidateInput(false)]属性标记

如下图：

        [HttpPost][AcceptVerbs(HttpVerbs.Post)][ValidateInput(false)]public ActionResult Create(string title, string content, string id){//todo}

）

还有个就是编辑框的自定义配置，

打开ckeditor文件夹下的config.js文件，如下图所示：

/*
Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
For licensing, see LICENSE.html or http://ckeditor.com/license
*/CKEDITOR.editorConfig = function( config )
{// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';
};

可以自己配置一些东西，例如，要设置编辑框的宽度为500px，就添加一句config.width=500;即可，其他的自己试试

还有就是toolbar的配置，有两个Full和Basic，默认是Full，可以通过上面的config.toobar="Basic";设置成简单模式。插件本身这两种模式的定义如下

注意工具按钮是分组的，一个name内的大括号就是一个工具按钮分组，items后边是具体的按钮，“/”表示工具栏换行，“-”表示工具图标之间的中隔线“|”

config.toolbar = 'Full';config.toolbar_Full =
[{ name: 'document', items : [ 'Source','-','Save','NewPage','DocProps','Preview','Print','-','Templates' ] },{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },{ name: 'forms', items : [ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },'/',{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv','-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },{ name: 'links', items : [ 'Link','Unlink','Anchor' ] },{ name: 'insert', items : [ 'Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },'/',{ name: 'styles', items : [ 'Styles','Format','Font','FontSize' ] },{ name: 'colors', items : [ 'TextColor','BGColor' ] },{ name: 'tools', items : [ 'Maximize', 'ShowBlocks','-','About' ] }
];config.toolbar_Basic =
[['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']
];

它们和图标是对应的

例如上图中Basic模式中的几个按钮就对应着

['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink','-','About']

所以要自己定义想显示的图标，就得照着图，找对应的字符串是什么

然后在config.js中配置，我自己配置的代码如下：

CKEDITOR.editorConfig = function (config) {// Define changes to default configuration here. For example:// config.language = 'fr';// config.uiColor = '#AADC6E';config.width = 550;config.toolbar = 'MyToolbar';config.toolbar_MyToolbar =[['Undo', 'Redo', '-', 'SelectAll', 'RemoveFormat'],['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],['Maximize'],'/',['Format', 'Font', 'FontSize'],['TextColor', 'BGColor'],['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript']];
};

效果如下图：

工具栏的定义英汉对照说明：
-
Save = 保存(提交表单)
NewPage = 新建
Preview = 预览
- = 分割线
Templates = 模板
Cut = 剪切
Copy = 复制
Paste = 粘贴
PasteText = 粘贴为无格式文本
PasteFromWord = 从 MS WORD 粘贴
-
Print = 打印
SpellChecker = 拼写检查
Scayt = 即时拼写检查
Undo = 撤销
Redo = 重做
-
Find = 查找
Replace = 替换
-
SelectAll = 全选
RemoveFormat = 清除格式
Form = 表单
Checkbox = 复选框
Radio = 单选框
TextField = 单行文本
Textarea = 多行文本
Select = 列表/菜单
Button = 按钮
ImageButton = 图片按钮
HiddenField = 隐藏域
/
Bold = 加粗
Italic = 倾斜
Underline = 下划线
Strike = 删除线
-
Subscript = 下标
Superscript = 上标
NumberedList = 编号列表
BulletedList = 项目列表
-
Outdent = 减少缩进量
Indent = 增加缩进量
Blockquote = 块引用
CreateDiv = 创建DIV容器
JustifyLeft = 左对齐
JustifyCenter = 居中
JustifyRight = 右对齐
JustifyBlock = 两端对齐
BidiLtr = 文字方向从左到右
BidiRtl = 文字方向从右到左
Link = 插入/编辑超链接(上传文件)
Unlink = 取消超链接
Anchor = 插入/编辑锚点链接
Image = 图像(上传)
Flash = 动画(上传)
Table = 表格
HorizontalRule = 插入水平线
Smiley = 插入表情
SpecialChar = 插入特殊符号
PageBreak = 插入分页符
/
Styles = 样式快捷方式
Format = 文本格式
Font = 字体
FontSize = 文字大小
TextColor = 文字颜色
BGColor = 背景颜色
Maximize = 全屏编辑模式
ShowBlocks = 显示区块
-
About = 显示关于

Source = 源码模式

CKEditor插件的使用相关推荐

UI标签库专题十二：JEECG智能开发平台 ckeditor(ckeditor插件标签)
1. ckeditor(ckeditor插件标签) 1.1. 参数属性名类型描述是否必须默认值 name string 属性名称是 null value string 默认值否 n ...
Ckeditor插件
开发工具与关键技术:VS ckeditor 作者:微凉之夏撰写日期:2019年06月27日我们在使用这个插件时只需要在你所要的页面中引入ckeditor.js就可以了,然后我们再去另外的一个con ...
ckeditor java 使用_如何覆盖默认插件并使用它们拥有按钮ckeditor
我知道这个问题被问到几个地方,但没有人符合我的要求 . 我想使用默认的ckeditors插件到我自己的按钮和图标 . 可以说,我有一些按钮和图标,现在我想让他们控制ckeditor像普通的ckedit ...
12.HTML编辑器（CKEditor、CKFinder集成）
CKEditor原名为FckEditor,是著名的HTML编辑器,可以在线编辑HTML内容. 配置参考文档:主要将ckeditor中的lang.plugins.skins.ckeditor.js.co ...
解决ckeditor富文本在layui 弹框中大小字体等下拉不显示
css <div class="layui-input-inline" style="width:1100px;"><div class=&q ...
ckeditor编辑的使用方法
一.下载安装Ckeditor,并将其整合到项目中 1.什么是CKeditor?为什么要使用它? 我们在做门户网站或者公文系统时,客户经常要求在录入时能够更改字体样式.大小.颜色并具备插入图片的功能.而 ...
富文本编辑器CKEditor 5的使用
富文本编辑器CKEditor 5的使用记录了使用CKEditor的过程, 特殊强调,这里使用的是CKEditor5 向网页中添加CKEditor 只是向页面中添加该编辑器不需要什么特殊的操作,遵从以 ...
CKeditor配置大全
文章分类:Web前端第一步:基本配置 CKEditor + CKFinder 配置流水账: CKEditor: 1.解压CKEditor到webRoot目录,在应用页面加载其ckeditor.js ...
CKEditor配置数学公式编辑器
前言最近因为在看一些数学方面的书籍,想着写一些日记用于分享,无奈发现好像博客里面好不能插入公式,只能截图的方式来在展示公式,后面发现CKEditor是可以集成公式编辑器的,下面说说我在做的时候遇到的 ...

CKEditor插件的使用

CKEditor插件的使用相关推荐

最新文章

热门文章