富文本

蔡俊立
Showing 5 changed files with 166 additions and 6 deletions
package.json
src/main.js
src/views/system/xttz/components/addDialog.vue
src/views/system/xttz/components/viewDialog.vue
src/views/xtjk/cwrz/cwrzdata.js
--- a/package.json
View file @e8869ff
+++ b/package.json
View file @e8869ff
@@ -23,6 +23,7 @@
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "vue": "2.6.10",
+    "vue-quill-editor": "^3.0.6",
    "vue-router": "3.0.2",
    "vue-seamless-scroll": "^1.1.23",
    "vuex": "3.1.0"
--- a/src/main.js
View file @e8869ff
+++ b/src/main.js
View file @e8869ff
@@ -29,6 +29,13 @@ import store from './store'
 import router from './router'
 import _ from 'lodash'
+import  VueQuillEditor from 'vue-quill-editor'//调用编辑器
+// 样式
+import 'quill/dist/quill.core.css'
+import 'quill/dist/quill.snow.css'
+import 'quill/dist/quill.bubble.css'
+Vue.use(VueQuillEditor)
 import * as filters from './filters' // global filters
 import './permission' // permission control
 Vue.use(Element, { size: 'small', zIndex: 1000 })
--- a/src/views/system/xttz/components/addDialog.vue
View file @e8869ff
+++ b/src/views/system/xttz/components/addDialog.vue
View file @e8869ff
 <template>
-  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="50%"
+  <dialogBox title="新增系统通知" @submitForm="submitForm" saveButton="保存" :isFullscreen="false" width="60%"
    @closeDialog="closeDialog" v-model="value">
    <el-form ref="ruleForm" :model="ruleForm" label-width="100px" :rules="rules">
      <el-row>
@@ -10,16 +10,33 @@
        </el-col>
      </el-row>
      <el-row>
+        <el-col :span="12">
+          <el-form-item label="通知来源:" prop="noticeSource">
+            <el-input v-model="ruleForm.noticeSource"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
        <el-col :span="24">
          <el-form-item label="通知内容:" prop="noticeContent">
-            <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input>
+            <quill-editor
+              v-model="ruleForm.noticeContent"
+              ref="myQuillEditor"
+              :options="editorOption"
+              @blur="onEditorBlur($event)"
+              @focus="onEditorFocus($event)"
+              @change="onEditorChange($event)"
+              @ready="onEditorReady($event)"
+            >
+            </quill-editor>
+            <!-- <el-input v-model="ruleForm.noticeContent" type="textarea" :rows="16"></el-input> -->
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="附件:" prop="noticeFileUrl">
-            <el-upload action="" :file-list="fileList" multiple :auto-upload="false" :limit="1"
+            <el-upload action="" multiple :auto-upload="false" :limit="1"
              :on-change="handleChange" :before-upload="beforeUpload">
              <el-button icon="el-icon-upload" type="primary">上传</el-button>
              <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
@@ -27,6 +44,13 @@
          </el-form-item>
        </el-col>
      </el-row>
+      <div v-show="false">
+        <el-upload action=""  multiple :auto-upload="false"
+              :on-change="RichTexthandleChange" :before-upload="beforeUpload" class="richUpload">
+              <el-button icon="el-icon-upload" type="primary">上传</el-button>
+              <div slot="tip" class="el-upload__tip">文件大小不超过20MB</div>
+        </el-upload>
+      </div>
    </el-form>
  </dialogBox>
 </template>
@@ -34,16 +58,19 @@
 <script>
 import { addSysNotice } from "@/api/notice.js"
 import { upload } from "@/api/system.js"
+import { quillEditor } from "vue-quill-editor";
 export default {
  props: {
    value: { type: Boolean, default: false },
  },
+  components: { quillEditor },
  data () {
    return {
      ruleForm: {
        noticeTitle: '',
        noticeContent: '',
        noticeFileUrl: '',
+        noticeSource: '',
        noticeType: '1'
      },
      rules: {
@@ -52,11 +79,69 @@ export default {
        ],
        noticeContent: [
          { required: true, message: '请输入通知内容', trigger: 'blur' }
+        ],
+        noticeSource: [
+          { required: true, message: '请输入通知来源', trigger: 'blur' }
        ]
      },
+       // 富文本编辑器配置
+      editorOption: {
+        theme: "snow", // or 'bubble'
+        modules: {
+          toolbar: {
+            container: [
+              ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
+              ["blockquote", "code-block"], // 引用  代码块
+              [{ header: 1 }, { header: 2 }], // 1、2 级标题
+              [{ list: "ordered" }, { list: "bullet" }], // 有序、无序列表
+              [{ script: "sub" }, { script: "super" }], // 上标/下标
+              [{ indent: "-1" }, { indent: "+1" }], // 缩进
+              [{ direction: "rtl" }], // 文本方向
+              [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
+              [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
+              [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
+              // [{ font: ['songti'] }], // 字体种类
+              [{ align: [] }], // 对齐方式
+              ["clean"], // 清除文本格式
+              ["image", "video"], // 链接、图片、视频
+            ],
+             handlers: {
+                image: function(value) {
+                    if (value) {
+                        // 用upload的点击事件代替文本编辑器的图片上传事件
+                        document.querySelector('.richUpload input').click();
+                    } else {
+                        this.quill.format('image', false);
+                    }
+                }
+            }
+          }
+        },
+        placeholder: "请输入正文",
+      },
    }
  },
+ mounted() {
+    //  自定义粘贴图片功能
+    let quill = this.$refs.myQuillEditor.quill;    
+    quill.root.addEventListener("paste",evt => {
+        console.log(1111);
+        if (evt.clipboardData && evt.clipboardData.files &&evt.clipboardData.files.length) {
+          console.log(2222);
+          evt.preventDefault();
+          [].forEach.call(evt.clipboardData.files, file => {
+            console.log(33333);
+            if (!file.type.match(/^image\/(gif|jpe?g|a?png|bmp)/i)) {
+              return;
+            }
+            console.log(4444);
+            this.RichTexthandleChange(File);
+          });
+        }
+      },
+      false
+    );
+  },
  methods: {
    submitForm () {
      let that = this;
@@ -91,6 +176,7 @@ export default {
    beforeUpload (file) {
      return true
    },
+    //附件上传事件
    async handleChange (file) {
      var formdata = new FormData();
      formdata.append("file", file.raw);
@@ -98,9 +184,53 @@ export default {
        this.ruleForm.noticeFileUrl = res.message
      })
    },
+    //富文本图片上传事件
+    async RichTexthandleChange (file) {
+      let that = this;
+      var formdata = new FormData();
+      formdata.append("file", file.raw);
+      upload(formdata).then(res => {
+        //editor对象
+        const quill = that.$refs.myQuillEditor.quill;
+        // 如果上传成功
+        // 获取光标所在位置
+        const length = quill.selection.savedRange.index;
+        // 插入图片
+        quill.insertEmbed(length, 'image', res.message);
+        // 调整光标到最后
+        quill.setSelection(length + 1);
+        //that.quillUpdateImg = false;
+      })
+    },
+    onSubmit() {
+      //console.log("submit!");
+    },
+    // 失去焦点事件
+    onEditorBlur(quill) {
+      //console.log("editor blur!", quill);
+    },
+    // 获得焦点事件
+    onEditorFocus(quill) {
+      //console.log("editor focus!", quill);
+    },
+    // 准备富文本编辑器
+    onEditorReady(quill) {
+      //console.log("editor ready!", quill);
+    },
+    // 内容改变事件
+    onEditorChange({ quill, html, text }) {
+      //console.log("editor change!", quill, html, text);
+      //this.content = html;
+    },
  }
 }
 </script>
 <style scoped lang="scss">
+// .ql-editor{
+//          height:500px;
+//      }
+/deep/.ql-editor {
+  padding: 0px;
+  height: 500px;
+}     
 </style>
\ No newline at end of file
--- a/src/views/system/xttz/components/viewDialog.vue
View file @e8869ff
+++ b/src/views/system/xttz/components/viewDialog.vue
View file @e8869ff
@@ -9,7 +9,14 @@
    <el-row :gutter="8">
      <el-col :span="24" class="margin-top-middle">
        通知内容：
-        <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input>
+        <!-- <span v-html="formData.item.noticeContent"></span> -->
+        <quill-editor class="ql-editor"
+              v-model="formData.item.noticeContent"
+              ref="myQuillEditor"
+              :options="editorOption"
+            >
+            </quill-editor>
+        <!-- <el-input type="textarea" :rows="20" v-model="formData.item.noticeContent"></el-input> -->
      </el-col>
    </el-row>
    <el-row :gutter="8">
@@ -21,9 +28,16 @@
  </div>
 </template>
 <script>
+import { quillEditor } from "vue-quill-editor";
 export default {
+    components: { quillEditor },
  data () {
    return {
+       // 富文本编辑器配置
+      editorOption: {
+        theme: "snow", // or 'bubble'
+        placeholder: "请输入正文",
+      },
    };
  },
  components: {},
@@ -49,4 +63,7 @@ export default {
 .margin-top-middle {
  margin-top: 10px
 }
+/deep/.ql-editor {
+  padding: 0px;
+}  
 </style>
\ No newline at end of file
--- a/src/views/xtjk/cwrz/cwrzdata.js
View file @e8869ff
+++ b/src/views/xtjk/cwrz/cwrzdata.js
View file @e8869ff
@@ -59,6 +59,11 @@ class data extends filter {
        }
      },
      {
+        prop: "creater",
+        label: "操作人",
+        width: '100'
+      },
+      {
        prop: "createtime",
        label: "报错时间",
        width: '200'