海创软件组- vue项目中如何使用ueditor的一点心得

**

一：下载Ueditor编辑器文件：
从官网：http://ueditor.baidu.com/website/download.html#ueditor下载1.4.3.3 Jsp 版本的Ueditor文件。

二：项目引入文件：
这里我将ueditor文件命名为UE（你也可以用其他名字）并放到static文件下：

然而在main文件中引入相应的js文件，注意顺序一定不能乱，呃，还有就是路径要正确！

三：修改配置：
打开ueditor.config.js文件：
（1）找到 var URL = window.UEDITOR_HOME_URL || getUEBasePath();
然后在其前面加一行： window.UEDITOR_HOME_URL = ‘/static/UE/’，这里的路径是你之前引入ueditor文件的路径，例如我将文件放在了static下并命名为UE；如果不配置，可能会因为找不到ueditor文件而无法正常显示编辑器。
添加后：

这个时候我们就可以来创建一个编辑器了：

<template>
  <div style="width: 1000px;height: 500px;margin: 100px auto;">
    <div id="ueditor">
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        editor: null,
      }
    },
    mounted () {
        this.editor = UE.getEditor('ueditor') // 初始化UE
    },
    destroyed () {                
      this.editor.destroy()
    }
  }
</script>

效果图：

现在虽然已经搭建出编辑器，但由于后台没配好，所以小伙伴们会发现图片什么的无法上传。

要解决这个问题，我们又需要打开ueditor.config.js文件进行配置：
我们找到：

然后注释掉它给的serverUrl，换上你后台的地址：

window.UEDITOR_CONFIG = {

        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL
        // 服务器统一请求接口路径
        //, serverUrl: URL + "jsp/controller.jsp"
        , serverUrl: "后台配置的地址"

这时你再打开图片上传，你会发现问题得以解决了：

四：自定义图片，附件等文件的上传路径：
再上传文件的时候，我们通常都想上传到自己制定的地址，这点小要求我们当然能做到呀！

          this.editor = UE.getEditor('editor'); // 初始化UE
          UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
          UE.Editor.prototype.getActionUrl = function(action) {
            //上传图片
            if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
              return 'http://xxxxxx/imgUpload';
              //上传视频
            }else if(action == "uploadvideo"){
              return 'http://xxxxxxx/videoUpload';
            }
            //上传附件
            else if(action == "uploadfile"){
              return 'http://xxxxxxxx/fileUpload';
            }
            //默认
            else {
              return this._bkGetActionUrl.call(this, action);
            }
          }
        })

五:获取编辑器的内容：
注：this.editor是我的编辑器对象。
（1）获取纯文本内容方法：this.editor.getContentTxt（）
（2）获取纯文本内容但保留段落格式：this.editor.getPlaninTxt()
（3）获取html的方法:this.editor.getContent()
（4）获取整个html的方法：this.editor.getAllHtml()

六：我遇到的一些小问题：
1、多图上传，顺序不对：
解决方法:
（1）：找到static/UE/dialogs/attachment/attachment.js文件

			将_this.fileList.push(json);修改为_this.fileList[$file.index()] = json;

为解决多图中可能出现上传失败的情况：

（2）：找到UE/dialogs/image/image.js文件

 将_this.imageList.push(json);改为_this.imageList[$file.index()] = json;

同样要注意图片上传失败问题：具体仍如上面处理一样。

2、后台获取配置需要令牌验证的时候，我的做法是不在config.js中配置serverUrl，而是在编辑器组件中先发送请求获取后台配置，再将配置传入一起搭建编辑器：（没有深究这种方法的好坏，我只是用来解决我所遇到的问题而已。）

3、想编辑器宽度随容器宽度变化而变化

在config.js中设置initialFrameWidth:‘100%’ 即可。

更多前端设置可去官方文档查阅：http://fex.baidu.com/ueditor/#start-config