完成表单编辑器

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "element-ui": "^1.1.6",
     "vue": "^2.1.10",
+    "vue-quill-editor": "^1.1.1",
     "vue-router": "^2.2.0",
     "vue-tables-2": "^0.4.33"
   },

src/components/common/sidebar.vue

@@ -9,7 +9,7 @@
             <el-submenu index="2">
                 <template slot="title"><i class="el-icon-date"></i>表单</template>
                 <el-menu-item index="baseform">基本表单</el-menu-item>
-                <el-menu-item index="2-2">编辑器</el-menu-item>
+                <el-menu-item index="vueeditor">编辑器</el-menu-item>
                 <el-menu-item index="2-3">文件上传</el-menu-item>
             </el-submenu>
             <el-submenu index="3">

src/components/page/VueEditor.vue

@@ -0,0 +1,66 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-date"></i> 表单</el-breadcrumb-item>
+                <el-breadcrumb-item>编辑器</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="plugins-tips">
+            Vue-Quill-Editor：基于Quill、适用于Vue2的富文本编辑器。
+            访问地址：<a href="https://github.com/surmon-china/vue-quill-editor" target="_blank">vue-quill-editor</a>
+        </div>
+        <quill-editor ref="myTextEditor" v-model="content" :config="editorOption"></quill-editor>
+        <el-button class="editor-btn" type="primary" @click="submit">提交</el-button>
+    </div>
+</template>
+
+<script>
+    import { quillEditor } from 'vue-quill-editor';
+    export default {
+        data: function(){
+            return {
+                content: '<p>编辑器...</p>',
+                editorOption: {
+                    // something config
+                }
+            }
+        },
+        components: {
+            quillEditor
+        },
+        methods: {
+            onEditorChange({ editor, html, text }) {
+                this.content = html;
+            },
+            submit(){
+                console.log(this.content);
+            }
+        },
+        computed: {
+            editor() {
+                return this.$refs.myTextEditor.quillEditor;
+            }
+        }
+    }
+</script>
+
+<style>
+    .ql-container{
+        min-height: 400px;
+    }
+    .ql-snow .ql-tooltip{
+        transform: translateX(117.5px) translateY(10px) !important;
+    }
+    .editor-btn{
+        margin-top: 20px;
+    }
+    .plugins-tips{
+        padding:10px;
+        margin-bottom: 20px;
+        background: #eef1f6;
+    }
+    .plugins-tips a{
+        color: #20a0ff;
+    }
+</style>

src/router/index.js

@@ -16,6 +16,10 @@ export default new Router({
         {
             path: '/baseform',
             component: resolve => require(['../components/page/BaseForm.vue'], resolve)
+        },
+        {
+            path: '/vueeditor',
+            component: resolve => require(['../components/page/VueEditor.vue'], resolve)
         }
     ]
 })