form表单示例

QMPlusVuePage/src/main.js

@@ -12,7 +12,7 @@ import vueParticleLine from 'vue-particle-line'
 import 'vue-particle-line/dist/vue-particle-line.css'
 Vue.use(vueParticleLine)
 
-//富文本插件
+// 富文本插件
 import VueQuillEditor from 'vue-quill-editor'
 import 'quill/dist/quill.core.css'
 import 'quill/dist/quill.snow.css'
@@ -20,6 +20,12 @@ import 'quill/dist/quill.bubble.css'
 
 Vue.use(VueQuillEditor)
 
+// markdown插件
+import mavonEditor from 'mavon-editor'
+import 'mavon-editor/dist/css/index.css'
+
+Vue.use(mavonEditor)
+
 import '@/permission'
 import { store } from '@/store/index'
 Vue.config.productionTip = false

QMPlusVuePage/src/view/example/rte/rte.vue

@@ -1,14 +1,20 @@
 <template>
-  <div class="edit_container">
-    <quill-editor
-      :options="editorOption"
-      @blur="onEditorBlur($event)"
-      @change="onEditorChange($event)"
-      @focus="onEditorFocus($event)"
-      ref="myQuillEditor"
-      v-model="content"
-    ></quill-editor>
-    <button v-on:click="saveHtml">保存</button>
+  <div>
+    <div class="edit_container">
+      <quill-editor
+              :options="editorOption"
+              @blur="onEditorBlur($event)"
+              @change="onEditorChange($event)"
+              @focus="onEditorFocus($event)"
+              ref="myQuillEditor"
+              v-model="content"
+      ></quill-editor>
+      <el-button  plain @click="saveHtml">保存</el-button>
+    </div>
+    <div>
+      <mavon-editor v-model="model.content"></mavon-editor>
+      <el-button type="primary" size="small" @click="submit">发表</el-button>
+    </div>
   </div>
 </template>
 
@@ -18,7 +24,10 @@ export default {
   data() {
     return {
       content: `<p>hello world</p>`,
-      editorOption: {}
+      editorOption: {},
+      model:{
+        content:''
+      }
     }
   },
   computed: {
@@ -33,7 +42,8 @@ export default {
     onEditorBlur() {}, // 失去焦点事件
     onEditorFocus() {}, // 获得焦点事件
     onEditorChange() {}, // 内容改变事件
-    saveHtml() {} // 保存方法
+    saveHtml() {}, // 保存方法
+    submit(){}
   }
 }
 </script>