詳解vue.js+UEditor集成 [前后端分離項目]

/**
 * 用于處理關(guān)于ueditor插件相關(guān)的請求
 * @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();
  }
}

// 服務(wù)器統(tǒng)一請求接口路徑
, 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;
       //抓取遠程圖片時的處理方式，此處也可以關(guān)閉

        //當(dāng)從網(wǎng)頁上復(fù)制內(nèi)容到編輯器中，如果圖片與該域名不同源，則會自動抓到本地的服務(wù)器保存 
      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">
    <h2>完整demo</h2>
    <div id="editor" type="text/plain" ></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',{
    //此處可以定制工具欄的功能，若不設(shè)置，則默認是全部的功能
    toolbars: [
     [
      'anchor', //錨點
      'undo', //撤銷
      'redo', //重做
      'bold', //加粗
      'indent', //首行縮進
      'snapscreen', //截圖
      'italic', //斜體
      'underline', //下劃線
      'strikethrough', //刪除線
      'subscript', //下標
      'fontborder', //字符邊框
      'superscript', //上標
      'formatmatch', //格式刷
      'source', //源代碼
      'blockquote', //引用
      'pasteplain', //純文本粘貼模式
      'selectall', //全選
      'print', //打印
      'preview', //預(yù)覽
      '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', //圖片轉(zhuǎn)存
      'lineheight', //行間距
      'edittip ', //編輯提示
      'customstyle', //自定義標題
      'autotypeset', //自動排版
      'webapp', //百度應(yīng)用
      '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>