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

1、应用构建

newDemo.png

2、初始化

加载富文本编辑器容器

加载配置文件

编辑器源文件

建议手动加在语言，避免在ie下有时因为加载语言失败导致编辑器加载失败

这里加载的语言文件会覆盖你在配置项目里添加的语言类型，比如你在配置项目里配置的是英文，这里加载的中文，那最后就是中文

实例化

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"

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