百度Ueditor富文本编辑器上传图片
2016-10-18 18:44
591 查看
下载地址:http://ueditor.baidu.com/website/download.html#ueditor
*注:我下载的是jsp版本,虽然是jsp版本其实使用异步html照常是可以使用。
一、首先解压到resource资源目录下
---webapp
---resource
----ueditor
在页面中引入editor.config.js 和editor.all.js 文件,再在body标签中引入如下代码即可引入编辑器。
<script id="container" name="content" type="text/plain"></script>
<script type="text/javascript">
window.UEDITOR_HOME_URL = '/resource/ueditor';
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
editor = UE.getEditor('container',{
toolbars:[['Source', 'Undo', 'Redo', 'Bold', 'pasteplain',
'selectall','preview','time','date', 'simpleupload'
]],
//关闭elementPath
elementPathEnabled:false,
//纯文本粘贴
pasteplain: true,
initialFrameHeight: 100,
initialFrameWidth: 470,
minFrameHeight: 100,
initialContent: '',
wordCount: true
});
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '/file/upload_image';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
二、需要把jsp目录下的jar包引入项目
1、非maven项目则把lib下面的jar复制带WEB-INF的lib下,然后add path
2、maven项目一般就只需要在maven配置pom.xml中引入ueditor-1.1.2.jar
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
<scope>system</scope>
<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>
</dependency>
三、修改配置
1、ueditor.config.js中serverUrl需要注意默认引入的是:serverUrl: URL + "jsp/controller.jsp" 可以直接使用但是需要注意架包的引入
2、config.json 简单配置可以不需要修改
3、ueditor.all.js 要根据业务需求修改:UE.plugin.register('simpleupload', function (){ ---- 函数
到此上传基本没有问题,最重要的是注意重写getActionUrl,上面也有完整代码
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '/file/upload_image';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
*注:我下载的是jsp版本,虽然是jsp版本其实使用异步html照常是可以使用。
一、首先解压到resource资源目录下
---webapp
---resource
----ueditor
在页面中引入editor.config.js 和editor.all.js 文件,再在body标签中引入如下代码即可引入编辑器。
<script id="container" name="content" type="text/plain"></script>
<script type="text/javascript">
window.UEDITOR_HOME_URL = '/resource/ueditor';
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
editor = UE.getEditor('container',{
toolbars:[['Source', 'Undo', 'Redo', 'Bold', 'pasteplain',
'selectall','preview','time','date', 'simpleupload'
]],
//关闭elementPath
elementPathEnabled:false,
//纯文本粘贴
pasteplain: true,
initialFrameHeight: 100,
initialFrameWidth: 470,
minFrameHeight: 100,
initialContent: '',
wordCount: true
});
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '/file/upload_image';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
</script>
二、需要把jsp目录下的jar包引入项目
1、非maven项目则把lib下面的jar复制带WEB-INF的lib下,然后add path
2、maven项目一般就只需要在maven配置pom.xml中引入ueditor-1.1.2.jar
<dependency>
<groupId>com.baidu.ueditor</groupId>
<artifactId>ueditor</artifactId>
<version>1.1.2</version>
<scope>system</scope>
<systemPath>${basedir}/src/main/webapp/WEB-INF/lib/ueditor-1.1.2.jar</systemPath>
</dependency>
三、修改配置
1、ueditor.config.js中serverUrl需要注意默认引入的是:serverUrl: URL + "jsp/controller.jsp" 可以直接使用但是需要注意架包的引入
2、config.json 简单配置可以不需要修改
3、ueditor.all.js 要根据业务需求修改:UE.plugin.register('simpleupload', function (){ ---- 函数
到此上传基本没有问题,最重要的是注意重写getActionUrl,上面也有完整代码
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage') {
return '/file/upload_image';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
相关文章推荐
- 解决ueditor百度富文本编辑器图片可以上传但是在线管理图片无法显示
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
- 百度富文本编辑器UEditor1.3上传图片附件等
- 百度富文本编辑器UEditor1.3上传图片附件等
- 百度富文本编辑器Ueditor上传图片时标签中添加宽高
- Spring+SpringMVC+Mybatis整合百度富文本编辑器Ueditor,上传图片到阿里云OSS对象存储。
- django 与 百度 ueditor 富文本编辑器集成之一:图片上传,文件上传
- 改造百度UMeditor(UEditor-min)富文本编辑器的图片上传功能
- 百度富文本编辑器UEditor1.3上传图片附件等
- 关于百度富文本编辑器ueditor的.NET版本地图片上传提示uploader类同时存在于两个dll中的解决方法
- 【ASP.NET】10.解决百度富文本编辑器UEditor本地上传图片正常,放到服务器上以后图片上传按钮变灰不能点击的问题
- 百度富文本编辑器ueditor上传图片存储又拍云java修改
- 百度富文本编辑器UEditor自定义上传图片接口
- 关于百度富文本编辑器ueditor的.NET版本地图片上传提示uploader类同时存在于两个dll中的解决方法
- 百度富文本编辑器UEditor的使用和他的图片上传
- MVC3.0下使用百度富文本编辑器ueditor1.3.6上传图片
- 百度开源富文本编辑器 UEditor配置:图片上传和文件上传独立使用方法
- asp.net应用百度编辑器(UEditor)上传图片和上传附件不成功的解决办法
- 百度ueditor图片与附件自定义目录上传
- 百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源