志愿者banner新增内容发布

src/views/modules/heart/actbanner-add-or-update.vue

@@ -1,6 +1,6 @@
 <template>
   <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false" :close-on-press-escape="false">
-    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '200px' : '120px'">
+    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '120px' : '80px'">
           <el-form-item label="标题" prop="title">
           <el-input v-model="dataForm.title" placeholder="标题" maxlength="30" show-word-limit></el-input>
       </el-form-item>
@@ -37,6 +37,12 @@
           <el-form-item label="排序" prop="sort">
           <el-input-number v-model="dataForm.sort" :min="0" :max="999999"></el-input-number>
       </el-form-item>
+      <el-form-item prop="content"
+                    label="内容">
+        <el-row style="height: 550px;">
+          <tinymce-editor v-model="dataForm.content"></tinymce-editor>
+        </el-row>
+      </el-form-item>
       </el-form>
     <template slot="footer">
       <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
@@ -48,6 +54,7 @@
 <script>
 import debounce from 'lodash/debounce'
 import Cookies from 'js-cookie'
+import TinymceEditor from '@/components/tinymce-editor'
 export default {
   data () {
     return {
@@ -70,7 +77,8 @@ export default {
         createdTime: '',
         updatedBy: '',
         updatedTime: '',
-        sort: 0
+        sort: 0,
+        content: ''
       },
       optionBannerType: [],
       // 图片
@@ -105,6 +113,9 @@ export default {
     init () {
       this.visible = true
       this.$nextTick(() => {
+        // 富文本
+        this.hideUpload = false
+        this.uploadUrl = `${window.SITE_CONFIG['apiURL']}/oss/file/upload?token=${Cookies.get('token')}`
         this.$refs['dataForm'].resetFields()
         if (this.dataForm.id) {
           this.getInfo()
@@ -142,8 +153,15 @@ export default {
     handelError () {
       this.loading = false
     },
+    removeHTMLTag (str) {
+      str = str.replace('<p><br></p >', '')
+      return str
+    },
     // 表单提交
     dataFormSubmitHandle: debounce(function () {
+      if (this.dataForm.content != null && this.dataForm.content !== undefined) {
+        this.dataForm.content = this.removeHTMLTag(this.dataForm.content)
+      }
       this.$refs['dataForm'].validate((valid) => {
         if (!valid) {
           return false
@@ -165,6 +183,9 @@ export default {
         }).catch(() => {})
       })
     }, 1000, { 'leading': true, 'trailing': false })
+  },
+  components: {
+    TinymceEditor
   }
 }
 </script>