1..項目建立與初始化javascript
在安裝好腳手架的依賴後，要執行 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'css
2.使用vue-html5-editor富文本編輯器
新建一個common文件夾用於存放咱們的工具類js文件，而後將下面的代碼copy進去：html
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中引入這個初始化的函數：vue
import initRichText from './common/initHTMLEditor.js' import 'font-awesome/css/font-awesome.min.css'
3.使用組件html5
<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的字符串）：java
4.常見問題解決npm
（1）自定義工具欄的模塊json
若是不想要顯示這麼多的工具，則只要配置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) } } },