CKEditor设置背景图片及宽高

　　CKEditor是一款强大的HTML在线文字编辑器，它是新一代的FCKeditor，被广泛的运用于各大网站。我们可以很方便的将这款编辑器引入到自己的网站中。其他几款可视化HTML编辑器相关介绍见如下链接：

http://www.oschina.net/project/tag/172/wysiwyg

1 在网页中引入CKEditor

       将下载后的CKEditor放到WEB工程中，在HTML页面中加入引入js文件语句，就可以轻松的使用CKEditor编辑器了。

　<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>

　　HTML页面中使用textarea元素，通过CKEditor API创建编辑器实例。

<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>的标签。如果想动态的设置编辑器的背景图片，我们在线编辑的时候内容都显示在图片之上，就需要其他的方式来操作了。具体的效果如下图所示：

 

　　首先，要实现一个上传图片的功能，需要将背景图片上传到服务器中。

　　然后，可以通过如下语句获取编辑器中的内容

　var content = CKEDITOR.instances.editor.getData();

　

　　获取到的内容其实就是点击源码后的结果，这是一段html片段。获取到内容后，可以将这段html包裹在一个div中，然后通过CKEDITOR的方法将html显示出来。

var html ="<div id='imgBox' style='background-image:url(\" " + 上传的背景图片 + " \")' >" + content + "</div>";

CKEDITOR.instances.editor.setData(html);

　　如果要动态的替换背景图片，可以通过字符串处理或者DOM操作将id为imgBox的背景图片换掉即可。

 

4 CKEditor编辑器中的隐藏域

　　这是一个很有用的标签，尤其是在制作打印模板或者动态显示数据的时候。这个工具对应的html标签是 type=”hidden”。

 

　　假设创建一个day的隐藏域，生成后的内容如下：

<input name="day" type="hidden" />

　　我们可以将整个编辑器的内容保存起来，当做一个模板，然后通过DOM操作这个html片段，比如通过jquery，在这个隐藏域后面添加一个文本加点来显示今天的日期，然后在把这个隐藏域删除掉。