减少层级

Former-commit-id: 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 889b557de9234ebb4364ebb87f5bf8b0935294eb [formerly 41b59da80ab4c5c0b9eceeec8fd2f527d22c4ab8 [formerly 3dc1bcda38f391962e102a990c2b68b7a33d4683]]]]] Former-commit-id: 3cd64e384a81021adeab4674894f3e4ba934924a Former-commit-id: 6c1d5c80613ac406276127f3b01566ace11becab Former-commit-id: fb1dae74ec5eea07c96632f6e8841b1bc42a614a [formerly 159c5ea89b386d484b2ef90733075633b156d87e] Former-commit-id: 5be175c876d576777072d4430a8520fc7b255112 Former-commit-id: ec65f0871fca703dbbc7a428ca9e4b582043c361 Former-commit-id: 80b73945bd350373ce7e3d15b8f0432c1427d8e3 Former-commit-id: cc2112baadf022e42428dd0019a764e266570b21 Former-commit-id: b7c059087a58e03c0d954af34b30f94b3e03b60c
2018-07-24 15:54:10 +08:00
parent b68419454c
commit 069a571195
24 changed files with 23 additions and 30 deletions
--- a/src/components/d2-quill/index.vue
+++ b/src/components/d2-quill/index.vue
@@ -0,0 +1,77 @@
+<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: 'd2-quill',
+  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'],
+            [{ '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>