no message

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

build/webpack.base.conf.js

@@ -1,6 +1,7 @@
 'use strict'
 const path = require('path')
 const utils = require('./utils')
+const webpack = require('webpack')
 const config = require('../config')
 const vueLoaderConfig = require('./vue-loader.conf')
 

package.json

@@ -22,6 +22,7 @@
     "marked": "^0.3.9",
     "mockjs": "^1.0.1-beta3",
     "papaparse": "^4.3.6",
+    "quill": "^1.3.4",
     "simplemde": "^1.11.2",
     "vue": "^2.5.2",
     "vue-grid-layout": "^2.1.11",

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)
 })

src/pages/demo/plugins/quill-editor/demo.vue

@@ -0,0 +1,40 @@
+<template>
+  <Container type="ghost">
+    <el-card>
+      <QuillEditor
+        v-model="value"
+        @text-change="textChangeHandler"
+        @selection-change="selectionChangeHandler"
+        @editor-change="editorChangeHandler">
+      </QuillEditor>
+      {{value}}
+    </el-card>
+  </Container>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      value: '<p><strong style="background-color: rgb(240, 102, 102); color: rgb(255, 255, 255);">Hello</strong> <strong style="color: rgb(255, 255, 255); background-color: rgb(102, 163, 224);">World</strong></p>'
+    }
+  },
+  methods: {
+    textChangeHandler (delta, oldDelta, source) {
+      // console.group('QuillEditor textChangeHandler')
+      // console.log(delta, oldDelta, source)
+      // console.groupEnd()
+    },
+    selectionChangeHandler (range, oldRange, source) {
+      // console.group('QuillEditor selectionChangeHandler')
+      // console.log(range, oldRange, source)
+      // console.groupEnd()
+    },
+    editorChangeHandler (eventName, ...args) {
+      // console.group('QuillEditor editorChangeHandler')
+      // console.log(eventName, args)
+      // console.groupEnd()
+    }
+  }
+}
+</script>

src/pages/demo/plugins/quill-editor/readme.vue

@@ -0,0 +1,10 @@
+<template>
+  <Container>
+    <PageHeader
+      slot="header"
+      title="README.md"
+      url="https://github.com/surmon-china/vue-quill-editor">
+    </PageHeader>
+    <Markdown url="https://raw.githubusercontent.com/surmon-china/vue-quill-editor/master/README.md"></Markdown>
+  </Container>
+</template>

src/router/menu/_plugin.js

@@ -36,9 +36,9 @@ export const pluginMenu = {
         }
       ]
     },
-    // SimpleMDE
+    // MD编辑器
     {
-      title: 'SimpleMDE',
+      title: 'MD编辑器',
       icon: 'columns',
       children: [
         {
@@ -57,6 +57,27 @@ export const pluginMenu = {
         }
       ]
     },
+    // 富文本编辑器
+    {
+      title: '富文本编辑器',
+      icon: 'edit',
+      children: [
+        {
+          title: 'README',
+          icon: 'file-text',
+          path: 'quill-editor/readme',
+          name: 'demo-plugin-quill-editor-readme',
+          component: resolve => { require(['@/pages/demo/plugins/quill-editor/readme.vue'], resolve) }
+        },
+        {
+          title: '基本示例',
+          icon: 'file-o',
+          path: 'quill-editor/demo',
+          name: 'demo-plugin-quill-editor-demo',
+          component: resolve => { require(['@/pages/demo/plugins/quill-editor/demo.vue'], resolve) }
+        }
+      ]
+    },
     // 拖拽网格布局组件
     {
       title: '网格布局',