form表单示例

QMPlusVuePage/package-lock.json

@@ -2858,8 +2858,7 @@
       "version": "4.6.0",
       "resolved": "https://registry.npm.taobao.org/co/download/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "coa": {
       "version": "2.0.2",
@@ -5218,8 +5217,7 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -5240,14 +5238,12 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -5262,20 +5258,17 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -5392,8 +5385,7 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "ini": {
           "version": "1.3.5",
@@ -5405,7 +5397,6 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -5420,7 +5411,6 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -5428,14 +5418,12 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "minipass": {
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -5454,7 +5442,6 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -5535,8 +5522,7 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -5548,7 +5534,6 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -5634,8 +5619,7 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -5671,7 +5655,6 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -5691,7 +5674,6 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
-          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -5735,14 +5717,12 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
         }
       }
     },
@@ -6086,8 +6066,12 @@
     "highlight.js": {
       "version": "9.15.10",
       "resolved": "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.15.10.tgz",
-      "integrity": "sha1-exjtdckDSMBF7vntCMoTGaIhmtI=",
-      "dev": true
+      "integrity": "sha1-exjtdckDSMBF7vntCMoTGaIhmtI="
+    },
+    "highlight.js-async-webpack": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/highlight.js-async-webpack/-/highlight.js-async-webpack-1.0.4.tgz",
+      "integrity": "sha1-wGtnv5nwSQRdYrdW5YVbCRLsYWw="
     },
     "hmac-drbg": {
       "version": "1.0.1",
@@ -7331,6 +7315,15 @@
         "object-visit": "^1.0.0"
       }
     },
+    "mavon-editor": {
+      "version": "2.7.7",
+      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.7.7.tgz",
+      "integrity": "sha512-lXnYe+dztKepbv8bi2nedRqG/AwyUDF8gmkv9lHD3fpVJ1+pzAS6YILRIryKCvO9qPIOPEThHsda2DxtlzRsZA==",
+      "requires": {
+        "highlight.js": "^9.11.0",
+        "highlight.js-async-webpack": "^1.0.4"
+      }
+    },
     "md5.js": {
       "version": "1.3.5",
       "resolved": "https://registry.npm.taobao.org/md5.js/download/md5.js-1.3.5.tgz",
@@ -9851,8 +9844,7 @@
       "version": "4.0.8",
       "resolved": "https://registry.npm.taobao.org/rx-lite/download/rx-lite-4.0.8.tgz",
       "integrity": "sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=",
-      "dev": true,
-      "optional": true
+      "dev": true
     },
     "rx-lite-aggregates": {
       "version": "4.0.8",

QMPlusVuePage/package.json

@@ -11,6 +11,7 @@
         "axios": "^0.19.0",
         "core-js": "^2.6.5",
         "element-ui": "^2.12.0",
+        "mavon-editor": "^2.7.7",
         "node-sass": "^4.12.0",
         "path": "^0.12.7",
         "qs": "^6.8.0",

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>