富文本框

epmet-oper-web/.env.development

@@ -1,8 +1,9 @@
 NODE_ENV=development
 # VUE_APP_API_SERVER =  http://118.190.150.119:41080/api
-VUE_APP_API_SERVER =  http://localhost:8080/api
+# VUE_APP_API_SERVER =  http://localhost:8080/api
-# VUE_APP_API_SERVER =  http://192.168.51.36:8080/api
+VUE_APP_API_SERVER =  http://192.168.1.144/api
 # VUE_APP_API_SERVER =  https://epmet-dev.elinkservice.cn/api
+
 VUE_APP_NODE_ENV=dev
 #项目根路径
 VUE_APP_PUBLIC_PATH=epmet-oper

epmet-oper-web/src/views/modules/sys/upgrade-version-history.vue

@@ -43,8 +43,8 @@
     </el-card>
 
     <!-- 新增/修改 -->
-    <el-dialog :visible.sync="this.publishVersionUpgradeShow"
+    <el-dialog :visible.sync="publishVersionUpgradeShow"
-               v-if="this.publishVersionUpgradeShow"
+               v-if="publishVersionUpgradeShow"
                :close-on-click-modal="false"
                :close-on-press-escape="false"
                :title="this.operation === 'create' ? '发布新版本' : '修改'">
@@ -55,8 +55,25 @@
         </el-form-item>
 
         <el-form-item prop="richContent" label="内容">
-          <el-input v-model="createOrUpdateForm.richContent">
+          <!-- <el-input v-model="createOrUpdateForm.richContent"> -->
-          </el-input>
+        <!-- <Tinymce v-model="createOrUpdateForm.richContent" :height="300" placeholder="在这里输入文字" /> -->
+        
+        <!-- :customerId="customerId" -->
+        <div id="J_quillEditor"></div>
+        <!-- 自定义上传图片功能 (使用element upload组件) -->
+        <el-upload
+          :headers="$getElUploadHeaders()"
+          :action="uploadUrl"
+          :show-file-list="false"
+          :before-upload="uploadBeforeUploadHandle"
+          :on-success="uploadSuccessHandle"
+          style="display: none"
+        >
+          <el-button ref="uploadBtn" type="primary" size="small">{{
+            $t('upload.button')
+          }}</el-button>
+        </el-upload>
+          <!-- </el-input> -->
         </el-form-item>
         <el-button @click="onSubmitBtnClick" type="primary">提交</el-button>
         <el-button @click="onCancelBtnClick" type="primary">取消</el-button>
@@ -67,21 +84,38 @@
 
 
 <script>
-
+import Cookies from 'js-cookie'
-import Tinymce from '@c/tinymce/index.vue'
+import 'quill/dist/quill.snow.css'
-
+import Quill from 'quill'
 export default {
 
-  components: {
+  components: {},
-    Tinymce
-  },
 
   activated() {
     this.loadVersionUpgradeHistories();
   },
+  mounted(){
     
+  },
   data() {
     return {
+      quillEditor: null,
+      quillEditorToolbarOptions: [
+        ['bold', 'italic', 'underline', 'strike'],
+        ['blockquote', 'code-block', 'image'],
+        [{ header: 1 }, { header: 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, false] }],
+        [{ color: [] }, { background: [] }],
+        [{ font: [] }],
+        [{ align: [] }],
+        ['clean']
+      ],
+      uploadUrl: '',
       histories: [],
       queryForm: {},
       createOrUpdateForm: {
@@ -100,11 +134,54 @@ export default {
   },
 
   methods: {
+    // 图片上传前
+    uploadBeforeUploadHandle(file) {
+      if (
+        file.type !== 'image/jpg' &&
+        file.type !== 'image/jpeg' &&
+        file.type !== 'image/png' &&
+        file.type !== 'image/gif'
+      ) {
+        this.$message.error(this.$t('upload.tip', { format: 'jpg、png、gif' }))
+        return false
+      }
+    },
+    // 上传图片成功
+    uploadSuccessHandle(res, file, fileList) {
+      if (res.code !== 0) {
+        return this.$message.error(res.msg)
+      }
+      this.quillEditor.insertEmbed(
+        this.quillEditor.getSelection().index,
+        'image',
+        res.data.url
+      )
+    },
+    // 加载富文本编辑器
+    initQuill() {
+      console.log(document.getElementById('J_quillEditor'));
+      this.quillEditor = new Quill('#J_quillEditor', {
+        modules: {
+          toolbar: this.quillEditorToolbarOptions
+        },
+        theme: 'snow'
+      })
+      // 自定义上传图片功能 (使用element upload组件)
+      this.uploadUrl = `${
+        window.SITE_CONFIG['apiURL']
+      }/oss/file/upload?token=${Cookies.get('token')}`
+      this.quillEditor.getModule('toolbar').addHandler('image', () => {
+        this.$refs.uploadBtn.$el.click()
+      })
+      // 监听内容变化，动态赋值
+      this.quillEditor.on('text-change', () => {
+        this.createOrUpdateForm.richContent = this.quillEditor.root.innerHTML
+      })
+    },
     /**
      * 加载版本更新历史
      */
     loadVersionUpgradeHistories() {
-      debugger
       this.$http.get(`/sys/sysVersionUpgrade/page?pageNo=${this.pageArgs.pageNo}&pageSize=${this.pageArgs.pageSize}`)
           .then(({data: result, status: httpStatus}) => {
             if (result.code === 0) {
@@ -118,24 +195,29 @@ export default {
             }
           })
     },
-
     // 新增按钮点击
     onAddBtnClick() {
       this.publishVersionUpgradeShow = true;
       this.operation = 'create';
+      this.$nextTick(()=>{
+        this.initQuill()
+      })
     },
 
     // 编辑按钮点击
-    onEditBtnClick(id) {
+    async onEditBtnClick(id) {
       this.publishVersionUpgradeShow = true;
       this.operation = 'edit';
-      this.getDetail(id);
+      await this.getDetail(id);
+      await this.initQuill();
+
     },
 
     onCancelBtnClick() {
       this.$refs['createOrUpdateForm'].resetFields();
       this.publishVersionUpgradeShow = false;
       this.operation = null;
+      this.quillEditor = null;
     },
 
     /**
@@ -183,7 +265,6 @@ export default {
     getDetail(id) {
       this.$http.get(`/sys/sysVersionUpgrade/detail/${id}`)
           .then(({status: httpStatus, data: epmetRst}) => {
-            debugger
             if (httpStatus !== 200) {
               this.$message({
                 type: 'error',
@@ -196,6 +277,8 @@ export default {
               })
             } else {
               this.createOrUpdateForm = epmetRst.data;
+            this.quillEditor.root.innerHTML = this.createOrUpdateForm.richContent
+
             }
           })
     }
@@ -204,8 +287,7 @@ export default {
 </script>
 
 <style scoped lang="css">
-.tinymce_view {
+::v-deep .ql-toolbar{
-  height: 400px;
+  margin-top: 36px;
-  overflow: auto;
 }
 </style>