html+js 调用百度编辑器api 编辑内容

一般我们编辑内容都会直接使用多行文本框<textarea>,没有什么样式来修饰一些文本内容，就是单纯的文字而已。其实在html中我们可以直接使用百度原有的百度编辑器api来进行编辑，相当于一个小的word文档编辑器来用。一般使用场景就是在form表单中会用到。

我这里的场景是php项目，首先引入百度编辑器api，这里我是在项目中使用php来引入的，APP_JS_URL是编辑器的存放路径，我这里的路径是view/js/

<script type="text/javascript" src="<?php echo APP_JS_URL; ?>ueditor/ueditor.config.js"></script>
<script type="text/javascript" src="<?php echo APP_JS_URL; ?>ueditor/ueditor.all.min.js"></script>
<script type="text/javascript" src="<?php echo APP_JS_URL; ?>ueditor/lang/zh-cn/zh-cn.js"></script>

需要注意的是上面文件的引入顺序不要搞错，不然会报错的，然后在html中加入要显示编辑器的代码。

<textarea name="content" id="articleContent"><?php echo isset($data['content']) ? $data['content'] : ''; ?></textarea>

上述$data['content']使用php从数据库读取显示到textarea中，这里是结合多行文本使用。

下面是使用js来调用百度编辑器，

$(function(){
   //实例化编辑器
   var width = $('body').width();
   var ue = UE.getEditor('noticeContent', {
      initialFrameWidth: width * 0.9 //设置编辑器宽度
   });
});

这样就完成了，可以在页面中成功显示编辑器了，效果如下：