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,在这个隐藏域后面添加一个文本加点来显示今天的日期,然后在把这个隐藏域删除掉。