CDN方式使用 vue-quill-editor(包含字号、字体、图片大小编辑、显示html源码等扩展)

效果展示

使用方法

<link rel="stylesheet" href="css/quill.core.css">
<link rel="stylesheet" href="css/quill.snow.css">
<link rel="stylesheet" href="css/quill.bubble.css">
<link rel="stylesheet" href="css/lleditor.css">

<div id="vueapp">
	<ll-editor :html="html" :width="width" :name="name" :maxheight="maxHeight" @getcontent="getLLContent"></ll-editor>
</div>

<script src="js/vue.min.js"></script>
<script src="js/quill.js"></script>
<script src="js/vue-quill-editor.js"></script>
<script src="js/image-resize.min.js"></script>
<script src="js/quill.eeSourceBtn.js"></script>
<script src="js/llquill.js"></script>
<script>
    var vm = new Vue({
        el: '#vueapp',
        data: {
            html: '',
            width: '660px',
            maxHeight: '500px',
            minHeight: '400px',
            name: 'content' // form表单提交的 name
        },
        methods: {
            getLLContent(html){
                console.log('html:',html);
                this.html = html
            },
        }
    })
</script>

源代码

下载即可使用：vue-editor

有任何不解或补充请评论留言~