今天介绍的一款百度出品的富文本编辑器UEditor!体积小、功能强大、安全可靠。UEditor已经应用到百度百科、百度经验、百度空间等多个项目。下面就介绍一下UEditor编辑器的配置方法。
1.下载ueditor编辑器
最新版下载地址:http://www.weste.net/2011/9-28/baidu-UEditor.html
解压后目录结构如下:
* _examples:直接打开index.html即可看到效果(注:请将项目部署到服务器上,避免对话框图片无法加载等跨域问题)
* demo:一些常用的示例和实现方式
* _src:所有源码,部署时可删除,二次开发时可使用
* dialogs:弹出对话框所引用的页面
* themes:样式和图片
* editor_ui_all.js:包含全部功能的js文件
* editor_ui_all_min.js:包含全部功能的压缩文件,即editor_ui_all.js的压缩版
* editor_config.js:编辑器的配置文件,这个脚本需要在其他脚本之前引用
2.部署编辑器到您的网站程序目录里,例如:http://您的域名/ueditor
3.修改HTML页面
A. 在需要显示编辑器的位置准备一个容器,容器可以是textarea或者div。
//id可以自己修改,在创建编辑器的时候将这个id传入即可
//div作为容器的示例
<div id="editor"></div>
//textarea作为容器的示例
<textarea id="editor">
这里可以放编辑器初始化的内容,创建编辑器时,
我们会将内容放到编辑器的编辑区域里
</textarea>
//两种创建编辑器的区别是:
//div不可以在标签里设置初始值,在创建编辑器的时候配置initialContent参数
//textarea可以在标签里设置初始值,不能配置initialContent参数
B. 在该HTML页面添加以下脚本
//先引入配置文件(可以修改编辑器的高度,初始化内容等参数)
<script type="text/javascript" src="/editor_config.js"></script>
//包含全部功能的js文件
<script type="text/javascript" src="/editor_ui_all.js"></script>
//编辑器的默认样式
<link type="text/css" href="/themes/default/ueditor.css"/>
//创建编辑器
<script type="text/javascript" charset="utf-8">
var editor = new baidu.editor.ui.Editor();
editor.render('editor'); //editor为编辑器容器的id
</script>