JSFiddle - React, Tailwind, and code Playground

by zhangchi

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/quill-vuejs.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">
  <quill-editor
    ref="quillEditor"
    class="editor"
    v-model="content"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @ready="onEditorReady($event)"
  />
  <br>
  <div class="content ql-editor" v-html="content"></div>
</div>

CSS

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

.editor {
  height: 500px;
}

JavaScript

Vue.use(VueQuillEditor)
new Vue({
	 el: '#vueapp',
	 data: {
     content: '<h2>I\'m quill vuejs example 🙂</h2>',
     editorOption: {
        theme: 'snow'
      }
	 	},
    methods: {
      onEditorBlur(quill) {
        console.log('editor blur!', quill)
      },
      onEditorFocus(quill) {
        console.log('editor focus!', quill)
      },
      onEditorReady(quill) {
        console.log('editor ready!', quill)
      }
    },
    computed: {
      editor() {
        return this.$refs.quillEditor.quill
      }
    },
    mounted() {
      console.log('this is quill instance object', this.editor)
    }
	})