vue 编辑器使用方法


html代码

<vue-html5-editor :content="content" :height="300" :show-module-name="showModuleName"
                      @change="updateData" ref="editor"></vue-html5-editor>

script 中代码

Vue.use(VueHtml5Editor, {
        showModuleName: true,
        image: {
            sizeLimit: 512 * 1024,
            compress: true,
            width: 500,
            height: 500,
            quality: 80
        }
    })

    new Vue({
        el: "#app",
        data: {
            content: "<h3>vue html5 editor</h3>",
            showModuleName: false,
        },
        methods: {
            updateData: function (data) {
                // sync content to component
                this.content = data
            },
            fullScreen: function () {
                this.$refs.editor.enableFullScreen()
            },
            focus: function () {
                this.$refs.editor.focus()
            },
            reset:function () {
                var newContent = prompt('please input some html code: ')
                if(newContent){
                    this.content = newContent
                }
            }
        }
    })
Logo

前往低代码交流专区

更多推荐