1、应用构建
- 地址：http://ueditor.baidu.com/website/download.html
- 解压之后再编译器中打开
- 新建一个文件 demo.html
newDemo.png
2、初始化
- 加载富文本编辑器容器
<script id="container" name='content' type="text/plain"> 这里解释富文本编辑器中的显示的内容 </script> - 加载配置文件
<script src="ueditor.config.js"></script> - 编辑器源文件
<script src="ueditor.all.js"></script> - 建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败
- 这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文
<script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script> - 实例化
<script> // 实例化编辑器 var UEditor = UE.getEditor("container") // 传入的是容器 id </script>
3、配置项
配置项是一个对象，可以作为初始化方法 UE.getEditor() 方法的第二个参数，在配置项中传入默认配置参数，看图：
editBase.png
更多配置请查看官网：http://fexteam.gz01.bdysite.com/ueditor/#start-config
配置项传入getEditor（）方法后，就在浏览器中打开 demo.html 文件，此时就可以在浏览器中看到如下效果：
success.png
这说明初始化富文本编辑器并且配置成功
4、上传图片
理论上如果后台serverUrl配置好之后，此时就客户在富文本框中添加图片了，添加成功后会在富文本框总展示，但是如果图片过大，结构可能比较混乱，可以进行如下图中的操作，案例目录下的 themes 下的 iframe.css 中添加代码，你也可以根据自己的需求来修改样式。
imgStyle.png
5、点击上传按钮选择框延迟弹出
解决：
1、ueditor/dialogs/image/images.js中搜索下面代码：
accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/*'}
修改为：
accept: { title: 'Images', extensions: 'jpg,jpeg,png', mimeTypes: 'image/jpg,image/jpeg,image/png,image/gif' //修改这行 }
2、ueditor/ueditor.all.min.js 和ueditor.all.js中，搜索accept，将其后面的：
accept="image/*"
修改为：
accept="image/jpg,image/jpeg,image/png,image/gif"
修改自后再次点击就会快速弹出选择框，就分享这么多了啦，希望对你还有帮助。
网友评论