一.页面引入富文本

前期工作，访问百度富文本官网下载相应的百度富文本文件，根据后端用的技术下载相应的版本，建议下载最新版UTF-8版官方下载地址,基于官方从2016年就再也没有维护,网盘下载地址,上次项目使用自己配置的一套

{A3629CA9-0141-4415-BA7D-E419710DB541}_20191029164048.jpg
将下载好的文件解压，存放在项目位置下：
如果是在vue脚手架中集成百度富文本框，则将解压后选取部分文件(jsp文件夹和index.html不要,jsp文件夹是后台的东西)新建文件夹UE，放在其下面，之后放在与index.html平行下的static文件夹下地方如图所示：

1374211-20190711225057303-1139605551.png
1374211-20190711225440493-1451157932.png

修改UE下ueditor.config.js中的路径

ueditor.config.png

在项目main.js中引入UE下的js

main.jpg

基本配置完成,写编辑器组件

<template>
  <div>
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data() {
    return {
      editor: null
    };
  },
  props: {
    defaultMsg: {
      type: String
    },
    config: {
      type: Object
    }
  },
  mounted() {
    const _this = this;
    this.editor = UE.getEditor('editor', this.config); // 初始化UE
    this.editor.addListener('ready', function() {
      _this.editor.setContent(_this.defaultMsg);    // 确保UE加载完成后，放入内容。
    });
  },
  methods: {
      // 获取内容方法,获取的html内容
    getUEContent() {
      return this.editor.getContent();
    },
  // 获取纯文本内容方法
    getUEContentTxt() {
      return this.editor.getContentTxt();
    }
    setUEContent(value) {
      // 注入内容的方法
      //先清空
      this.editor.execCommand('cleardoc');
      //写入html方法
      this.editor.execCommand('inserthtml', value);
       //直接写入内容
      // this.editor.setContent(value);
    },
    // 清空内容的方法
    deleteUEContent() {
      this.editor.execCommand('cleardoc');
    },
    // 判断编辑器是否为空
    isEmit() {
      return this.editor.hasContents();
    },
    // 查看编辑器源码和可视化
    queryCommandState() {
      return this.editor.queryCommandState('source');
    },
    // 切换编辑器源码和可视化
    changeCommandState() {
      this.editor.execCommand('source');
    }
  },
  destroyed() {
    this.editor.destroy();
  }
};
</script>

此时已经是一个普通Vue组件,在模块中使用，刚封装好的百度富文本编辑器.vue组件,引入路径看你存放组件的位置，注册后使用

页面引入富文本组件.jpg

调用 ue组件里的方法满足要求,无非就是获取内容和放入内容(放入内容编辑时回显用的)

获取富文本内容.png

后台处理富文本的请求(上传和下载)

请求路劲==>>ueditor.config.js 下配置的serverUrl: '/uentor/uentorupload.do',

富文本请求后台.jpg

引入后台java代码,这里分为两个部分 config.json配置文件和部分java类
注意:配置文件名必须是config.json,并且文件夹名必须叫conf,源码加载配置是这么定义的(当然如果去改源码,当我没说);

config.json配置文件的引入位置.jpg java代码引入包.jpg

以上是对百度富文本引入的简单步骤

***项目中常见问题总结

1):富文本回显的问题

如果向数据库中添加带有特殊的字符,回显会有问题,比如加入html代码,一般情况下项目工程会配置过滤器,使得一些支付被转意,安全起见往后台传值以前用 base64 加密==>>Base64.encode(value),使用前解密==>>Base64.decode(value);

2):上传图片的问题

上传主要就是配置问题,ueditor所有的请求都是一个 ueditor.config.js中的serverurl就是请求地址(统一请求地址),后台接口一定保持一致,接口有固定写法 代码如下
@RequestMapping(value="/ueditor")
public class UploadController {
@RequestMapping(value="/ueditorupload.do")
public void upload(HttpServletRequest request, HttpServletResponse response) throws
UnsupportedEncodingException {
//编码
request.setCharacterEncoding( "utf-8" );
//设置响应头信息
response.setHeader("Content-Type" , "text/html");
//得到服务器路径 webapp目录
String rootPath = request.getSession().getServletContext().getRealPath("/");
try {
// ueditor自己的类和方法,剩下的自己去处理,
//两个参数:1.请求;2:roopath路径用来加载config.json配置文件,config.json配置了上传下载的信息;
String exec = new ActionEnter(request, rootPath).exec();
PrintWriter writer = response.getWriter();
writer.write(exec);
writer.flush();
writer.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}

配置不成功的话 会报 "后台配置错误,上传插件无法加载"

config.json里有对上传的文件具体设置,注释基本很详细,这里就不写了

有一个"没有找到请求资源的错误",主要是 ueditor与springMvc的上传解析器 CommonsMultipartResolver 冲突

注释掉显然不现实, 但是我们可以重写 CommonsMultipartResolver的 isMultipart(); 代码如下
import javax.servlet.http.HttpServletRequest;import org.apache.commons.fileupload.servlet.ServletFileUpload;
import org.springframework.web.multipart.commons.CommonsMultipartResolver;
public class CommonsMultipartResolerOverride extends CommonsMultipartResolver {
@Override
public boolean isMultipart(HttpServletRequest request) {
String url = request.getRequestURI();
//红色的值要与请求接口的值相同,这是手动过滤,也就是如果是ueditor的请求就不走springmvc的上传了
if(url!=null && url.contains("/ueditorupload.do")) {
return false;
}else {
return ServletFileUpload.isMultipartContent(request);
}
}
}

然后 将springMvc.xml里配置上传解析器的地方的实体类换成 自己重写的这个方法类

"没有权限"错误,主要是上传文件重名的问题 随机生成文件名即可(config.json里面有配置生成文件名的地方)

3):限制上传图片的最大显示宽度 自适应编辑器窗口大小 百分比

ueditor.all.js 搜索
// 设置默认字体和字号
'body{margin:8px;font-family:sans-serif;font-size:16px;}' +

//设置图片最大宽度，以免撑出滚动条

'img{max-width:90%;}'+ //这是加入的行*********

// 设置段落间距
'p{margin:5px 0;}</style>' +
设置 图片的 最大回显宽度 这里直接在 html 中添加 style 属性
1):单图片上传
在 ueditor.all.js 搜索 loader.setAttribute('alt', data.original || '');

在这里添加 loader.setAttribute('style', 'max-width:90%');

2):多图片上传
在 ueditor.all.js 搜索 <img src
第三处 是拼接前端 html 的字符串

在 style后面 加上 max-width:90% ;也就是 ' style="max-width:90% ' +

4):上传视频 文档里无法预览的问题

问题1 ==>> 编辑器没有开放视频插入的代码的白名单，所以会被过xss滤掉
解决: 首先在ueditor.config.js文件里增加xss过滤白名单,一般源文件中就有
在这里的末尾加上下列在插入视频中使用的代码：
收索: // xss过滤白名单

source: ['src', 'type'],

embed: ['type', 'class', 'pluginspage', 'src', 'width', 'height', 'align','style', 'wmode', 'play','autoplay','loop', 'menu', 'allowscriptaccess','allowfullscreen', 'controls', 'preload'],

iframe: ['src', 'class', 'height', 'width', 'max-width', 'max-height', 'align','frameborder', 'allowfullscreen']

另外由于插入的代码不是视频，那么首先要找到插入编辑器代码的代码，位置在ueditor.all.js里，
找到以下代码:
修改前:html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image')

修改后:html.push(creatInsertStr(vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'embed')将image改为嵌入视频url的embed标签;

//改完这里后会发现插入视频地址后，虽然编辑器可以看到视频了，但是插入视频的窗口不能关闭了
之所以会出现这个问题是因为改成embed后，下面的代码无法正常找到image标签及其里面的属性导致的，这里只要注释以下内容就可以解决插入视频框无法自动关闭的问题。
在ueditor.all.js收索: me.addListener('delkeyup',function(){
注释掉此方法
接着往下看，除开这个bug外，还有新的问题，下面我们来看看点击切换源码再回到编辑器预览里会发生什么。
去源码里已经视频代码不会被过滤了，但是回到编辑器却是一片空白
问题出在源码段代码里：type="application/x-shockwave-flash" class="edui-faked-video"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type规定了flash格式，我插入的是flash所以没问题，pluginspage是提供用户flash下载地址的（有些用户没有安装
flash插件或者没有及时更新），那么问题是在class里了，因为ediu-faked-video会告诉编辑器这不是一个视频，
因此会删除embed里的src的链接，因此回到编辑器预览会出现白板。
接着改
下面是判断如果点击视频上传需要导入的是embed代码的情况，之前是image，我们改成了embed，因此这里switch得到的
是embed的代码模板，在这里我们去掉以下代码:
type="application/x-shockwave-flash" class="' + classname + '"
pluginspage="http://www.macromedia.com/go/getflashplayer"' +'
修改前:
case 'embed':
str = '<embed type="application/x-shockwave-flash" class="' + classname +
'"pluginspage="http://www.macromedia.com/go/getflashplayer"' +
'"src="' + utils.html(url) + '" width="' + width + '" height="' + height +
'"' + (align ? ' style="float:' + align + '"' : '') +
' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';

修改后:

case 'embed':
str = '<embed src="' + utils.html(url) + '" width="' + width + '" height="' + height + '"'
+ (align ? ' style="float:' + align + '"' : '') + ' wmode="transparent" play="true" loop="false" menu="false" allowscriptaccess="never" allowfullscreen="true" >';
更改好后，刷新一下，我们再来看看插入视频后进入源码然后再回到编辑器预览状态下已经没有问题了，可以正常预览
另外上传视频也可以正常运作
第二种方案:首先 把上面的修改成embed的地方 改成video, 然后修改ueditor.all.js 里面
case 'video' 处 也就是上面修改 case 'embed' 的下面 拼接html代码处 video闭合标签前面
随便加上一些内容 比如:'视屏' 这在渲染处是不显示的;
以上解决了 拿不到视屏 html源码的问题

5):自定义上传路径

关于自定义上传文件路径配置问题，在源码中上传的类是BinaryUploader.class，
String physicalPath = (String)conf.get("rootPath") + savePath; 就是上传图片最后的路径。
其中rootPath是根路径，savePath是自定义的图片保存路径（imagePathFormat对应的值），
在源码中rootPath已被限制为读取config.json的项目路劲，所以在这里需要改变为自定义的路径。
其中ConfigManager类中第146，147这里传入的路径字符串，只需将这改为
conf.put("savePath", savePath);
conf.put("rootPath", "自定义的根路径");
这样就OK了,
自定义上传路径,所有的上传文件就不在工程目录下了,回显就不能正常回显了,只能通过请求下载的方式
修改config.json配置文件中的 图片访问路径前缀: "imageUrlPrefix": "/file/download.do?fileName=", /* 图片访问路径前缀 */
通过拼接字符串发送下载请求,下载到页面;

6):修改 超链接 a 标签里的内容

有时候默认内容不能满足我们的需求可能会对链接修改一些内容,下面 就带你去简单修改一下 ueditor生成超链接的源码
1、打开ueditor编辑器目录“ueditor\dialogs\link”里的link.html文件；
2、找到以下3处代码并编辑 参考链接
这里我们只是添加 a标签里面的 内容 所以直接修改 第三处位置 就Ok;
var obj = {
//原有的 a 标签的属性
'href' : href,
'target' : G('title').value.replace(/^\s+|\s+$/g, ''),
//自己添加的属性(我这里只是添加一个class供选择添加样式使用)
'class':"link-video"
'属性名':"属性值"
};

浪客行1213的简书

---

xhh