rte.vue 1.3 KB
Newer Older
Mr.奇淼('s avatar
Mr.奇淼( 已提交
1
<template>
K
klausY 已提交
2 3 4 5 6 7 8 9 10
    <div class="edit_container">
        <quill-editor
                v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
        </quill-editor>
        <button v-on:click="saveHtml">保存</button>
Mr.奇淼('s avatar
Mr.奇淼( 已提交
11 12
    </div>
</template>
K
klausY 已提交
13

Mr.奇淼('s avatar
Mr.奇淼( 已提交
14
<script>
K
klausY 已提交
15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48
    export default {
        name: 'App',
        data(){
            return {
                content: `<p>hello world</p>`,
                editorOption: {}
            }
        },computed: {
            editor() {
                return this.$refs.myQuillEditor.quill;
            },
        },methods: {
            onEditorReady(editor) { // 准备编辑器
            },
            onEditorBlur(){}, // 失去焦点事件
            onEditorFocus(){}, // 获得焦点事件
            onEditorChange(){}, // 内容改变事件
            saveHtml:function(event){
                alert(this.content);
            }
        }
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
</style>