vue 整合ueditor（百度富文字編輯器）以及使用後端Java上傳圖片到伺服器，特別注意的大坑
1.import 引入ueditor時，在封裝元件中引入，不要在mian.js內引入，在main.js內引入會造成
1.Uncaught SyntaxError: Unexpected token :
這種錯誤，屬於是跨域問題，目前不清楚是什麼原因和原理，但是引入時儘量在使用的元件中引入，不要全域性引入
2.使用ueditor時，需要注意在引入編輯器的樣式，在ueditor.config.js內 新增程式碼：
window.UEDITOR_HOME_URL = "static/ueditor/";
因為解壓後ueditor檔案放在Vue專案的static下，ueditor是放到專案的ueditor編輯器的資料夾名，所以路徑如上
專案程式碼：
ue.vue：
<template> <div> <script :id=id type="text/plain"></script> </div> </template> <script> import '../../../static/ueditor/ueditor.config.js' import '../../../static/ueditor/ueditor.all.js' import '../../../static/ueditor/lang/zh-cn/zh-cn.js' export default { name: 'UE', data () { return { editor: null } }, props: { defaultMsg: { type: String }, config: { type: Object }, id: { type: String }, }, mounted() { const _this = this; this.editor = UE.getEditor(this.id, this.config); // 初始化UE this.editor.addListener("ready", function () { _this.editor.setContent(_this.defaultMsg); // 確保UE載入完成後，放入內容。 }); }, methods: { getUEContent() { // 獲取內容方法 return this.editor.getContent() }, getUEContentTxt() { // 獲取純文字內容方法 return this.editor.getContentTxt() } }, destroyed() { this.editor.destroy(); } } </script>
ueditorDemo.vue:
<template> <div id="app"> <div> <UE :defaultMsg=defaultMsg :config=config :id=ue1 ref="ue1"></UE> </div> </div> </template> <script> import UE from '@/components/ueditor/ueditor.vue' export default{ components: {UE}, data() { return { //---- start ----- ue 編輯器相關 config: { initialFrameWidth: null, initialFrameHeight: 350, toolbars: [ ['fullscreen', 'source', '|', 'undo', 'redo', '|', 'bold', 'italic', 'underline', 'fontborder', 'strikethrough', 'superscript', 'subscript', 'removeformat', 'formatmatch', 'autotypeset', 'blockquote', 'pasteplain', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', 'selectall', 'cleardoc', '|', 'rowspacingtop', 'rowspacingbottom', 'lineheight', '|', 'customstyle', 'paragraph', 'fontfamily', 'fontsize', '|', 'directionalityltr', 'directionalityrtl', 'indent', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify', '|', 'touppercase', 'tolowercase', '|', 'link', 'unlink', 'anchor', '|', 'imagenone', 'imageleft', 'imageright', 'imagecenter', '|', 'insertimage', 'emotion', 'scrawl', 'insertvideo', 'music', 'attachment', 'map', 'gmap', 'insertframe', 'insertcode', 'webapp', 'pagebreak', 'template', 'background', '|', 'horizontal', 'date', 'time', 'spechars', 'snapscreen', 'wordimage', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells', 'mergeright', 'mergedown', 'splittocells', 'splittorows', 'splittocols', 'charts', '|', 'print', 'preview', 'searchreplace', 'drafts', 'help'] ],//'simpleupload',單個圖片上傳，不顯示 }, defaultMsg: '', ue1: "ue1", // 不同編輯器必須不同的id //---- end----- ue 編輯器相關 } }, methods: { // 獲取內容方法 // this.$refs.uel.getUeContent(); } } </script>
UEditor中的方法：
1. 例項化編輯器到id為 container 的 dom 容器上：
var ue = UE.getEditor('container');
2. 設定編輯器內容：
ue.setContent('<p>hello!</p>');
3. 追加編輯器內容：
ue.setContent('<p>new text</p>', true);
4. 獲取編輯器html內容：
var html = ue.getContent();
5. 獲取純文字內容：
ue.getContentTxt();
6. 獲取保留格式的文字內容：
ue.getPlainTxt();
7. 判斷編輯器是否有內容：
ue.hasContents();
8. 讓編輯器獲得焦點：
ue.focus();
9. 讓編輯器失去焦點
ue.blur();
10. 判斷編輯器是否獲得焦點：
ue.isFocus();
11. 設定當前編輯區域不可編輯：
ue.setDisabled();
12. 設定當前編輯區域可以編輯：
ue.setEnabled();
13. 隱藏編輯器：
ue.setHide();
14. 顯示編輯器：
ue.setShow();
15. 清空內容：
ue.execCommand('cleardoc');
16. 讀取草稿箱：
ue.execCommand('drafts');
17. 清空草稿箱：
ue.execCommand('clearlocaldata');methods:{
getUEContent: function(){
return this.editor.getContent();
},
getContentTxt: function(){
return this.editor.getContentTxt();
},
setUEContent:function (data) {
let _this = this;
this.editor.addListener('ready',function () {// 新增監聽事件，否則會報錯"cannot set property 'innerHTML' of null" ready 編輯器準備就緒後會觸發該事件
_this.editor.setContent(data);
});2.vue使用ueditor時，打包後樣式丟失問題
封裝ue元件來初始化ueditor後，在要引入ue元件的父元件中定義config時在裡面加上
UEDITOR_HOME_URL: 'static/ueditor/'，這樣打包就不會丟失樣式了，例如：
第一個箭頭id一定要有，並且不重複
第二個箭頭就是上面所說的，解決打包後樣式不丟失的辦法
特別注意不要手賤在static的前面加上/
3.後端圖片上傳的配置：以下是上傳到本地Tomcat為例
/* 上傳圖片配置項 */
"imageActionName": "uploadimage", /* 執行上傳圖片的action名稱 */
"imageFieldName": "upfile", /* 提交的圖片表單名稱 */
"imageMaxSize": 2048000, /* 上傳大小限制，單位B */
"imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上傳圖片格式顯示 */
"imageCompressEnable": true, /* 是否壓縮圖片,預設是true */
"imageCompressBorder": 1600, /* 圖片壓縮最長邊限制 */
"imageInsertAlign": "none", /* 插入的圖片浮動方式 */
"imageUrlPrefix": "http://192.168.1.118:8080", /* 圖片訪問路徑字首 */
"localSavePathPrefix":"D:\\Program Files\\apache-tomcat-8.0.50\\webapps",
"imagePathFormat": "/ueImg/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上傳儲存路徑,可以自定義儲存路徑和檔名格式 */
/* {filename} 會替換成原檔名,配置這項需要注意中文亂碼問題 */
/* {rand:6} 會替換成隨機數,後面的數字是隨機數的位數 */
/* {time} 會替換成時間戳 */
/* {yyyy} 會替換成四位年份 */
/* {yy} 會替換成兩位年份 */
/* {mm} 會替換成兩位月份 */
/* {dd} 會替換成兩位日期 */
/* {hh} 會替換成兩位小時 */
/* {ii} 會替換成兩位分鐘 */
/* {ss} 會替換成兩位秒 */
/* 非法字元 \ : * ? " < > | */
/* 具請體看線上文件: fex.baidu.com/ueditor/#use-format_upload_filename */
上傳的具體程式碼中：
state.putInfo( "title", picName);//檔名填入此處
state.putInfo( "group", "");//所屬group填入此處
state.putInfo( "url", savePath);//檔案訪問的url填入此處
return state;
紅色地方重要，是上傳完後返回到前端的訪問路徑