详解vue.js+UEditor集成 [前后端分离项目]

/**
 * 用于处理关于ueditor插件相关的请求
 * @author Guoqing
 *
 */
@RestController
@CrossOrigin
@RequestMapping("/sys/ueditor")
public class UeditorController extends BaseController {

  @RequestMapping(value = "/exec")
  @ResponseBody
  public String exec(HttpServletRequest request) throws UnsupportedEncodingException{ 
    request.setCharacterEncoding("utf-8");
    String rootPath = request.getRealPath("/");
    return new ActionEnter( request, rootPath).exec();
  }
}

// 服务器统一请求接口路径
, serverUrl: http://localhost:8080/sys/ueditor/exec

switch ( actionCode ) {
      //读取配置文件时的请求处理
      case ActionMap.CONFIG:
        return this.configManager.getAllConfig().toString();
      //上传图片、视频、文件时的处理
      case ActionMap.UPLOAD_IMAGE:
      case ActionMap.UPLOAD_SCRAWL:
      case ActionMap.UPLOAD_VIDEO:
      case ActionMap.UPLOAD_FILE:
        conf = this.configManager.getConfig( actionCode );
        state = new Uploader( request, conf, baseFileService ).doExec();
        break;
       //抓取远程图片时的处理方式，此处也可以关闭

        //当从网页上复制内容到编辑器中，如果图片与该域名不同源，则会自动抓到本地的服务器保存 
      case ActionMap.CATCH_IMAGE:
        conf = configManager.getConfig( actionCode );
        String[] list = this.request.getParameterValues( (String)conf.get( "fieldName" ) );
        state = new ImageHunter( conf ).capture( list );
        break;
       //上传多文件时的文件在线管理
      case ActionMap.LIST_IMAGE:
      case ActionMap.LIST_FILE:
        conf = configManager.getConfig( actionCode );
        int start = this.getStartIndex();
        state = new FileManager( conf ).listFile( start );
        break;
        
    }
    return state.toJSONString();

<template>
 <div>
  <el-row :gutter="20">
   <el-col :span="24" class="toolbar">
    <h1>完整demo</h1>
    <div id="editor" type="text/plain" style="width:100%;height:400px;"></div>
   </el-col>
  </el-row>
 </div>
</template>

<script>
 import AppConfig from '@/config'
 import '../../../../static/ueditor/ueditor.config.js'
 import '../../../../static/ueditor/ueditor.all.js'
 import '../../../../static/ueditor/lang/zh-cn/zh-cn.js'

 export default {
  name: "ueditor",
  data() {
   return {
    id: Math.random().toString(16).substring(2) + 'ueditorId',
    editor: null,
    msg: 'Welcome to ueditor'
   };
  },
  mounted() {
   this.ue = UE.getEditor('editor',{
    //此处可以定制工具栏的功能，若不设置，则默认是全部的功能
    toolbars: [
     [
      'anchor', //锚点
      'undo', //撤销
      'redo', //重做
      'bold', //加粗
      'indent', //首行缩进
      'snapscreen', //截图
      'italic', //斜体
      'underline', //下划线
      'strikethrough', //删除线
      'subscript', //下标
      'fontborder', //字符边框
      'superscript', //上标
      'formatmatch', //格式刷
      'source', //源代码
      'blockquote', //引用
      'pasteplain', //纯文本粘贴模式
      'selectall', //全选
      'print', //打印
      'preview', //预览
      'horizontal', //分隔线
      'removeformat', //清除格式
      'time', //时间
      'date', //日期
      'unlink', //取消链接
      'insertrow', //前插入行
      'insertcol', //前插入列
      'mergeright', //右合并单元格
      'mergedown', //下合并单元格
      'deleterow', //删除行
      'deletecol', //删除列
      'splittorows', //拆分成行
      'splittocols', //拆分成列
      'splittocells', //完全拆分单元格
      'deletecaption', //删除表格标题
      'inserttitle', //插入标题
      'mergecells', //合并多个单元格
      'deletetable', //删除表格
      'cleardoc', //清空文档
      'insertparagraphbeforetable', //"表格前插入行"
      'insertcode', //代码语言
      'fontfamily', //字体
      'fontsize', //字号
      'paragraph', //段落格式
      'insertimage', //多图上传
      'edittable', //表格属性
      'edittd', //单元格属性
      'link', //超链接
      'emotion', //表情
      'spechars', //特殊字符
      'searchreplace', //查询替换
      'map', //Baidu地图
      'gmap', //Google地图
      'insertvideo', //视频
      'help', //帮助
      'justifyleft', //居左对齐
      'justifyright', //居右对齐
      'justifycenter', //居中对齐
      'justifyjustify', //两端对齐
      'forecolor', //字体颜色
      'backcolor', //背景色
      'insertorderedlist', //有序列表
      'insertunorderedlist', //无序列表
      'fullscreen', //全屏
      'directionalityltr', //从左向右输入
      'directionalityrtl', //从右向左输入
      'rowspacingtop', //段前距
      'rowspacingbottom', //段后距
      'pagebreak', //分页
      'insertframe', //插入Iframe
      'imagenone', //默认
      'imageleft', //左浮动
      'imageright', //右浮动
      'attachment', //附件
      'imagecenter', //居中
      'wordimage', //图片转存
      'lineheight', //行间距
      'edittip ', //编辑提示
      'customstyle', //自定义标题
      'autotypeset', //自动排版
      'webapp', //百度应用
      'touppercase', //字母大写
      'tolowercase', //字母小写
      'background', //背景
      'template', //模板
      'scrawl', //涂鸦
      'music', //音乐
      'inserttable', //插入表格
      'drafts', // 从草稿箱加载
      'charts', // 图表
     ]
    ],
    BaseUrl: '',
    UEDITOR_HOME_URL: 'static/ueditor/'
   });

  },
  destoryed() {
   this.editor.destory();
  },
  methods:{
   getUeditorContent: function(){
    console.log(this.editor.getContent());
   }
  }
 }
</script>