no message

Former-commit-id: 8ef30c0089a7268a441a328fc74f113b0af017a1
Former-commit-id: 2d06ade06f52ff92a2fefcf42b8b114b3506ca27
Former-commit-id: 5fda8f1a5e9ec9bc5e30e17f44f21bf1a43666cf

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>

src/components/index.js

@@ -16,41 +16,47 @@ Vue.component('SplitPane', SplitPane)
 // 名称：页面容器
 // 用途：每个页面的最外层元素，统一样式
 Vue.component('Container', resolve => {
-  require(['@/components/core/Container/index.vue'], resolve)
+  require(['@/components/core/Container'], resolve)
 })
 
 // 名称：markdown加载器
 // 用途：加载一个markdown文件
 Vue.component('Markdown', resolve => {
-  require(['@/components/core/Markdown/index.vue'], resolve)
+  require(['@/components/core/Markdown'], resolve)
 })
 
 // 名称：github 链接
 // 用途：本质上这就是一个 github 的链接
 Vue.component('GithubLink', resolve => {
-  require(['@/components/demo/GithubLink/index.vue'], resolve)
+  require(['@/components/demo/GithubLink'], resolve)
 })
 
 // 名称：SimpleMDE markdown 编辑器
 // 用途：SimpleMDE markdown 编辑器
 Vue.component('SimpleMDE', resolve => {
-  require(['@/components/core/SimpleMDE/index.vue'], resolve)
+  require(['@/components/core/SimpleMDE'], resolve)
+})
+
+// 名称：富文本编辑器
+// 用途：富文本编辑器
+Vue.component('QuillEditor', resolve => {
+  require(['@/components/core/QuillEditor'], resolve)
 })
 
 // 名称：数字动画
 // 用途：数字动画
 Vue.component('CountUp', resolve => {
-  require(['@/components/core/CountUp/index.vue'], resolve)
+  require(['@/components/core/CountUp'], resolve)
 })
 
 // 名称：代码高亮
 // 用途：代码高亮
 Vue.component('Highlight', resolve => {
-  require(['@/components/core/Highlight/index.vue'], resolve)
+  require(['@/components/core/Highlight'], resolve)
 })
 
 // 名称：页面Header
 // 用途：页面Header
 Vue.component('PageHeader', resolve => {
-  require(['@/components/demo/PageHeader/index.vue'], resolve)
+  require(['@/components/demo/PageHeader'], resolve)
 })