no message

Former-commit-id: 8ef30c0089a7268a441a328fc74f113b0af017a1 Former-commit-id: 2d06ade06f52ff92a2fefcf42b8b114b3506ca27 Former-commit-id: 5fda8f1a5e9ec9bc5e30e17f44f21bf1a43666cf
2018-01-16 15:26:07 +08:00
parent 8d783c5bc8
commit fda763cc43
7 changed files with 166 additions and 9 deletions
--- a/src/components/core/QuillEditor/index.vue
+++ b/src/components/core/QuillEditor/index.vue
@@ -0,0 +1,78 @@
+<template>
+  <div ref="editor"></div>
+</template>
+
+<script>
+import Quill from 'quill'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+export default {
+  name: 'QuillEditor',
+  props: {
+    value: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      Quill: undefined,
+      options: {
+        theme: 'snow',
+        bounds: document.body,
+        debug: 'warn',
+        modules: {
+          toolbar: [
+            ['bold', 'italic', 'underline', 'strike'],
+            ['blockquote', 'code-block'],
+            [{ 'header': 1 }, { 'header': 2 }],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            [{ 'script': 'sub' }, { 'script': 'super' }],
+            [{ 'indent': '-1' }, { 'indent': '+1' }],
+            [{ 'direction': 'rtl' }],
+            [{ 'size': ['small', false, 'large', 'huge'] }],
+            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
+            [{ 'color': [] }, { 'background': [] }],
+            [{ 'font': [] }],
+            [{ 'align': [] }],
+            ['clean'],
+            ['link', 'image']
+          ]
+        },
+        placeholder: '书写你的内容',
+        readOnly: false
+      }
+    }
+  },
+  mounted () {
+    this.init()
+  },
+  methods: {
+    init () {
+      const editor = this.$refs.editor
+      this.Quill = new Quill(editor, this.options)
+      // 默认值
+      this.Quill.pasteHTML(this.value)
+      // 绑定事件
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        const html = this.$refs.editor.children[0].innerHTML
+        const text = this.Quill.getText()
+        const quill = this.Quill
+        this.$emit('input', html)
+        this.$emit('change', {html, text, quill})
+      })
+      this.Quill.on('text-change', (delta, oldDelta, source) => {
+        this.$emit('text-change', delta, oldDelta, source)
+      })
+      this.Quill.on('selection-change', (range, oldRange, source) => {
+        this.$emit('selection-change', range, oldRange, source)
+      })
+      this.Quill.on('editor-change', (eventName, ...args) => {
+        this.$emit('editor-change', eventName, ...args)
+      })
+    }
+  }
+}
+</script>