一、CKEditor介绍 |
官网地址:http://ckeditor.com
CKEditor下载地址:http://ckeditor.com/download
CKFinder(免费版本)下载地址:http://cksource.com/ckfinder/download
CKEditorAPI:http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
二、安装使用 |
本文使用版本:CKEditor:4.4.2,CKFinder:2.4.1
1.将下载解压后的文件,放到同级目录下。需要注意的是CKFinder的_source文件夹下存放的是上传图片源码。两个文件夹有很多东西是不需要的,根据个人情况可做适当删除。
2.引用CKEditor核心JS文件<script src="~/Content/js/plugins/ckeditor/ckeditor.js"></script>
3.替换textarea标签。
1
2
3
4
5
|
CKEDITOR.replace(
'textarea_nameorid'
,
{
toolbar :
'Basic'
,
uiColor :
'#9AB8F3'
});
|
options也可以直接写到config.js文件中
1
2
3
4
5
|
CKEDITOR.editorConfig = function( config )
{
config.toolbar=
'Basic'
;
config.uiColor =
'#9AB8F3'
;
};
|
定制自己的config.js
1
2
3
4
|
CKEDITOR.replace(
'textarea_nameorid'
,
{
customConfig :
'/custom/ckeditor_config.js'
});
|
4.新版CKEditor取消了自动同步内容功能,提交表单前手动同步内容
1
2
3
|
for
(instance
in
CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
|
5.新版CKEditor取消了上次本地图片功能。为了实现本地图片上传,需要配合使用CKFinder插件
1>添加bin目录下的dll项目引用。(注:代码是开源的,不懒的同志可以从_source目录下打开项目,编写适合自己的代码)
2>修改config.ascx文件
1
2
3
4
|
public
override
bool
CheckAuthentication()
{
return
true
;
}<br><br> BaseUrl =
"/Upload/CKFinder/"
|
3>引用CKFinder核心JS文件<script src="~/Content/js/plugins/ckfinder/ckfinder.js"></script>
4>关联CKEditor和CKFinder这两个插件,打开CKEditor的config.js,贴入以下代码
1
2
3
4
5
6
7
8
9
10
11
12
13
|
var
ckfinderPath =
"/Content/js/plugins/ckfinder"
;
//ckfinder路径
config.filebrowserBrowseUrl = ckfinderPath +
'/ckfinder.html'
;
config.filebrowserImageBrowseUrl = ckfinderPath +
'/ckfinder.html?type=Images'
;
config.filebrowserFlashBrowseUrl = ckfinderPath +
'/ckfinder.html?type=Flash'
;
config.filebrowserUploadUrl = ckfinderPath +
'/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files'
;
config.filebrowserImageUploadUrl = ckfinderPath +
'/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images'
;
config.filebrowserFlashUploadUrl = ckfinderPath +
'/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash'
;
|