kun 19/10/11 20:30

2019-10-11 20:25:54 +08:00
parent 03d2d0b61c
commit 2ece5f446c
9 changed files with 310 additions and 43 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -4380,7 +4380,6 @@
      "version": "1.1.0",
      "resolved": "https://registry.npm.taobao.org/deep-equal/download/deep-equal-1.1.0.tgz",
      "integrity": "sha1-MQPN+KttMs9KjfeGVFjyuNM/N0U=",
-      "dev": true,
      "requires": {
        "is-arguments": "^1.0.4",
        "is-date-object": "^1.0.1",
@@ -4508,7 +4507,6 @@
      "version": "1.1.3",
      "resolved": "https://registry.npm.taobao.org/define-properties/download/define-properties-1.1.3.tgz",
      "integrity": "sha1-z4jabL7ib+bbcJT2HYcMvYTO6fE=",
-      "dev": true,
      "requires": {
        "object-keys": "^1.0.12"
      }
@@ -6031,6 +6029,11 @@
      "resolved": "https://registry.npm.taobao.org/fast-deep-equal/download/fast-deep-equal-2.0.1.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-deep-equal%2Fdownload%2Ffast-deep-equal-2.0.1.tgz",
      "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk="
    },
+    "fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
    "fast-glob": {
      "version": "2.2.7",
      "resolved": "https://registry.npm.taobao.org/fast-glob/download/fast-glob-2.2.7.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ffast-glob%2Fdownload%2Ffast-glob-2.2.7.tgz",
@@ -6422,14 +6425,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"
@@ -6444,20 +6445,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",
@@ -6574,8 +6572,7 @@
        "inherits": {
          "version": "2.0.3",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "ini": {
          "version": "1.3.5",
@@ -6587,7 +6584,6 @@
          "version": "1.0.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "number-is-nan": "^1.0.0"
          }
@@ -6602,7 +6598,6 @@
          "version": "3.0.4",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "brace-expansion": "^1.1.7"
          }
@@ -6610,14 +6605,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"
@@ -6636,7 +6629,6 @@
          "version": "0.5.1",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "minimist": "0.0.8"
          }
@@ -6717,8 +6709,7 @@
        "number-is-nan": {
          "version": "1.0.1",
          "bundled": true,
-          "dev": true,
-          "optional": true
+          "dev": true
        },
        "object-assign": {
          "version": "4.1.1",
@@ -6730,7 +6721,6 @@
          "version": "1.4.0",
          "bundled": true,
          "dev": true,
-          "optional": true,
          "requires": {
            "wrappy": "1"
          }
@@ -6852,7 +6842,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",
@@ -6938,8 +6927,7 @@
    "function-bind": {
      "version": "1.1.1",
      "resolved": "https://registry.npm.taobao.org/function-bind/download/function-bind-1.1.1.tgz",
-      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0=",
-      "dev": true
+      "integrity": "sha1-pWiZ0+o8m6uHS7l3O3xe3pL0iV0="
    },
    "functional-red-black-tree": {
      "version": "1.0.1",
@@ -7217,7 +7205,6 @@
      "version": "1.0.3",
      "resolved": "https://registry.npm.taobao.org/has/download/has-1.0.3.tgz",
      "integrity": "sha1-ci18v8H2qoJB8W3YFOAR4fQeh5Y=",
-      "dev": true,
      "requires": {
        "function-bind": "^1.1.1"
      }
@@ -7327,8 +7314,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",
@@ -7924,8 +7915,7 @@
    "is-arguments": {
      "version": "1.0.4",
      "resolved": "https://registry.npm.taobao.org/is-arguments/download/is-arguments-1.0.4.tgz",
-      "integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM=",
-      "dev": true
+      "integrity": "sha1-P6+WbHy6D/Q3+zH2JQCC/PBEjPM="
    },
    "is-arrayish": {
      "version": "0.2.1",
@@ -7999,8 +7989,7 @@
    "is-date-object": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/is-date-object/download/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-      "dev": true
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
    },
    "is-descriptor": {
      "version": "0.1.6",
@@ -8168,7 +8157,6 @@
      "version": "1.0.4",
      "resolved": "https://registry.npm.taobao.org/is-regex/download/is-regex-1.0.4.tgz",
      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
-      "dev": true,
      "requires": {
        "has": "^1.0.1"
      }
@@ -9992,6 +9980,15 @@
      "integrity": "sha1-XdaUPJOFSCZwFtTjTwV1gwgMUUw=",
      "dev": true
    },
+    "mavon-editor": {
+      "version": "2.7.6",
+      "resolved": "https://registry.npmjs.org/mavon-editor/-/mavon-editor-2.7.6.tgz",
+      "integrity": "sha512-s5RpdpXG9WFvQZf5ckCgNzwgoTfxxm9estwMyE5dbUcrip96vrtdsEQOFTMCATKpbQ2cam4kTjX0ZTTw5rDrBw==",
+      "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",
@@ -10736,14 +10733,12 @@
    "object-is": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/object-is/download/object-is-1.0.1.tgz",
-      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
-      "dev": true
+      "integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY="
    },
    "object-keys": {
      "version": "1.1.1",
      "resolved": "https://registry.npm.taobao.org/object-keys/download/object-keys-1.1.1.tgz",
-      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4=",
-      "dev": true
+      "integrity": "sha1-HEfyct8nfzsdrwYWd9nILiMixg4="
    },
    "object-visit": {
      "version": "1.0.1",
@@ -11099,6 +11094,11 @@
        "no-case": "^2.2.0"
      }
    },
+    "parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
    "parent-module": {
      "version": "1.0.1",
      "resolved": "https://registry.npm.taobao.org/parent-module/download/parent-module-1.0.1.tgz",
@@ -12158,6 +12158,47 @@
      "integrity": "sha1-YOWl/WSn+L+k0qsu1v30yFutFU4=",
      "dev": true
    },
+    "quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "requires": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+        },
+        "eventemitter3": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+          "integrity": "sha1-teEHm1n7XhuidxwKmTvgYKWMmbo="
+        }
+      }
+    },
+    "quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "requires": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      }
+    },
+    "quill-image-extend-module": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/quill-image-extend-module/-/quill-image-extend-module-1.1.2.tgz",
+      "integrity": "sha512-yHJWZWlTjNZzV34zuT4H55ttDwMxmVJ7JUgKnt/Wd3ejUNcaPOV57/sKG8VEMU5mL7bKZPIKmBdb3weM0M5UeA==",
+      "dev": true
+    },
    "randomatic": {
      "version": "3.1.1",
      "resolved": "https://registry.npm.taobao.org/randomatic/download/randomatic-3.1.1.tgz",
@@ -12381,7 +12422,6 @@
      "version": "1.2.0",
      "resolved": "https://registry.npm.taobao.org/regexp.prototype.flags/download/regexp.prototype.flags-1.2.0.tgz",
      "integrity": "sha1-azByTjBqJ4M+6xcbZqyIkLo35Bw=",
-      "dev": true,
      "requires": {
        "define-properties": "^1.1.2"
      }
@@ -14781,6 +14821,15 @@
        "vue-style-loader": "^4.1.0"
      }
    },
+    "vue-quill-editor": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/vue-quill-editor/-/vue-quill-editor-3.0.6.tgz",
+      "integrity": "sha512-g20oSZNWg8Hbu41Kinjd55e235qVWPLfg4NvsLW6d+DhgBTFbEuMpcWlUdrD6qT3+Noim6DRu18VLM9lVShXOQ==",
+      "requires": {
+        "object-assign": "^4.1.1",
+        "quill": "^1.3.4"
+      }
+    },
    "vue-router": {
      "version": "3.1.3",
      "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.3.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.3.tgz",
@@ -14835,6 +14884,11 @@
        "makeerror": "1.0.x"
      }
    },
+    "wangeditor": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/wangeditor/-/wangeditor-3.1.1.tgz",
+      "integrity": "sha1-+9PB1JdpI8nt67hbKdMLNVEq0Dk="
+    },
    "watch": {
      "version": "0.18.0",
      "resolved": "https://registry.npm.taobao.org/watch/download/watch-0.18.0.tgz",
--- a/package.json
+++ b/package.json
@@ -12,12 +12,15 @@
    "axios": "^0.19.0",
    "core-js": "^2.6.5",
    "element-ui": "^2.12.0",
+    "mavon-editor": "^2.7.6",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "swiper": "^5.0.2",
    "vue": "^2.6.10",
+    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.3",
-    "vuex": "^3.0.1"
+    "vuex": "^3.0.1",
+    "wangeditor": "^3.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.11.0",
--- a/src/components/RichText.vue
+++ b/src/components/RichText.vue
@@ -0,0 +1,59 @@
+<template>
+  <div id="wangeditor">
+    <div ref="editorElem" style="text-align:left;"></div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'Editor',
+  data () {
+    return {
+      editor: null,
+      editorContent: ''
+    }
+  },
+  // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
+  props: ['catchData'], // 接收父组件的方法
+  mounted () {
+    this.editor = new E(this.$refs.editorElem)
+    // 编辑器的事件，每次改变会获取其html内容
+    this.editor.customConfig.onchange = html => {
+      this.editorContent = html
+      this.catchData(this.editorContent) // 把这个html通过catchData的方法传入父组件
+    }
+    this.editor.customConfig.menus = [
+      // 菜单配置
+      'head', // 标题
+      'bold', // 粗体
+      'fontSize', // 字号
+      'fontName', // 字体
+      'italic', // 斜体
+      'underline', // 下划线
+      'strikeThrough', // 删除线
+      'foreColor', // 文字颜色
+      'backColor', // 背景颜色
+      // 'link', // 插入链接
+      // 'list', // 列表
+      'justify', // 对齐方式
+      'quote', // 引用
+      // 'emoticon', // 表情
+      // 'image', // 插入图片
+      // 'table', // 表格
+      // 'code', // 插入代码
+      'undo', // 撤销
+      'redo' // 重复
+    ]
+    this.editor.create() // 创建富文本实例
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+#wangeditor{
+  width: auto;
+  height: auto;
+  border:1px solid red;
+}
+</style>
--- a/src/components/RichTextFour.vue
+++ b/src/components/RichTextFour.vue
@@ -0,0 +1,49 @@
+<template>
+  <div class="quill">
+    <quill-editor
+      v-model="content"
+      ref="myQuillEditor"
+      :options="editorOption"
+      @blur="onEditorBlur($event)"
+      @focus="onEditorFocus($event)"
+      @ready="onEditorReady($event)"
+    ></quill-editor>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      content: '',
+      editorOption: {}
+    }
+  },
+  methods: {
+    onEditorBlur (val) { },
+    onEditorFocus (val) { },
+    onEditorReady (val) { },
+    onEditorChange ({ quill, html, text }) {
+      this.content = html
+    }
+  },
+  computed: {
+    editor () {
+      return this.$refs.myQuillEditor.quill
+    }
+  },
+  watch: {
+    content () {
+      this.$emit('quillVal', this.content)
+    }
+  },
+  mounted () { }
+}
+</script>
+
+<style lang="scss" scoped>
+/deep/.ql-toolbar.ql-snow + .ql-container.ql-snow {
+  width: 100%;
+  height: 138px;
+}
+</style>
--- a/src/components/RichTextTwo.vue
+++ b/src/components/RichTextTwo.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="mavonEditor">
+    <no-ssr>
+      <mavon-editor :toolbars="markdownOption" v-model="handbook"/>
+    </no-ssr>
+  </div>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      markdownOption: {
+        bold: true, // 粗体
+        italic: true, // 斜体
+        header: true, // 标题
+        underline: true, // 下划线
+        strikethrough: true, // 中划线
+        mark: true, // 标记
+        superscript: true, // 上角标
+        subscript: true, // 下角标
+        quote: true, // 引用
+        ol: true, // 有序列表
+        ul: true, // 无序列表
+        link: true, // 链接
+        imagelink: true, // 图片链接
+        code: true, // code
+        table: true, // 表格
+        fullscreen: true, // 全屏编辑
+        readmodel: true, // 沉浸式阅读
+        htmlcode: true, // 展示html源码
+        help: true, // 帮助
+        /* 1.3.5 */
+        undo: true, // 上一步
+        redo: true, // 下一步
+        trash: true, // 清空
+        save: true, // 保存（触发events中的save事件）
+        /* 1.4.2 */
+        navigation: true, // 导航目录
+        /* 2.1.8 */
+        alignleft: true, // 左对齐
+        aligncenter: true, // 居中
+        alignright: true, // 右对齐
+        /* 2.2.1 */
+        subfield: true, // 单双栏模式
+        preview: true // 预览
+
+      },
+      handbook: ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.mavonEditor {
+  width: 100%;
+  height: 100%;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@@ -6,7 +6,13 @@ import http from './http'
 import tool from '../static/js/tool'
 import ElementUI from 'element-ui'
 import md5 from 'js-md5'
+import VueQuillEditor from 'vue-quill-editor'
+import mavonEditor from 'mavon-editor'

+import 'mavon-editor/dist/css/index.css'
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
 import '../static/css/reset.css'
 import '../static/css/swiper.css'
 import '../static/fonts/iconfont.css'
@@ -27,6 +33,8 @@ Vue.prototype.$jParams = function (url, parameters) {
  })
 }

+Vue.use(mavonEditor)
+Vue.use(VueQuillEditor)
 Vue.use(ElementUI)
 Vue.config.productionTip = false

--- a/src/router.js
+++ b/src/router.js
@@ -7,6 +7,10 @@ import HeaderNav from './components/HeaderNav'
 import FooterNav from './components/FooterNav'
 /** 分页器 */
 import PagingDevice from './components/PagingDevice'
+/** 富文本 */
+import RichText from './components/RichText'
+import RichTextTwo from './components/RichTextTwo'
+import RichTextFour from './components/RichTextFour'

 /** 首页 */
 import HomePage from './views/home/HomePage'
@@ -51,6 +55,24 @@ export default new Router({
      name: 'headerNav',
      component: HeaderNav
    },
+    /** 富文本零 */
+    {
+      path: '/richText',
+      name: 'richText',
+      component: RichText
+    },
+    /** 富文本er */
+    {
+      path: '/richTextTwo',
+      name: 'richTextTwo',
+      component: RichTextTwo
+    },
+    /** 富文本er */
+    {
+      path: '/richTextFour',
+      name: 'richTextFour',
+      component: RichTextFour
+    },
    /** 尾部导航 */
    {
      path: '/footerNav',
--- a/src/views/project/Application.vue
+++ b/src/views/project/Application.vue
@@ -322,7 +322,10 @@
            </div>
            <div class="xx">
              <h5>五、经费预算</h5>
-              <textarea name="funds" v-model="funds" required value></textarea>
+              <!-- <textarea name="funds" v-model="funds" required value></textarea> -->
+              <div id="rich">
+                <rich-text-four @quillVal="getContent"></rich-text-four>
+              </div>
            </div>
            <div class="xxx">
              <h5>六、申报单位承诺</h5>
@@ -369,11 +372,13 @@
 import HeaderNav from "../../components/HeaderNav";
 /* eslint-disable */
 import FooterNav from "../../components/FooterNav";
+import RichTextFour from "../../components/RichTextFour";
 const T_T = new Date()
 export default {
  components: {
    HeaderNav,
-    FooterNav
+    FooterNav,
+    RichTextFour
  },
  props: {},
  data() {
@@ -443,6 +448,10 @@ export default {
  computed: {},
  watch: {},
  methods: {
+    /** 获取富文本内容 */
+    getContent(data){
+      this.funds = data
+    },
    /** 申报单位承诺 */
    thf() {
      this.thff = !this.thff;
@@ -650,6 +659,9 @@ export default {
 </script>

 <style lang='scss' scoped>
+#rich{
+ margin: 30px auto 30px;
+}
 .img-img {
  margin-top: 25px;
  width: 150px;
--- a/src/views/project/Schedule.vue
+++ b/src/views/project/Schedule.vue
@@ -63,10 +63,10 @@
            <div class="div-v">
              <span>初筛审核通过</span>
              <img class="oo" :src="imgUrl.d0" alt />
-              <section>
+              <!-- <section>
                <span style="color:#e60012;font-size:20px;">总分: 71分</span>
                <span style="color:#999;font-size:16px;">（及格分数: 70）</span>
-              </section>
+              </section> -->
            </div>
            <div>
              <span>立项评审中</span>
@@ -274,6 +274,7 @@ export default {
      }).then(res => {
        if (res.data.data.code === 200) {
          _this.zData = res.data.data.data.ProjectDetails
+          console.log(res.data.data.data)
        } else {
          alert('请求失败！')
        }