vue && vue-html5-editor && font-awesome

想在vue中使用富文本框組件，網上搜索了一個vue-html5-editor。

按 vue-html5-editor文檔 ， 安裝插件。

Npm

npm install vue-html5-editor --save-dev

而後在啓動文件main.js中引入

import Vue from 'vue';
import App from './app.vue';
import router from '../router';
import VueHtml5Editor from 'vue-html5-editor';


Vue.use(VueHtml5Editor, {
    // 全局組件名稱，使用new VueHtml5Editor(options)時該選項無效  
    // global component name 
    name: "vue-html5-editor",
    // 是否顯示模塊名稱，開啓的話會在工具欄的圖標後臺直接顯示名稱 
    // if set true,will append module name to toolbar after icon 
    showModuleName: true,
    // 自定義各個圖標的class，默認使用的是font-awesome提供的圖標 
    // custom icon class of built-in modules,default using 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",
    },
    // 配置圖片模塊 
    // config image module 
    image: {
        // 文件最大致積，單位字節  max file size 
        sizeLimit: 512 * 1024,
        // 上傳參數,默認把圖片轉爲base64而不上傳 
        // upload config,default null and convert image to base64 
        upload: {
            url: null,
            headers: {},
            params: {},
            fieldName: {}
        },
        // 壓縮參數,默認使用localResizeIMG進行壓縮,設置爲null禁止壓縮 
        // compression config,default resize image by localResizeIMG (https://github.com/think2011/localResizeIMG) 
        // set null to disable compression 
        compress: {
            width: 1600,
            height: 1600,
            quality: 80
        },
        // 響應數據處理,最終返回圖片連接 
        // handle response data，return image url 
        uploadHandler(responseText){
            //default accept json data like  {ok:false,msg:"unexpected"} or {ok:true,data:"image url"} 
            var json = JSON.parse(responseText)
            if (!json.ok) {
                alert(json.msg)
            } else {
                return json.data
            }
        }
    },
    // 語言，內建的有英文（en-us）和中文（zh-cn） 
    //default en-us, en-us and zh-cn are built-in 
    language: "zh-cn",
    // 自定義語言 
    i18n: {
        //specify your language here 
        "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": "重置"
        }
    },
    // 隱藏不想要顯示出來的模塊 
    // the modules you don't want 
    hiddenModules: [],
    // 自定義要顯示的模塊，並控制順序 
    // keep only the modules you want and customize the order. 
    // can be used with hiddenModules together 
    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 
    }
});
new Vue({
    router,
    render: h => h(App)

    /*render:function(createElement){
        return createElement(App);
    }*/
    
    /*components:{
        'app':App
    }*/
}).$mount('#app');

而後在對應須要富文本編輯器的頁面引入 < vue-html5-editor >< /vue-html5-editor > 組件。

<template>
    <div class="page  article">
        <vue-html5-editor :content="content"></vue-html5-editor>
    </div>
</template>

可是 < vue-html5-editor > 默認使用的是font-awesome提供的圖標，因此須要加載font-awesome到Vue項目中。

npm install style-loader --save-dev
npm install css-loader --save-dev
npm install file-loader --save-dev
npm install font-awesome --save-dev

在main.js裏添加

import 'font-awesome/css/font-awesome.css'

在webpack.dev.config中配置以下：

{
        test: /\.css$/,
        loader: 'style-loader!css-loader'
    },
    //轉化ES6語法
    {
        test: /\.js$/,
        use: 'babel',
        exclude: /node_modules/
    },
    //解析.vue文件
    {
        test: /\.vue$/,
        loader: 'vue'
    },
    //圖片轉化，小於8K自動轉化爲base64的編碼
    {
        test: /\.(png|jpg|gif)$/,
        loader: 'url',
        options: {
            limit: 8192
        }
    },
    {
      test: /\.(eot(|\?v=.*)|woff(|\?v=.*)|woff2(|\?v=.*)|ttf(|\?v=.*)|svg(|\?v=.*))$/,
      loader: 'file-loader',
      options: { name: 'fonts/[name].[ext]' },
    }

成功引入vue-html5-editor和font-awesome。