前端關於vue普通引用情況下如何與UEditor結合以及關於UEditor的文字居中的bug解決

首先去官網下載壓縮文件解壓

：https://ueditor.baidu.com/website/download.html

然後在你使用插件的文件中script引入

<!-- 配置文件 -->
	<script type="text/javascript" src="/ueditor/ueditor.config.js"></script>
	<!-- 編輯器源碼文件 -->
	<script type="text/javascript" src="/ueditor/ueditor.all.js"></script> 
	<!--建議手動加在語言，避免在ie下有時因爲加載語言失敗導致編輯器加載失敗--> 
	<!--這裏加載的語言文件會覆蓋你在配置項目裏添加的語言類型，比如你在配置項目裏配置的是英文，這裏加載的中文，那最後就是中文-->
	<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"></script> 

在body中引入

<textarea v-model="editData.content" id="projectBasis" class="editor" name="projectBasis" cols="150" rows="30" style="width: 80%">這裏寫你的初始化內容 </textarea>

接着實例化編輯器，大家根據自己的實際情況來， 

<!-- 實例化編輯器 -->
  <script type="text/javascript">
     var URL = getRootPath();
 
     var ue = UE.getEditor('projectBasis', {
          //爲編輯器實例添加一個路徑，這個不能被註釋
           UEDITOR_HOME_URL: URL + '/ueditor/',
          //focus時自動清空初始化時的內容
          autoClearinitialprojectBasis:true,
          //關閉字數統計
          wordCount:false,
          /* maximumWords:8000, */       //允許的最大字符數
          //關閉elementPath 元素路徑
          elementPathEnabled:false,
          //默認的編輯區域高度
          initialFrameHeight:300,
          initialFrameWidth:null  //初始化編輯器寬度,默認1000
     });
 
     //自定義請求地址
 
     UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
     UE.Editor.prototype.getActionUrl = function(action) {
        /*  if (action == 'uploadimage' || action == 'uploadimage') {
             return '<%=basePath%>/management/project/projectApplication/upload/img';
         } else { */
             return this._bkGetActionUrl.call(this, action);
         /* } */
     }
 
     /**
     * js獲取項目根路徑，如： http://localhost:8083/project
     */
     function getRootPath(){
         //獲取當前網址，如： http://localhost:8083/project/share/meun.jsp
         var curWwwPath=window.document.location.href;
 
         //獲取主機地址之後的目錄，如： project/share/meun.jsp
         var pathName=window.document.location.pathname;
 
         var pos=curWwwPath.indexOf(pathName);
 
         //獲取主機地址，如： http://localhost:8083
         var localhostPaht=curWwwPath.substring(0,pos);
 
         //獲取帶"/"的項目名，如：/project
         var projectName=pathName.substring(0,pathName.substr(1).indexOf('/')+1);
 
         //return localhostPaht + projectName;
         return localhostPaht  + projectName;;
     }

可以在ueditor.config.js文件中修改關於編輯器的設置，對於上傳圖片，還需要後端去寫一個控制層在ueditor.config.js文件中配置下路徑

// 服務器統一請求接口路徑
        , serverUrl: "/api/upload/ueditorUpload"

最後，是這個插件的一個小bug，最後自己手動解決了，就是設置文字居中的時候，取出來的內容竟然沒有居中

最後發現是config裏面標籤白名單設置的問題自己添加下

將‘whitList’對象下的p由

p:      ['class', 'style'],

改爲

p:      ['class', 'style','id'],

添加一個id的屬性，這個bug就決絕了