百度编辑器使用
1.从百度编辑器的官网根据需求下载对应版本的编辑器源码包(此处选择php utf8版)。
下载地址:http://ueditor.baidu.com/website/download.html#ueditor
2.将源码包解压到项目的根目录下(建议将文件夹名改为ueditor,方便之后的引用)。
3.在html中引用编辑器的js,css。
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/ueditor.config.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/ueditor.all.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/lang/zh-cn/zh-cn.js”></script>
4.创建form表单和上传按钮并将编辑器实例到form表单中,这里创建一个隐藏的input标签或者textarea标签用来接收来自百度编辑器的内容。
5.为submit绑定点击事件获取编辑框传过来的内容
<form method=”post” >
<div>
<input type=”hidden” name=”descr” value=”” >
<!– 加载编辑器的容器 –>
<script id=”ueditor” name=”descr” required type=”text/plain”></script>
<input type=”submit” onclick=”getPlainTxt()” value=”保存,完成”>
</div>
</form>
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/ueditor.config.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/ueditor.all.min.js”></script>
<script type=”text/javascript” charset=”utf-8″ src=”/ueditor/lang/zh-cn/zh-cn.js”></script>
<script type=”text/javascript”>
//此处实例化一个百度编辑器
var ue = UE.getEditor(‘ueditor’);
//获取百度编辑器中的带样式的内容将其push到数组中(源码的index.html文件中详细介绍了取不同格式内容的方法)
function getPlainTxt(ue) {
var arr = array();
arr.push(this.getPlainTxt());
}
//编辑器默认将得到的内容放到隐藏的input框或者textarea框中,点击提交后数据会以数组形式post方式向数据库提交
</script>
6.对编辑器的配置
ueditor目录下的ueditor.config.js为编辑器的配置文件。
修改配置文件可以实现对功能按钮的添加和删除,图片文件上传路径等等。