百度富文本编辑器使用小结

 

转自:https://blog.csdn.net/ck3345143/article/details/52231540

 

1.ueditor 官方地址:http://ueditor.baidu.com/website/index.html

   开发文档地址:http://ueditor.baidu.com/website/document.html

   下载地址:http://ueditor.baidu.com/website/download.html (这里可选开发版,或MINI版

 

2. 从官网上下载完整源码包,解压到任意目录,解压后的源码目录结构如下所示:

     _examples:编辑器完整版的示例页面

    dialogs:弹出对话框对应的资源和JS文件

    themes:样式图片和样式文件   php/jsp/.net:涉及到服务器端操作的后台文件,根据你选择的不同后台版本,这里也会不同,这里我们选择php

    third-party:第三方插件(包括代码高亮,源码编辑等组件)

    editor_all.js:_src目录下所有文件的打包文件(用于发布版本)

    editor_api.js: API接口配置文件(开发版本)

    editor_all_min.js:editor_all.js文件的压缩版,建议在正式部署时才采用

    editor_config.js:编辑器的配置文件,建议和编辑器实例化页面置于同一目录

 

3.编辑器的实例化页面,导入编辑器需要的三个入口文件,示例代码如下

​
<!-- 配置文件 -->

<script type="text/javascript" src="${contextPath}/styles/ueditor/ueditor.config.js"></script>

<!-- 编辑器源码文件 -->

<script type="text/javascript" src="${contextPath}/styles/ueditor/ueditor.all.js"></script>

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

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

<script type="text/javascript" charset="utf-8" src="${contextPath}/styles/ueditor/lang/zh-cn/zh-cn.js"></script>

​

4.然后在编辑器的实例化页面中创建编辑器实例及其DOM容器,示例代码如下:

 

html:

​
<textarea id="projectBasis" class="editor" name="projectBasis" cols="150" rows="30" maxlength="8000" style="width: 130%"> </textarea>

​

 

javascript:

​
<!-- 实例化编辑器 -->

<script type="text/javascript">

var URL = getRootPath();



var ue = UE.getEditor('projectBasis', {

//为编辑器实例添加一个路径,这个不能被注释

UEDITOR_HOME_URL: URL + '/styles/ueditor/',

// 服务器统一请求接口路径

serverUrl: '<%=basePath%>/styles/ueditor/jsp/controller.jsp',

//这里可以选择自己需要的工具按钮名称

toolbars:[[

'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|',

'Undo', 'Redo','Bold','test', 'simpleupload', 'insertimage','|',

'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|',

'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow'

]],

//focus时自动清空初始化时的内容

autoClearinitialprojectBasis:true,

//关闭字数统计

//wordCount:false,

maximumWords:8000, //允许的最大字符数

//关闭elementPath 元素路径

elementPathEnabled:false,

//默认的编辑区域高度

initialFrameHeight:300,

initialFrameWidth:1000 //初始化编辑器宽度,默认1000

});



//自定义请求地址



UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;

UE.Editor.prototype.getActionUrl = function(action) {

if (action == 'uploadimage' || action == 'uploadimage') {

return '<%=basePath%>/management/project/projectApplication/upload/img';

} else {

return this._bkGetActionUrl.call(this, action);

}

}



/**

* js获取项目根路径,如: http://localhost:8083/project

*/

function getRootPath(){

//获取当前网址,如: http://localhost:8083/project/share/meun.jsp

var curWwwPath=window.document.location.href;



//获取主机地址之后的目录,如: project/share/meun.jsp

var pathName=window.document.location.pathname;



var pos=curWwwPath.indexOf(pathName);



//获取主机地址,如: http://localhost:8083

var localhostPaht=curWwwPath.substring(0,pos);



//获取带"/"的项目名,如:/project

var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);



//return localhostPaht + projectName;

return localhostPaht + projectName;

}



</script>

​

需要的jar包

ueditor/jsp/controller.jsp做一下修改,以便【在线管理】功能才能显示图片处理。

在实例化是已经自定义

 //为编辑器实例添加一个路径,这个不能被注释

      // UEDITOR_HOME_URL: URL

       // 服务器统一请求接口路径

       //, serverUrl: URL + "jsp/controller.jsp"

所以这边要注释掉。

 

然后就到后台action了:
 

/**

* 图片上传

* @author CK

* @param upfile

* @param request

* @param response

* @return

* @throws Exception

*

*/

@RequestMapping("/upload/img")

@ResponseBody

public String upload(@RequestParam("upfile") MultipartFile upfile,HttpServletRequest request, HttpServletResponse response) throws Exception {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

String result = null;

String originalName = upfile.getOriginalFilename();//返回客户端文件的原始名称,eg:atv1.png



String imgFileSuffix = "";//图像文件的后缀

String mimeType = upfile.getContentType();

String supportedFormatTable[][] = {

{"image/png", ".png"},

{"image/bmp", ".bmp"},

{"image/jpg", ".jpg"},

{"image/gif", ".gif"},

{"image/jpeg", ".jpg"}

};



for (int i = 0; i < supportedFormatTable.length; ++i) {

if (supportedFormatTable[i][0].equals(mimeType)) {

imgFileSuffix = supportedFormatTable[i][1];

break;

}

}



//文件的前缀,eg:201503271453000025

String imgFilePrefix = new SimpleDateFormat("yyyyMMddHHmmssssss").format(Calendar.getInstance().getTime());

String newImgFileName = imgFilePrefix + imgFileSuffix;



String uploadPath = request.getSession().getServletContext().getRealPath("upload") + "/image";



// 拼装uuid

String uuid = "img_" + imgFilePrefix;



//删除已存在的文件

File uploadedFile1 = new File(uploadPath, newImgFileName);



if (uploadedFile1.exists()) {

uploadedFile1.delete();

}



//保存到数据库以及保存到相应的目录文件里

Resource oldResource = resourceService.get(uuid);



if (oldResource != null) {

File uploadedFile = new File(uploadPath, newImgFileName);

org.apache.commons.io.FileUtils.writeByteArrayToFile(uploadedFile, upfile.getBytes());

oldResource.setName(upfile.getOriginalFilename());

oldResource.setFileSize(FileUtils.getHumanReadableFileSize(upfile.getSize()));

oldResource.setUploadTime(new Date());

oldResource.setUuid(uuid);

oldResource.setStoreType(StoreType.IMAGE);

resourceService.update(oldResource);

} else {

File uploadedFile = new File(uploadPath, newImgFileName);

org.apache.commons.io.FileUtils.writeByteArrayToFile(uploadedFile, upfile.getBytes());

Resource resource = new Resource();

resource.setName(newImgFileName);

resource.setFileSize(FileUtils.getHumanReadableFileSize(upfile.getSize()));

resource.setUploadTime(new Date());

resource.setUuid(uuid);

resource.setStoreType(StoreType.IMAGE);

resourceService.save(resource);

}



String projectUrl = "http://" + request.getServerName() //服务器地址

+ ":"

+ request.getServerPort() //端口号

+ request.getContextPath(); //项目名称



//{"name":"10571402926855858.jpg", "originalName": "china.jpg", "size": 43086, "state": "SUCCESS", "type": ".jpg", "url": "upload/20140616/10571402926855858.jpg"}

// result返回的url参照IndexController._file方法



result = "{\"name\":\""+ newImgFileName +"\", \"originalName\": \""+ originalName +"\", \"size\": "+ upfile.getSize() +", \"state\": \"SUCCESS\", \"type\": \""+FileUtils.getFileExt(originalName)+"\", \"url\": \"" + projectUrl + "/upload/image/" + newImgFileName +"\"}";

result = result.replaceAll( "\\\\", "\\\\" );

return result;

}


 

需要返回的格式:

{

"name": "201608171525000017.png",

"originalName": "check-radio.png",

"size": 4572,

"state": "SUCCESS",

"type": "png",

"url": "http://localhost:8080/project/upload/image/201608171525000017.png"

}

 

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页