CKEditor是一款强大的HTML在线文字编辑器，它是新一代的FCKeditor，被广泛的运用于各大网站。我们可以很方便的将这款编辑器引入到自己的网站中。其他几款可视化HTML编辑器相关介绍见如下链接：
http://www.oschina.net/project/tag/172/wysiwyg
1 在网页中引入CKEditor
将下载后的CKEditor放到WEB工程中，在HTML页面中加入引入js文件语句，就可以轻松的使用CKEditor编辑器了。
|
1 |
<script type="text/javascript"
src="../ckeditor/ckeditor.js"></script> |
HTML页面中使用textarea元素，通过CKEditor API创建编辑器实例。
|
1
2
3 |
<textarea cols="80"
id="editor"
name="editor"
rows="10"></textarea><script type="text/javascript">CKEDITOR.replace(‘editor‘);</script> |
这样就创建了一个HTML编辑器，页面效果如图所示：
2 修改CKEditor的宽和高
可以在 ckeditor/config.js中设置编辑器的widht和height，这样编辑器初始化时会自适应到该大小。如果有多个页面显示CKEditor编辑器，可以通过 CKEDITOR.replace(‘editor‘) 创建编辑器实例时来设置高和宽
CKEDITOR.replace(‘editor‘, { height: ‘384px‘, width: ‘852px‘ });该语句也可以设置编辑器的皮肤、工具条等其他常用元素。
3 动态设置编辑器的背景图片
CKEditor编辑器中有个源码图标，点击这个图标可以看到编辑器中的内容所对应的html语句。CKEditor编辑器中也有插入图片的功能，但是这个其实就是插入了一个<img>的标签。如果想动态的设置编辑器的背景图片，我们在线编辑的时候内容都显示在图片之上，就需要其他的方式来操作了。具体的效果如下图所示：
首先，要实现一个上传图片的功能，需要将背景图片上传到服务器中。
然后，可以通过如下语句获取编辑器中的内容
|
1 |
var
content = CKEDITOR.instances.editor.getData(); |
获取到的内容其实就是点击源码后的结果，这是一段html片段。获取到内容后，可以将这段html包裹在一个div中，然后通过CKEDITOR的方法将html显示出来。
|
1
2 |
var
html ="<div id=‘imgBox‘ style=‘background-image:url(\" "
+ 上传的背景图片 + " \")‘ >"
+ content + "</div>";<br>CKEDITOR.instances.editor.setData(html); |
如果要动态的替换背景图片，可以通过字符串处理或者DOM操作将id为imgBox的背景图片换掉即可。
4 CKEditor编辑器中的隐藏域
这是一个很有用的标签，尤其是在制作打印模板或者动态显示数据的时候。这个工具对应的html标签是 type=”hidden”。
假设创建一个day的隐藏域，生成后的内容如下：
|
1 |
<input name="day"
type="hidden"
/> |
我们可以将整个编辑器的内容保存起来，当做一个模板，然后通过DOM操作这个html片段，比如通过jquery，在这个隐藏域后面添加一个文本加点来显示今天的日期，然后在把这个隐藏域删除掉。
CKEditor设置背景图片及宽高,布布扣,bubuko.com
原文：http://www.cnblogs.com/sigal/p/3614499.html