1

unimall-admin/src/views/aboutUsHxinfo/index.vue

@@ -120,7 +120,7 @@
     />
 
     <!-- 添加或修改记录关于我们信息对话框 -->
-    <el-dialog :title="title" :visible.sync="open" width="500px">
+    <el-dialog :title="title" :visible.sync="open" width="1000px" @opened="openDialog">
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
         <el-form-item label="标题" prop="title">
           <el-input v-model="form.title" placeholder="请输入标题" />
@@ -148,7 +148,8 @@
           <el-input v-model="form.classify" placeholder="请输入分类" />
         </el-form-item> -->
         <el-form-item label="内容" prop="content">
-          <el-input v-model="form.content" placeholder="请输入内容" />
+          <!-- <el-input v-model="form.content" placeholder="请输入内容" /> -->
+          <textarea id="ck-editor" name="editor" rows="10" cols="80"></textarea>
         </el-form-item>
         <!-- <el-form-item label="详情" prop="details">
           <el-input v-model="form.details" type="textarea" placeholder="请输入内容" />
@@ -226,6 +227,48 @@ export default {
     this.getList();
   },
   methods: {
+    openDialog(){
+      window.CKEDITOR.replace('ck-editor', { height: '400px', width: '100%', toolbar: 'toolbar_Full' });
+    this.editor = window.CKEDITOR.instances['ck-editor']
+    this.editor.on('fileUploadRequest', evt => {
+      const requestData = evt.data.requestData
+      const upload = requestData.upload
+      delete requestData.upload
+      requestData.file = upload
+    })
+
+    this.editor.on('fileUploadResponse', evt => {
+      evt.stop();
+      const data = evt.data
+      const fileLoader = data.fileLoader
+      const res = JSON.parse(fileLoader.xhr.responseText)
+      console.log(res)
+      if (res.errno !== 200) {
+        data.message = '上传失败'
+        evt.cancel();
+        return
+      }
+      data.fileName = fileLoader.fileName
+      data.url = res.url
+      data.message = '上传成功'
+    })
+    },
+    InsertHTML(html) {
+      // Get the editor instance that you want to interact with.
+      // var value = document.getElementById('ck-editor').value;
+      console.log(this.editor.getData())
+      // Check the active editing mode.
+      if (this.editor.mode == 'wysiwyg') {
+        // Insert HTML code.
+        // https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_editor.html#method-insertHtml
+
+        this.editor.setData(html);
+      } else
+        alert('You must be in WYSIWYG mode!');
+    },
+    getContent() {
+      console.log(this.editor.getData())
+    },
     // 上传图片了处理图片
     uploadSuccessHandle(e, file) {
         const that = this
@@ -312,7 +355,9 @@ export default {
       this.reset();
       const id = row.id || this.ids.join(',')
       getAboutUsHxinfo(id).then(response => {
+        let that = this
         this.form = response.data.data
+        setTimeout(()=>{that.InsertHTML(that.form.content)},1000) 
         this.open = true;
         this.title = "修改关于我们核心价值";
       });
@@ -321,6 +366,7 @@ export default {
     submitForm: function() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          this.form.content = this.editor.getData()
           if (this.form.id != undefined) {
             updateAboutUsHxinfo(this.form).then(response => {
               if (response.data) {