3月 13, 2017 - 开发笔记, 有料    百度编辑器使用已关闭评论

百度编辑器使用

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为编辑器的配置文件。

修改配置文件可以实现对功能按钮的添加和删除,图片文件上传路径等等。

评论被关闭。