form表单示例

5 years ago · a9d47143e8
4 changed files with 58 additions and 49 deletions
--- a/QMPlusVuePage/package-lock.json
+++ b/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",
--- a/QMPlusVuePage/package.json
+++ b/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",
--- a/QMPlusVuePage/src/main.js
+++ b/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
--- a/QMPlusVuePage/src/view/example/rte/rte.vue
+++ b/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>