鍍金池/ 問(wèn)答/HTML/ 有關(guān) vue-html5-editor的使用方法

有關(guān) vue-html5-editor的使用方法

<template>

<div data-page="releaseNotice">
    <vue-html5-editor :content="content" :height="500"></vue-html5-editor>
</div>

</template>

<script>

import Vue from 'vue'
import VueHtml5Editor from 'vue-html5-editor'
Vue.use(VueHtml5Editor,options);
export default {
    data() {
        return {}
    },
    methods : {
        Vue.use(VueHtml5Editor, {
               // 全局組件名稱(chēng),使用new VueHtml5Editor(options)時(shí)該選項(xiàng)無(wú)效 
            // global component name
            name: "vue-html5-editor",
            // 是否顯示模塊名稱(chēng),開(kāi)啟的話會(huì)在工具欄的圖標(biāo)后臺(tái)直接顯示名稱(chēng)
            // if set true,will append module name to toolbar after icon
            showModuleName: false,
            // 自定義各個(gè)圖標(biāo)的class,默認(rèn)使用的是font-awesome提供的圖標(biāo)
            // 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: {
                // 文件最大體積,單位字節(jié)  max file size
                sizeLimit: 512 * 1024,
                // 上傳參數(shù),默認(rèn)把圖片轉(zhuǎn)為base64而不上傳
                // upload config,default null and convert image to base64
                upload: {
                    url: null,
                    headers: {},
                    params: {},
                    fieldName: {}
                },
                // 壓縮參數(shù),默認(rèn)使用localResizeIMG進(jìn)行壓縮,設(shè)置為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
                },
                // 響應(yīng)數(shù)據(jù)處理,最終返回圖片鏈接
                // 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
                    }
                }
            },
            // 語(yǔ)言,內(nèi)建的有英文(en-us)和中文(zh-cn)
            //default en-us, en-us and zh-cn are built-in
            language: "zh-cn",
            // 自定義語(yǔ)言
            i18n: {
                //specify your language here
                "zh-cn": {
                    "align": "對(duì)齊方式",
                    "image": "圖片",
                    "list": "列表",
                    "link": "鏈接",
                    "unlink": "去除鏈接",
                    "table": "表格",
                    "font": "文字",
                    "full screen": "全屏",
                    "text": "排版",
                    "eraser": "格式清除",
                    "info": "關(guān)于",
                    "color": "顏色",
                    "please enter a url": "請(qǐng)輸入地址",
                    "create link": "創(chuàng)建鏈接",
                    "bold": "加粗",
                    "italic": "傾斜",
                    "underline": "下劃線",
                    "strike through": "刪除線",
                    "subscript": "上標(biāo)",
                    "superscript": "下標(biāo)",
                    "heading": "標(biāo)題",
                    "font name": "字體",
                    "font size": "文字大小",
                    "left justify": "左對(duì)齊",
                    "center justify": "居中",
                    "right justify": "右對(duì)齊",
                    "ordered list": "有序列表",
                    "unordered list": "無(wú)序列表",
                    "fore color": "前景色",
                    "background color": "背景色",
                    "row count": "行數(shù)",
                    "column count": "列數(shù)",
                    "save": "確定",
                    "upload": "上傳",
                    "progress": "進(jìn)度",
                    "unknown": "未知",
                    "please wait": "請(qǐng)稍等",
                    "error": "錯(cuò)誤",
                    "abort": "中斷",
                    "reset": "重置"
                }
            },
            // 隱藏不想要顯示出來(lái)的模塊
            // 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",
            ],
            // 擴(kuò)展模塊,具體可以參考examples或查看源碼
            // extended modules
            modules: {
                //omit,reference to source code of build-in modules
            }
        })
    },
    components: { VueHtml5Editor }
}

</script>

這樣寫(xiě)有錯(cuò),請(qǐng)誰(shuí)告訴我正確的使用方法

回答
編輯回答
汐顏

定義一下content就好了

2017年3月18日 22:16
編輯回答
枕頭人

我想知道用這個(gè)編輯器保存的內(nèi)容在別的頁(yè)面怎么顯示出來(lái)?再加個(gè)編輯器?

2017年11月18日 03:08
編輯回答
墻頭草

把methods里面的vue.use刪掉,放在外面`Vue.use(VueHtml5Editor, {

// 全局組件名稱(chēng),使用new VueHtml5Editor(options)時(shí)該選項(xiàng)無(wú)效  
// global component name 
name: "vue-html5-editor",
// 是否顯示模塊名稱(chēng),開(kāi)啟的話會(huì)在工具欄的圖標(biāo)后臺(tái)直接顯示名稱(chēng) 
// if set true,will append module name to toolbar after icon 
showModuleName: false,
// 自定義各個(gè)圖標(biāo)的class,默認(rèn)使用的是font-awesome提供的圖標(biāo) 
// 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: {
    // 文件最大體積,單位字節(jié)  max file size 
    sizeLimit: 512 * 1024,
    // 上傳參數(shù),默認(rèn)把圖片轉(zhuǎn)為base64而不上傳 
    // upload config,default null and convert image to base64 
    upload: {
        url: null,
        headers: {},
        params: {},
        fieldName: {}
    },
    // 壓縮參數(shù),默認(rèn)使用localResizeIMG進(jìn)行壓縮,設(shè)置為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
    },
    // 響應(yīng)數(shù)據(jù)處理,最終返回圖片鏈接 
    // 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
        }
    }
},
// 語(yǔ)言,內(nèi)建的有英文(en-us)和中文(zh-cn) 
//default en-us, en-us and zh-cn are built-in 
language: "zh-cn",
// 自定義語(yǔ)言 
i18n: {
    //specify your language here 
    "zh-cn": {
        "align": "對(duì)齊方式",
        "image": "圖片",
        "list": "列表",
        "link": "鏈接",
        "unlink": "去除鏈接",
        "table": "表格",
        "font": "文字",
        "full screen": "全屏",
        "text": "排版",
        "eraser": "格式清除",
        "info": "關(guān)于",
        "color": "顏色",
        "please enter a url": "請(qǐng)輸入地址",
        "create link": "創(chuàng)建鏈接",
        "bold": "加粗",
        "italic": "傾斜",
        "underline": "下劃線",
        "strike through": "刪除線",
        "subscript": "上標(biāo)",
        "superscript": "下標(biāo)",
        "heading": "標(biāo)題",
        "font name": "字體",
        "font size": "文字大小",
        "left justify": "左對(duì)齊",
        "center justify": "居中",
        "right justify": "右對(duì)齊",
        "ordered list": "有序列表",
        "unordered list": "無(wú)序列表",
        "fore color": "前景色",
        "background color": "背景色",
        "row count": "行數(shù)",
        "column count": "列數(shù)",
        "save": "確定",
        "upload": "上傳",
        "progress": "進(jìn)度",
        "unknown": "未知",
        "please wait": "請(qǐng)稍等",
        "error": "錯(cuò)誤",
        "abort": "中斷",
        "reset": "重置"
    }
},
// 隱藏不想要顯示出來(lái)的模塊 
// 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",
],
// 擴(kuò)展模塊,具體可以參考examples或查看源碼 
// extended modules 
modules: {
    //omit,reference to source code of build-in modules 
}

})`

2018年6月29日 17:06
編輯回答
半心人

請(qǐng)問(wèn)這個(gè)content是自帶的,還是要定義一下的?

2018年5月31日 22:33
編輯回答
憶當(dāng)年

這個(gè)插件里面支持切換成源碼模式嗎?

2017年6月5日 13:45