vue Vue-Quill-Editor 基於Quill、適用於Vue的富文本編輯器（一）基礎封裝

最近vue項目用到了富文本，選了好多不合適，最後還是用了quillEditor 記錄下遇到的問題，下次直接用就號了。

這是基礎模版有兩個遺留問題：

1. 圖片默認是base64圖片，怎麼爲自己接口調用的地址
2. 默認是英文，怎麼漢化

解決方案參考：（vue Vue-Quill-Editor 基於Quill、適用於Vue的富文本編輯器（二）解決圖片上傳base64，漢化文字問題）

1. 富文本效果

2. npm 安裝vue-quill-editor

vue-quill-editor

3. 組件代碼

<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-calendar"></i> 表單</el-breadcrumb-item>
                <el-breadcrumb-item>編輯器</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container"   width="200px">
            <div class="plugins-tips">
                Vue-Quill-Editor：基於Quill、適用於Vue2的富文本編輯器。
                訪問地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
            </div>
            <quill-editor ref="myTextEditor" v-model="content" :options="editorOption"></quill-editor>
            <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
        </div>
    </div>
</template>

<script>
    import 'quill/dist/quill.core.css';
    import 'quill/dist/quill.snow.css';
    import 'quill/dist/quill.bubble.css';
    import { quillEditor } from 'vue-quill-editor';
    export default {
        name: 'editor',
        data: function(){
            return {
                content: '',
                editorOption: {
                    placeholder: 'Hello World'
                }
            }
        },
        components: {
            quillEditor
        },
        methods: {
            onEditorChange({ editor, html, text }) {
                this.content = html;
            },
            submit(){
                console.log(this.content);
                this.$message.success('提交成功！');
            }
        }
    }
</script>
<style scoped>
    .editor-btn{
        margin-top: 20px;
    }
</style>