富文本组件添加禁用和启用方法

创建无menu的富文本

src/components/editor/WangEditor.vue

@@ -56,28 +56,27 @@ export default {
       this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
       this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
       this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
-      // 配置菜单
       this.editor.customConfig.menus = [
-        // 'head', // 标题
-        // 'bold', // 粗体
-        // 'fontSize', // 字号
-        // 'fontName', // 字体
-        // 'italic', // 斜体
-        // 'underline', // 下划线
-        // 'strikeThrough', // 删除线
-        // 'foreColor', // 文字颜色
-        // 'backColor', // 背景颜色
-        // 'link', // 插入链接
-        // 'list', // 列表
-        // 'justify', // 对齐方式
-        // 'quote', // 引用
-        // 'emoticon', // 表情
-        // 'image', // 插入图片
-        // 'table', // 表格
-        // 'video', // 插入视频
-        // 'code', // 插入代码
-        // 'undo', // 撤销
-        // 'redo' // 重复
+        'head', // 标题
+        'bold', // 粗体
+        'fontSize', // 字号
+        'fontName', // 字体
+        'italic', // 斜体
+        'underline', // 下划线
+        'strikeThrough', // 删除线
+        'foreColor', // 文字颜色
+        'backColor', // 背景颜色
+        'link', // 插入链接
+        'list', // 列表
+        'justify', // 对齐方式
+        'quote', // 引用
+        'emoticon', // 表情
+        'image', // 插入图片
+        'table', // 表格
+        'video', // 插入视频
+        'code', // 插入代码
+        'undo', // 撤销
+        'redo' // 重复
       ]
       this.editor.customConfig.uploadImgHooks = {
         fail: (xhr, editor, result) => {
@@ -102,6 +101,14 @@ export default {
       }
       // 创建富文本编辑器
       this.editor.create()
+    },
+    disable () {
+      // 禁用编辑功能
+      this.editor.$textElem.attr('contenteditable', false)
+    },
+    enable () {
+      // 开启编辑功能
+      this.editor.$textElem.attr('contenteditable', true)
     }
   }
 }

src/components/editor/WangEditorNoMenu.vue

@@ -0,0 +1,129 @@
+<template lang="html">
+  <div class="editor" style="min-width:700px; padding-right:10px">
+    <div ref="toolbar" class="toolbar">
+    </div>
+    <div ref="editor" class="wtext">
+    </div>
+  </div>
+</template>
+
+<script>
+import E from 'wangeditor'
+export default {
+  name: 'WangEditor',
+  data () {
+    return {
+      editor: null,
+      info_: null
+    }
+  },
+  model: {
+    prop: 'value',
+    event: 'change'
+  },
+  props: {
+    isClear: {
+      type: Boolean,
+      default: false
+    }
+  },
+  watch: {
+    isClear (val) {
+      // 触发清除文本域内容
+      if (val) {
+        this.editor.txt.clear()
+        this.info_ = null
+      }
+    }
+  },
+  mounted () {
+    this.seteditor()
+  },
+  methods: {
+    clear () {
+      this.editor.txt.clear()
+    },
+    init (val) {
+      // 使用 v-model 时，设置初始值
+      this.editor.txt.html(val)
+    },
+    seteditor () {
+      this.editor = new E(this.$refs.toolbar, this.$refs.editor)
+      this.editor.customConfig.uploadImgShowBase64 = true // base 64 存储图片
+      this.editor.customConfig.uploadImgServer = ''// 配置服务器端地址
+      this.editor.customConfig.uploadImgHeaders = { }// 自定义 header
+      this.editor.customConfig.uploadFileName = '' // 后端接受上传文件的参数名
+      this.editor.customConfig.uploadImgMaxSize = 2 * 1024 * 1024 // 将图片大小限制为 2M
+      this.editor.customConfig.uploadImgMaxLength = 6 // 限制一次最多上传 3 张图片
+      this.editor.customConfig.uploadImgTimeout = 3 * 60 * 1000 // 设置超时时间
+      this.editor.customConfig.menus = [
+        // 'head', // 标题
+        // 'bold', // 粗体
+        // 'fontSize', // 字号
+        // 'fontName', // 字体
+        // 'italic', // 斜体
+        // 'underline', // 下划线
+        // 'strikeThrough', // 删除线
+        // 'foreColor', // 文字颜色
+        // 'backColor', // 背景颜色
+        // 'link', // 插入链接
+        // 'list', // 列表
+        // 'justify', // 对齐方式
+        // 'quote', // 引用
+        // 'emoticon', // 表情
+        // 'image', // 插入图片
+        // 'table', // 表格
+        // 'video', // 插入视频
+        // 'code', // 插入代码
+        // 'undo', // 撤销
+        // 'redo' // 重复
+      ]
+      this.editor.customConfig.uploadImgHooks = {
+        fail: (xhr, editor, result) => {
+          // 插入图片失败回调
+        },
+        success: (xhr, editor, result) => {
+          // 图片上传成功回调
+        },
+        timeout: (xhr, editor) => {
+          // 网络超时的回调
+        },
+        error: (xhr, editor) => {
+          // 图片上传错误的回调
+        },
+        customInsert: (insertImg, result, editor) => {
+          // 图片上传成功，插入图片的回调
+        }
+      }
+      this.editor.customConfig.onchange = (html) => {
+        this.info_ = html // 绑定当前逐渐地值
+        this.$emit('change', this.info_) // 将内容同步到父组件中
+      }
+      // 创建富文本编辑器
+      this.editor.create()
+    },
+    disable () {
+      // 禁用编辑功能
+      this.editor.$textElem.attr('contenteditable', false)
+    },
+    enable () {
+      // 开启编辑功能
+      this.editor.$textElem.attr('contenteditable', true)
+    }
+  }
+}
+</script>
+
+<style lang="css">
+.editor {
+  width: 100%;
+  margin: 0 auto;
+}
+.toolbar {
+  border: 1px solid #ccc;
+}
+.wtext {
+  border: 1px solid #ccc;
+  height: 500px;
+}
+</style>

src/views/modules/program/registered/ProjectArchiveForm.vue

@@ -454,7 +454,7 @@
   import SelectUserTree from '@/views/modules/utils/treeUserSelect'
   import RosterSelectForm from '@/views/common/RosterSelectForm'
   import ProgramProjectListInfoService from '@/api/program/ProgramProjectListInfoService'
-  import WangEditor from '@/components/editor/WangEditor'
+  import WangEditor from '@/components/editor/WangEditorNoMenu'
   export default {
     props: {
       businessId: {

src/views/modules/program/registered/ProjectThreeAuditForm.vue

@@ -74,28 +74,28 @@
               <el-form-item label="明细表" prop="detailOpinion"
               >
                 <!--            <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.detailOpinion" placeholder="请填写明细表"     ></el-input>-->
-                <WangEditor :disabled="true" ref="contents1Editor" v-model="inputForm.detailOpinion"/>
+                <WangEditor ref="contents1Editor" v-model="inputForm.detailOpinion"/>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="评估报告" prop="reportOpinion"
               >
                 <!--            <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.reportOpinion" placeholder="请填写评估报告"     ></el-input>-->
-                <WangEditor :disabled="formReadOnly" ref="contents2Editor" v-model="inputForm.reportOpinion"/>
+                <WangEditor ref="contents2Editor" v-model="inputForm.reportOpinion"/>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="技术说明" prop="remarksOpinion"
               >
                 <!--            <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.remarksOpinion" placeholder="请填写技术说明"     ></el-input>-->
-                <WangEditor :disabled="formReadOnly" ref="contents3Editor" v-model="inputForm.remarksOpinion"/>
+                <WangEditor ref="contents3Editor" v-model="inputForm.remarksOpinion"/>
               </el-form-item>
             </el-col>
             <el-col :span="24">
               <el-form-item label="工作底稿" prop="workOpinion"
               >
                 <!--            <el-input type="textarea" style="width:100%" maxlength="1000" v-model="inputForm.workOpinion" placeholder="请填写工作底稿"     ></el-input>-->
-                <WangEditor :disabled="formReadOnly" ref="contents4Editor" v-model="inputForm.workOpinion"/>
+                <WangEditor ref="contents4Editor" v-model="inputForm.workOpinion"/>
               </el-form-item>
             </el-col>
             <el-form size="middle" :model="inputForm" ref="inputForm" v-loading="loading" :class="method==='view'?'readonly':''"
@@ -132,7 +132,7 @@
   import SelectUserTree from '@/views/modules/utils/treeUserSelect'
   import RosterSelectForm from '@/views/common/RosterSelectForm'
   import ProgramProjectListInfoService from '@/api/program/ProgramProjectListInfoService'
-  import WangEditor from '@/components/editor/WangEditor'
+  import WangEditor from '@/components/editor/WangEditorNoMenu'
   export default {
     props: {
       businessId: {
@@ -269,7 +269,7 @@
               this.$refs.contents1Editor.init(this.inputForm.detailOpinion)
             }
             if (this.commonJS.isNotEmpty(this.inputForm.reportOpinion)) {
-              this.$refs.contents2Editor.init(this.inputForm.reportOpinion)
+              this.$refs.contents2Editor.init(this.inputForm.reportOpinion, false)
             }
             if (this.commonJS.isNotEmpty(this.inputForm.remarksOpinion)) {
               this.$refs.contents3Editor.init(this.inputForm.remarksOpinion)