Ueditor的使用与富文本图片上传

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

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"

修改自后再次点击就会快速弹出选择框，就分享这么多了啦，希望对你还有帮助。