kun 19/10/11 20:30

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>

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>

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>

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
 

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',

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;

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('请求失败！')
         }