前端富文本編輯器 vue-html5-editor

1..項目建立與初始化

在安裝好腳手架的依賴後，要執行 npm install vue-html5-editor -S 來安裝這個富文本插件，因爲這個富文本插件的圖標是依賴font-awesome.css的，因此要cnpm install font-awesome --save安裝這個css而後在main.js中引入這個css   import 'font-awesome/css/font-awesome.min.css'

2.使用vue-html5-editor富文本編輯器

新建一個common文件夾用於存放咱們的工具類js文件，而後將下面的代碼copy進去：

 

import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
export default function () {
  let opt = {
    // 全局組件名稱，使用new VueHtml5Editor(options)時該選項無效
    name: "vue-html5-editor",
    // 是否顯示模塊名稱，開啓的話會在工具欄的圖標後臺直接顯示名稱
    showModuleName: true,
    // 自定義各個圖標的class，默認使用的是font-awesome提供的圖標
    icons: {
      text: "fa fa-pencil",
      color: "fa fa-paint-brush",
      font: "fa fa-font",
      align: "fa fa-align-justify",
      list: "fa fa-list",
      link: "fa fa-chain",
      unlink: "fa fa-chain-broken",
      tabulation: "fa fa-table",
      image: "fa fa-file-image-o",
      hr: "fa fa-minus",
      eraser: "fa fa-eraser",
      undo: "fa-undo fa",
      "full-screen": "fa fa-arrows-alt",
      info: "fa fa-info",
    },
    // 配置圖片模塊
    image: {
      // 文件最大致積，單位字節  
      sizeLimit: 512 * 1024 * 10,
      // 上傳參數,默認把圖片轉爲base64而不上傳
      // upload config,default null and convert image to base64
      upload: {
        url:null,
        headers:{},
        params: {},
        fieldName:{}
      },
      // 壓縮參數,默認使用localResizeIMG進行壓縮,設置爲null禁止壓縮
      // width和height是文件的最大寬高
      compress: {
        width: 600,
        height: 600,
        quality: 80
      },
      // 響應數據處理,最終返回圖片連接
      uploadHandler(responseText){
//      default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
        var json = JSON.parse(responseText);
                if(json.status == 200){
                    return json.data
                }else{
                    alert(json.error)
                }
      }
    },
    // 語言，內建的有英文（en-us）和中文（zh-cn）
    language: "zh-cn",
    // 自定義語言
    i18n: {
      "zh-cn": {
        "align": "對齊方式",
        "image": "圖片",
        "list": "列表",
        "link": "連接",
        "unlink": "去除連接",
        "table": "表格",
        "font": "文字",
        "full screen": "全屏",
        "text": "排版",
        "eraser": "格式清除",
        "info": "關於",
        "color": "顏色",
        "please enter a url": "請輸入地址",
        "create link": "建立連接",
        "bold": "加粗",
        "italic": "傾斜",
        "underline": "下劃線",
        "strike through": "刪除線",
        "subscript": "上標",
        "superscript": "下標",
        "heading": "標題",
        "font name": "字體",
        "font size": "文字大小",
        "left justify": "左對齊",
        "center justify": "居中",
        "right justify": "右對齊",
        "ordered list": "有序列表",
        "unordered list": "無序列表",
        "fore color": "前景色",
        "background color": "背景色",
        "row count": "行數",
        "column count": "列數",
        "save": "肯定",
        "upload": "上傳",
        "progress": "進度",
        "unknown": "未知",
        "please wait": "請稍等",
        "error": "錯誤",
        "abort": "中斷",
        "reset": "重置"
      }
    },
    // 隱藏不想要顯示出來的模塊
    hiddenModules: [],
    // 自定義要顯示的模塊，並控制順序
    visibleModules: [
//    "text",
//    "color",
      "font",
      "align",
//    "list",
//    "link",
//    "unlink",
//    "tabulation",
      "image",
//    "hr",
//    "eraser",
      "undo",
//    "full-screen",
//    "info",
    ],
    // 擴展模塊，具體能夠參考examples或查看源碼
    // extended modules
    modules: {
      //omit,reference to source code of build-in modules
    }
  };
  Vue.use(VueHtml5Editor, opt);
}

接着在main.js中引入這個初始化的函數：

import initRichText from './common/initHTMLEditor.js'
import 'font-awesome/css/font-awesome.min.css'

3.使用組件

<template>
    <div class="rich-text-test">
        <vue-html5-editor :content="content" :height="400" @change="updateData"></vue-html5-editor>
    </div>
</template>

<script>
export default {
    data() {
        return {
            content: ""
        };
    },
    methods: {
        updateData(e = "") {
            let c1 = e.replace(/<img width="100%"/g, "<img");
            let c2 = c1.replace(/<img/g, '<img width="100%"');
            this.content = c2;
            console.log(this.content);
        }
    }
};
</script>

<style scoped="scoped">
.rich-text-test{
    margin-top: 40px;
}
</style>

這個height屬性是設置內容區的高度，content是內容區的數據內容，@change事件是內容區的監聽事件，會在發生變化時觸發，該函數接收一個參數，表示當前編輯器中的內容。運行結果以下（這裏對圖片的操做是轉成base64的字符串）：

4.常見問題解決

（1）自定義工具欄的模塊

若是不想要顯示這麼多的工具，則只要配置visibleModules便可：

 修改initHTMLEditor.js  中的配置便可

（2）移動端圖片上傳樣式的處理

這裏我沒有配置服務端的上傳文件的接口，因此我就直接將圖片轉成base64的來處理。可是這樣會有問題，在PC端圖片是能夠修改大小的，可是在移動端上傳的圖片上是原圖，也就是很大，圖文混排的時候很是很差看，也很差編輯。這時候我作的處理挺投機取巧的，可是也是可行的方法。咱們知道change函數是在內容發生變化時觸發的，這時候咱們只要將獲取到的內容作一下修改便可，看代碼：

updateData(e = "") {
    let c1 = e.replace(/<img width="100%"/g, "<img");
     let c2 = c1.replace(/<img/g, '<img width="100%"');
     this.content = c2;
},    

這樣就能夠了。

（3）圖片上傳的主要問題

圖片上傳的方法這裏分兩種。

第一種是默認把圖片轉爲base64而不上傳，最後點擊發布上傳全部。這裏有個缺點是若是上傳的圖片太大並且有多張的話轉爲base64會很大，會出現由於文件太大上傳不過去的狀況，因此能夠放棄這種方法。

第二種是在配置文件中（上面說的新建的js中）修改幾行代碼便可。原理是每上傳一張圖片，先上傳到服務器而後返回一個圖片連接地址，至於返回連接地址怎麼展現在頁面的問題，插件已經爲咱們封裝的很好，直接在下面的uploadHandler函數return返回的連接就能夠啦。在作的過程當中出現了上傳圖片失敗問題，緣由出在接口問題上，這裏的接口寫成input file上傳不是base64的接口就能夠。

// 配置圖片模塊
    image: {
      // 文件最大致積，單位字節  
      sizeLimit: 512 * 1024 * 10,
      // 上傳參數,默認把圖片轉爲base64而不上傳
      // upload config,default null and convert image to base64
      upload: {
        url:'圖片上傳接口地址',
        headers:{},
        params: {},
        fieldName:'file'
      },
      // 壓縮參數,默認使用localResizeIMG進行壓縮,設置爲null禁止壓縮
      // width和height是文件的最大寬高
      compress: {
        width: 600,
        height: 600,
        quality: 80
      },
      // 響應數據處理,最終返回圖片連接
      uploadHandler(responseText){
//      default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"}
        var json = JSON.parse(responseText);
                if(json.status == 200){
                    return json.data
                }else{
                    alert(json.error)
                }
      }
    },