百度的富文本

最新推荐文章于 2024-09-05 22:56:31 发布

ivylingling123

最新推荐文章于 2024-09-05 22:56:31 发布

阅读量517

点赞数

分类专栏：第三方插件

本文链接：https://blog.csdn.net/ivylingling123/article/details/84837410

版权

第三方插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步：https://ueditor.baidu.com/website/download.html#mini下载插件（小编选用的是jsp版本）

第二步：在后台项目存放插件

第三步：新建测试页面，在改页面引入需要的js和样式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>bbs.html</title>
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link href="umditor/themes/default/css/umeditor.css" rel="stylesheet" type="text/css" >
    <script type="text/javascript" src="umditor/third-party/jquery.min.js"></script>
	<script type="text/javascript" src="umditor/umeditor.config.js"></script>
	<script type="text/javascript" src="umditor/umeditor.min.js"></script>
	  <script type="text/javascript" src="umditor/lang/zh-cn/zh-cn.js"></script>
      <script type="text/javascript" src="umditor/bbs.js"></script>
  </head>
  <body>
   	<script type="text/plain" id="editor" name="editor" style="width:auto;height:240px;">        
	</script>
  </body>
</html>

第四步：在js中进行初始化编辑器

$(function(){
    var um = UM.getEditor('editor');


});

第五步：进行页面访问,文本编辑器可以正常显示

第六步：开始上传图片并保存到后台服务器

(1)后台是用java进行图片的上传并保存到服务器的指定位置，结合MultipartFile进行上传，且返回的时候必须以json格式返回四个字段，否则没办法显示图片

@RequestMapping(method = { RequestMethod.GET, RequestMethod.POST })
	public void handle(HttpServletRequest request, HttpServletResponse response) {
		// 转型为MultipartHttpRequest：
		MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;
		// 获得文件：
		MultipartFile uploadFile = multipartRequest.getFile("upfile"); 
		// UEditor传到后台的是这个upfile，其他的文件上传，应该也差不多是这个，还没去研究，断点一下就知道了
		String fileName = uploadFile.getOriginalFilename();
	
		String fileUploadPath = CommonUtil.trimString(appConfig
				.get("backstageBbsImgMediaPath"));
		if (fileUploadPath == null) {
			throw new AdminControllerException("1000", "服务器未指定存放文件的路径");
		}
		File outputFile = new File(fileUploadPath + fileName);
		try {
			uploadFile.transferTo(outputFile);
		} catch (Exception e) {
			throw new AdminControllerException("1003", "上传图片出现异常");
		}
		UploadImageOutput output = new UploadImageOutput();
		output.setOriginal(outputFile.getName());
		output.setTitle(outputFile.getName());
		String bbsImageShowRootPath = CommonUtil.trimString(appConfig
				.get("bbsImageShowRootPath"));
		if (bbsImageShowRootPath == null) {
			throw new AdminControllerException("1000", "服务器未指定存放文件的路径");
		}
		output.setUrl(bbsImageShowRootPath + fileName);
		output.setState("SUCCESS");
		JSONObject jsonObj = new JSONObject(output);
		String result = jsonObj.toString();
		try {
			CommonUtil.getHttpServletResponse().setCharacterEncoding("UTF-8");
			CommonUtil.getHttpServletResponse().getWriter().write(result);
			CommonUtil.getHttpServletResponse().getWriter().flush();
		} catch (Exception e1) {

		}

	}

（2）.将后台的图片上传接口在umeditor的配置文件中umditor/umeditor.config.js进行修改和配置

  window.UMEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UMEDITOR_HOME_URL : URL

        //图片上传配置区
        ,imageUrl:window.location.href.substring(0,window.location.href.lastIndexOf("/"))+"/"             //图片上传提交地址
        ,imagePath:URL + "jsp/"                     //图片修正地址，引用了fixedImagePath,如有特殊需求，可自行配置
        ,imageFieldName:"file_body"                   //图片数据的key,若此处修改，需要在后台对应文件修改对应参数

（3）.上传图片的时候有可能会出错上传出错，需要修改umditor\dialogs\image\image.js在uploadComplete函数添加 r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');

uploadComplete: function(r){
            var me = this;
            try{
                r=r.replace('<pre style="word-wrap: break-word; white-space: pre-wrap;">', '').replace('</pre>', '');
                var json = eval('('+r+')');
                Base.callback(me.editor, me.dialog, json.url, json.state);
            }catch (e){
                var lang = me.editor.getLang('image');
                Base.callback(me.editor, me.dialog, '', (lang && lang.uploadError) || 'Error!');
            }
        },

（4）.上传图片之后，如果没有显示，需要修改umditor\dialogs\image\image.js在callback函数

经过四个步骤图片就能上传-->保存--->回显

第七步：获得编辑器的内容并保存到后台服务器，主要通过UM.getEditor('editor').getContent();获得编辑器中的内容

function addBbsHtml(){
    var editor1=UM.getEditor('editor').getContent();
    $.ajax({url:'後台地址',
        data:{editor:editor1},
        dataType:'json',
        type:'post',
        success:function(result){
            if(result.state==0){
                 alert("添加成功")
            }else{
                alert("添加失败"+result.msg);
            }

        }

    });
}