CKeditor使用心得

前言

作为一名大四的毕业在即的学生，毕业设计是逃不掉的一个事情。

在我的毕业设计里，运用到了一个富文本编辑器CKeditor，并且踩了很多的坑。

下面我就详细的介绍一下我踩过的坑，以及解决的办法。

正文

CKeditor是个啥东西

CKeditor是当前比较流行的在线网页富文本编辑器，能够在线编辑一些文章并且可以添加很多的符号或者对文章进行相应的操作。

CKeditor官网

我用的是版本是Ckeditor4的版本

CKeditor4官网

里面简单展示了CKeditor的用法以及主要效果。

CKeditor怎么操作

下载压缩包

首先我是用的JS进行操作，首先要下载下来主要的压缩包。

CKeditor4下载页面

Basic Package是基础压缩包，代表着最基本的功能模块，主要是对文字进行操作的模块，以及图片的处理。

Standard Package是标准压缩包，代表更复杂的功能模块。

Full Package是除了自定义的压缩包之外，拥有最复杂功能模块的压缩包。

最下方的Online Builder在线自定义功能模块的压缩包下载方式。这个里面涉及到我踩的一个坑，之后在文章里会说到。

引入文件

将下载完成的压缩包解压缩放在网站的资源目录下，对里面的js文件进行引入，建议是在页面头部进行引入，以便于在页面文档加载完成之前加载文件js。

1	<script src="/static/bower_components/ckeditor/ckeditor.js"></script>

HTML渲染

引入js文件之后，需要在文档中，在你需要该文本编辑器的地方放入相应的代码，以便于js文件对HTML进行渲染。

1
2
3

<div>
	<textarea id="ckeditor" rows="10" cols="80"></textarea>										
</div>

这段代码就是在文档中需要添加的代码，CKeditor是对于textarea标签进行渲染的，所以必须是这个标签，标签的id是需要的以便于之后的js在页面中的渲染。

JS初始化

当你完成上述两个操作之后，需要在js中对CKeditor进行初始化，从而让CKeditor可以在页面进行渲染。

1	CKEDITOR.replace('ckeditor');

这样初始化之后就会在界面中渲染出编辑器的界面，当然这是最初级的初始化，没有涉及到更加复杂的配置。

下面就开始讲我在毕业设计里踩过的坑。

CKeditor图片处理问题

具体问题是啥

我毕业设计里面用CKeditor的一个原因就是需要在线编辑图片，对图片进行上传，并且可以在此放到本地浏览。

在CKeditor编辑器里面默认集成了图片功能。

CKeditor4图片功能界面

上图就是基础CKeditor编辑器里面自带的图片功能(其中上传模块是我后期配置的，文章下方会讲解怎么配置)

可以看出图片功能主要是可以设置大小以及对齐方式还有间距的设置，同时可以设置替换的文字以及图片标题。

首先，我在最开始使用CKeditor图片功能的时候是懵逼的，我一开始以为就只能加载在线的图片，需要图片的在线链接记性图片的获取。

后来在网上查了一下才发现是需要进行配置的，首先要找到你刚才安装CKeditor的文件目录中的plugins/image/dialogs/image.js

在这个文件中找到

1 2	id: "Upload", hidden: !0,

将 !0 改为 false，就会在图片页面中显示上传功能。

然后我就发现，选择图片之后选择上传到服务器是没有任何反应的，并且有可能会显示内部服务器错误。

这个时候需要一个好基友上线 CKFinder，这是和CKeditor在上传文件的时候成对使用插件。

CKFinder官网

该插件主要是和CKeditor一起出现使用，主要是用来上传文件包括图片。

下载CKfinder压缩包

在CKfinder官网下载

下载压缩包并且解压缩到你CKeditor的同级目录下，然后就是最关键的一步。

JS初始化重新配置

在你下在并且安装解压CKfinder之后，需要对你的JS进行配置，以便于让CKeditor与CKfinder协调工作，具体代码如下

CKEDITOR.replace('newquestion', {
	extraPlugins: 'image,uploadimage',
	toolbar: [{
			name: 'clipboard',
			items: ['Undo', 'Redo']
		},
		{
			name: 'styles',
			items: ['Styles', 'Format']
		},
		{
			name: 'basicstyles',
			items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
		},
		{
			name: 'paragraph',
			items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
		},
		{
			name: 'links',
			items: ['Link', 'Unlink']
		},
		{
			name: 'insert',
			items: ['Image', 'Table']
		},
		{
			name: 'tools',
			items: ['Maximize']
		},
		{
			name: 'editing',
			items: ['Scayt']
		}
	],
	// Configure your file manager integration. This example uses CKFinder 3 for PHP.
	filebrowserBrowseUrl: '/static/bower_components/ckfinder/ckfinder.html',
	filebrowserImageBrowseUrl: '/static/bower_components/ckfinder/ckfinder.html?type=Images',
	filebrowserUploadUrl: '/static/bower_components/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
	filebrowserImageUploadUrl: '/static/bower_components/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',

	// Upload dropped or pasted images to the CKFinder connector (note that the response type is set to JSON).
	uploadUrl: '/static/bower_components/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files&responseType=json',

	// Reduce the list of block elements listed in the Format drop-down to the most commonly used.
	format_tags: 'p;h1;h2;h3;pre',
	// Simplify the Image and Link dialog windows. The "Advanced" tab is not needed in most cases.
	removeDialogTabs: 'image:advanced;link:advanced',
});

现在配置之后就能够将图片上传到本地服务器的文件夹中，同时默认的上传目录是在网站根目录的ckfinder目录下。

图片放大缩小操作

在之前提到过在线自定义CKeditor压缩包，现在就是自定义压缩包其作用的时候

首先要先看CKeditor官方文档关于图片操作插件的说明

这个界面说明了图片插件怎么用，该图片插件是没有集成在CKeditor文件之中的，所以要用户手动添加插件。

所以这个时候要回到最初的下载界面，选择Online Builder模式下载压缩包，进入下图所示的界面。

CKFinder自定义文件页面

可以选择Standard模式，然后在下图的界面左侧框中找到 #Enhanced Image#，然后点击中间的左箭头按钮，将插件放到自定义的压缩包内。

然后选择下载，最后将压缩包解压覆盖到最初的CKeditor目录，当然要讲上述的配置重新来一次。OvO。

现在就可以了，你可以进行上传图片并且可以对图片进行放大缩小的操作。

CKeditor编辑器内容获取

这个是最简单的，就是一段代码的事。

1	var content = CKEDITOR.instances.ckeditor1.getData();

ckeditor1是你textarea标签的name属性。

CKeditor编辑器内容设置

这个意思是将获取的CKeditor编辑器内容重新渲染在CKeditor编辑器中，当然也是一段代码的事。

1	CKEDITOR.instances.ckeditor1.setData('你的内容');

同样ckeditor1是你要放内容的textarea标签的name属性。

结语

目前，我在毕业设计中用到的基本就是这些功能，当然CKeditor里面还有更多的功能以及需要配置的方法。

我也没有时间去研究了，到此就先告一段落吧。