VueQuillEditor

CDN example

by l xk

HTML

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- Quill JS Vue -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-quill-editor.js"></script>
<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.4/quill.core.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.snow.css" rel="stylesheet">
<link href="https://cdn.quilljs.com/1.3.4/quill.bubble.css" rel="stylesheet">

<div id="vueapp">
    <p>{{message}}</p>
    <quill-editor v-model="content"
                  ref="quillEditorA"
                  :options="editorOption"
                  @blur="onEditorBlur($event)"
                  @focus="onEditorFocus($event)"
                  @ready="onEditorReady($event)">
		</quill-editor>
    <div class="content ql-editor" v-html="content"></div>
    <br>
    <local-quill-editor v-model="content2"
                        ref="quillEditorB"
                        :options="editorOption"
                        @blur="onEditorBlur($event)"
                        @focus="onEditorFocus($event)"
                        @ready="onEditorReady($event)">
		</local-quill-editor>
    <div class="content ql-editor" v-html="content2"></div>
</div>

CSS

.quill-editor,
.content {
  background-color: white;
}

JavaScript

Vue.use(VueQuillEditor)
new Vue({
	 el: '#vueapp',
	 data: {
     message: 'Hi from Vue.',
     content: '<p class="ql-align-center">等钙粉</p><p><a href="www.baidu.com" target="_blank">www.baidu.com</a></p><p class="ql-align-right">哈哈哈哈哈啊哈哈</p><p><img src="http://localhost:8080/hzmis/userfiles/system/news/2019/01/1547028784450.jpg"></p><h2><span class="ql-size-large" style="color: rgb(230, 0, 0);">这是用富文本编写的新闻格式内容</span></h2><p><img src="http://localhost:8080/hzmis/userfiles/system/news/2019/01/1547189301555.jpg"></p>',
     content2: '<h2>I am Example B</h2>',
     editorOption: {
        theme: 'snow'
      }
	 	},
    components: {
    	LocalQuillEditor: VueQuillEditor.quillEditor
    },
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    },
    computed: {
      editorA() {
        return this.$refs.quillEditorA.quill
      },
      editorB() {
        return this.$refs.quillEditorB.quill
      }
    },
    mounted() {
      console.log('this is quill A instance object', this.editorA, 'B instance', this.editorB)
    }
	})