編輯器開發（一）：準備作業，百度ueditor移入專案當中

ueditor富文本編輯器

Ueditor 富文本編輯器 由百度web前端研發部開發所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，

下載百度ueditor

詳細介紹

官方git倉庫

看完介紹 去倉庫克隆下代碼

這里如果沒有安裝 grunt 可以在終端使用 npx grunt default

這時根目錄下會出現個dist目錄 進入dist把這個檔案解壓

集成進vue 專案

1. 將 下載好的專案解壓放在 vue專案的public下面（該檔案就是上面dist里面的那個檔案 自己改名字放入就行）

   

2. 終端下載插件

   npm i vue-ueditor-wrap -S
   

   新建個 ueditor.vue 組件 在src下 components 下面

   <template>
     <div class="editor-box">
       <vue-ueditor-wrap :config="myConfig" v-model="msg"></vue-ueditor-wrap>
     </div>
   </template>
   
   <script>
   
   import 'ue/ueditor.config.js' // ue 可以自己設定成路徑簡寫 沒有設定就找到public
   import 'ue/ueditor.all.js'
   import 'ue/lang/zh-cn/zh-cn.js' 
   import 'ue/ueditor.parse.min.js'
   
   import VueUeditorWrap from 'vue-ueditor-wrap' // ES6 Module 引入
   
   export default {
     props: {
   
     },
     components: {
       VueUeditorWrap, // 插入
     },
     data() {
       return {
         msg: '這是 vue-ueditor-wrap ！',
         myConfig: {
           // 編輯器不自動被內容撐高
           autoHeightEnabled: false,
           // 初始容器高度
           initialFrameHeight: 240,
           // 初始容器寬度
           initialFrameWidth: '100%',
           // 上傳檔案介面（這個地址是我為了方便各位體驗檔案上傳功能搭建的臨時介面，請勿在生產環境使用！！！）
           serverUrl: 'http://35.201.165.105:8000/controller.php',
           // UEditor 資源檔案的存放路徑，如果你使用的是 vue-cli 生成的專案，通常不需要設定該選項，vue-ueditor-wrap 會自動處理常見的情況，如果需要特殊配置，參考下方的常見問題2
           UEDITOR_HOME_URL: '/bseditor/',
           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', //段落格式
                 'simpleupload', //單圖上傳
                 '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', // 圖表
             ]
           ]
         }
       };
     },
     computed: {
   
     },
     watch: {
   
     },
     created() {
   
     },
     mounted() {
   
     },
     methods: {
   
     },
   };
   </script>
   
   <style scoped>
   .editor-box {
     width: 100%;
   }
   </style>
   
   

   ---

然后在需要的地方引入就可以了

換膚

默認的樣式有點老舊 不符合現代審美

找到主題樣式檔案 /themes/default/css/ueditor.css

原來默認是一張精靈圖來渲染工具列上的圖示 但是這個樣式顏色太老舊了 可以自己去換

每一個按鈕都有對應的css 進行背景圖的渲染就行