新闻资讯

src/App.vue

   padding: 16px 0;
   text-align: right;
 }
+.ivu-form-item-content {
+  line-height: 34px;
+}
+.ivu-modal-body {
+  max-height: calc(100vh - 260px) !important;
+  overflow: auto;
+}
 </style>

src/views/news/index.vue

             :accept="getPictureAccept()"
             :show-upload-list="false"
           >
-            <img v-if="addForm.newspic" :src="$api.showImageUrl" />
+            <img
+              style="width: 200px"
+              v-if="addForm.newspic"
+              :src="$api.showImageUrl + addForm.newspic"
+            />
             <Button v-else icon="ios-cloud-upload-outline">上传封面</Button>
           </Upload>
         </FormItem>
         <FormItem label="摘要" prop="newssummary">
           <Input
             type="textarea"
-            :rows="3"
+            :rows="2"
             v-model="addForm.newssummary"
             :maxlength="255"
             show-word-limit
             placeholder="请输入摘要"
           />
         </FormItem>
-        <FormItem label="内容" prop="newscontent"></FormItem>
+        <FormItem label="内容" prop="newscontent">
+          <NewsEditor
+            :height="300"
+            @change="getNewsContent($event, addForm)"
+            :content="addForm.newscontent"
+          ></NewsEditor>
+        </FormItem>
       </Form>
       <div slot="footer" style="text-align: right">
         <Button @click="addForm.show = false">取消</Button>
         <Button @click="toSaveAdd()" type="primary">保存</Button>
       </div>
     </Modal>
+    <Modal
+      v-model="modifyForm.show"
+      class="modal1"
+      :mask-closable="false"
+      title="修改新闻资讯"
+    >
+      <Form
+        :label-width="60"
+        label-position="right"
+        ref="modifyForm"
+        :rules="formRules"
+        :model="modifyForm"
+      >
+        <FormItem label="封面" prop="newspic">
+          <Upload
+            :format="pictureFormat"
+            :max-size="10 * 1024"
+            action
+            :before-upload="
+              (file) => {
+                beforeUploadPicture(file, modifyForm);
+                return false;
+              }
+            "
+            :accept="getPictureAccept()"
+            :show-upload-list="false"
+          >
+            <img
+              style="width: 200px"
+              v-if="modifyForm.newspic"
+              :src="$api.showImageUrl + modifyForm.newspic"
+            />
+            <Button v-else icon="ios-cloud-upload-outline">上传封面</Button>
+          </Upload>
+        </FormItem>
+        <FormItem label="置顶" prop="newsup">
+          <RadioGroup v-model="modifyForm.newsup">
+            <Radio :label="1">置顶</Radio>
+            <Radio :label="2">不置顶</Radio>
+          </RadioGroup>
+        </FormItem>
+        <FormItem label="排序" prop="newsorder">
+          <InputNumber :min="1" v-model="modifyForm.newsorder" />
+        </FormItem>
+        <FormItem label="标题" prop="newstitle">
+          <Input
+            :maxlength="255"
+            show-word-limit
+            v-model="modifyForm.newstitle"
+            placeholder="请输入标题"
+          />
+        </FormItem>
+        <FormItem label="摘要" prop="newssummary">
+          <Input
+            type="textarea"
+            :rows="2"
+            v-model="modifyForm.newssummary"
+            :maxlength="255"
+            show-word-limit
+            placeholder="请输入摘要"
+          />
+        </FormItem>
+        <FormItem label="内容" prop="newscontent">
+          <NewsEditor
+            :height="400"
+            @change="getNewsContent($event, modifyForm)"
+            :content="modifyForm.newscontent"
+          ></NewsEditor>
+        </FormItem>
+      </Form>
+      <div slot="footer" style="text-align: right">
+        <Button @click="modifyForm.show = false">取消</Button>
+        <Button @click="toSaveModify()" type="primary">保存</Button>
+      </div>
+    </Modal>
+    <Modal
+      v-model="detailInfo.show"
+      class="modal1"
+      :mask-closable="false"
+      title="查看新闻资讯"
+    >
+      <Form :label-width="60" label-position="right" :model="detailInfo">
+        <FormItem label="语言">{{
+          detailInfo.ltype === 1 ? "中文" : "英文"
+        }}</FormItem>
+        <FormItem label="封面" prop="newspic">
+          <img
+            style="width: 200px"
+            v-viewer
+            v-if="detailInfo.newspic"
+            :src="$api.showImageUrl + detailInfo.newspic"
+          />
+        </FormItem>
+        <FormItem label="置顶" prop="newsup">{{
+          detailInfo.newsup === 1 ? "置顶" : "不置顶"
+        }}</FormItem>
+        <FormItem label="排序" prop="newsorder">{{
+          detailInfo.newsorder
+        }}</FormItem>
+        <FormItem label="标题" prop="newstitle">{{
+          detailInfo.newstitle
+        }}</FormItem>
+        <FormItem label="摘要" prop="newssummary">{{
+          detailInfo.newssummary
+        }}</FormItem>
+        <FormItem label="内容" prop="newscontent">
+          <div v-html="detailInfo.newscontent"></div>
+        </FormItem>
+      </Form>
+      <div slot="footer" style="text-align: center">
+        <Button @click="detailInfo.show = false">关闭</Button>
+      </div>
+    </Modal>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+import NewsEditor from "./newsEditor.vue";
 import { n_list, n_save, n_update, n_remove } from "@/api";
 import { dateFormat } from "@/utils";
 import { pictureFormat } from "@/utils/fileConfig";
 export default {
+  components: {
+    NewsEditor
+  },
   data() {
     return {
       dateFormat,
         ltype: [
           {
             required: true,
+            type: "number",
             message: "请选择语言",
             trigger: "change"
           }
           {
             required: true,
             message: "请选择是否置顶",
+            type: "number",
             trigger: "change"
           }
         ],
           {
             required: true,
             message: "请输入排序",
+            type: "number",
             trigger: "blur"
           }
         ]
     this.getNewsList();
   },
   methods: {
+    getNewsContent(html, formObj) {
+      formObj.newscontent = html;
+    },
     beforeUploadPicture(file, formObj) {
       let formData = new FormData();
-      formData.append("files", file);
+      formData.append("file", file);
       formData.append("savefolder", "news");
       axios
         .post(this.$api.baseUrl + "file/upload", formData, {
         newsup: this.addForm.newsup,
         createid: this.userInfo.userid
       }).then((res) => {
+        this.addForm.show = false;
         if (res.code === 0) {
           this.$Message.success(res.msg);
           this.searchList();
         newsup: this.modifyForm.newsup,
         newsid: this.modifyForm.newsid
       }).then((res) => {
+        this.modifyForm.show = false;
         if (res.code === 0) {
           this.$Message.success(res.msg);
           this.searchList();
       });
     },
     toViewDetail(row) {
-      console.log("toViewDetail", row);
       this.detailInfo = {
         show: true,
         ltype: row.ltype,

src/views/news/newsEditor.vue

+<template>
+  <div class="editor_root">
+    <textarea
+      :ref="`${editor_ref}_${randomNum}`"
+      :id="`${editor_ref}_${randomNum}`"
+      :style="`width: 100%;height: ${height}px;`"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+import { pictureFormat } from "@/utils/fileConfig";
+export default {
+  props: {
+    content: {
+      type: String,
+      default: function () {
+        return "";
+      }
+    },
+    editor_ref: {
+      type: String,
+      default: function () {
+        return "myCkeditor";
+      }
+    },
+    content_index: {
+      type: Number,
+      default: 0
+    },
+    placeholder: {
+      type: String,
+      default: "请输入内容"
+    },
+    height: {
+      type: Number,
+      default: 150
+    }
+  },
+  data() {
+    return {
+      randomNum: `${Math.ceil(Math.random() * 10000)}_${Date.now()}`,
+      myCkeditor: null,
+      imgsObj: {},
+      editorHtml: ""
+    };
+  },
+  watch: {
+    content: {
+      handler(newHtml) {
+        if (this.editorHtml !== newHtml) {
+          this.setContent(newHtml);
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initCkeditor();
+  },
+  beforeDestroy() {
+    if (this.myCkeditor) {
+      this.myCkeditor.destroy();
+    }
+    this.myCkeditor = null;
+  },
+  methods: {
+    setContent(content) {
+      if (content) {
+        if (this.myCkeditor && this.myCkeditor.status === "ready") {
+          this.myCkeditor.setData(content);
+          this.editorHtml = content;
+        }
+      } else {
+        setTimeout(() => {
+          if (this.myCkeditor && this.myCkeditor.status === "ready") {
+            this.myCkeditor.setData("");
+            this.editorHtml = "";
+          }
+        }, 100);
+      }
+    },
+    editorContentChange() {
+      this.$nextTick(() => {
+        if (this.myCkeditor && this.myCkeditor.document.getBody().$) {
+          let newHtml = this.myCkeditor.document.getBody().getHtml();
+          let newText = this.myCkeditor.document.getBody().getText();
+          this.editorHtml = newHtml;
+          this.$emit("change", newHtml, newText, this.content_index);
+        }
+      });
+    },
+    initCkeditor() {
+      let that = this;
+      that.myCkeditor = window.CKEDITOR.replace(
+        that.$refs[`${this.editor_ref}_${this.randomNum}`],
+        {
+          height: that.height,
+          filebrowserImageUploadUrl: that.$api.baseImageUrl,
+          editorplaceholder: that.placeholder // 占位文本
+        }
+      );
+      that.myCkeditor.on("instanceReady", function () {
+        that.setContent(that.content);
+        that.myCkeditor.dataProcessor.htmlFilter.addRules({
+          elements: {
+            img: function (el) {
+              let imgSrc = el.attributes.src;
+              if (imgSrc) {
+                if (
+                  imgSrc.indexOf("http://") > -1 ||
+                  imgSrc.indexOf("https://") > -1
+                ) {
+                  if (imgSrc.indexOf(that.$api.showImageUrl) == -1) {
+                    that.imgsObj[imgSrc] = "";
+                  }
+                }
+              }
+            }
+          }
+        });
+        that.myCkeditor.on("afterPaste", function () {
+          for (const imgSrc in that.imgsObj) {
+            if (!that.imgsObj[imgSrc]) {
+              that
+                .checkImgExists(imgSrc)
+                .then((imgUrl) => {
+                  that.changeImageUrl(imgUrl);
+                })
+                .catch((imgUrl) => {
+                  that.imgsObj[imgUrl] = "";
+                });
+            }
+          }
+        });
+        that.myCkeditor.on("fileUploadRequest", async function (evt) {
+          let fileLoader = evt.data.fileLoader,
+            formData = new FormData(),
+            xhr = fileLoader.xhr;
+          formData.append("savefolder", "news");
+          let filename = fileLoader.fileName;
+          let myFile = fileLoader.file;
+          if (myFile instanceof Blob) {
+            formData.append(
+              "file",
+              new window.File([myFile], filename, { type: myFile.type })
+            );
+          } else {
+            formData.append("file", myFile);
+          }
+          let strArr = filename.split(".");
+          filename = strArr[0];
+          let suffix = strArr[strArr.length - 1];
+          suffix = suffix.toLowerCase();
+          if (pictureFormat.includes(suffix)) {
+            xhr.open("POST", that.$api.baseUrl + "file/upload", true);
+            xhr.send(formData);
+          } else {
+            that.$Message.warning("请上传正确的图片格式");
+          }
+          evt.stop();
+        });
+        that.myCkeditor.on("fileUploadResponse", function (evt) {
+          let data = evt.data,
+            xhr = data.fileLoader.xhr;
+          let resolve = JSON.parse(xhr.responseText);
+          if (resolve.code === 0) {
+            data.url = that.$api.showImageUrl + resolve.obj;
+          } else {
+            data.message = resolve.msg;
+            evt.cancel();
+          }
+          that.editorContentChange();
+          evt.stop();
+        });
+        that.myCkeditor.on("change", function () {
+          that.editorContentChange();
+        });
+        that.myCkeditor.on("blur", function () {
+          that.editorContentChange();
+        });
+      });
+    },
+    // 验证图片连接是否有效
+    checkImgExists(imgUrl) {
+      return new Promise(function (resolve, reject) {
+        let ImgObj = new Image();
+        ImgObj.src = imgUrl;
+        ImgObj.setAttribute("crossOrigin", "Anonymous");
+        ImgObj.onload = function () {
+          resolve(imgUrl);
+        };
+        ImgObj.onerror = function () {
+          reject(imgUrl);
+        };
+      });
+    },
+    changeImageUrl(imgSrc) {
+      let that = this;
+      let formData = new FormData();
+      formData.append("newpath", "news");
+      formData.append("filepath", imgSrc);
+      that
+        .axios({
+          method: "POST",
+          timeout: 1000 * window._config.axiosFileTimeout,
+          url: that.$api.baseImageUrl + "file/down_webfile",
+          data: formData,
+          headers: {
+            "Content-Type": "multipart/form-data"
+          }
+        })
+        .then((res) => {
+          if (!res.data.code) {
+            that.imgsObj[imgSrc] = res.data.obj;
+          } else {
+            that.$Message.error(res.data.msg);
+          }
+        });
+    }
+  }
+};
+</script>
+
+<style>
+.ivu-message {
+  z-index: 999999 !important;
+}
+</style>
+<style scoped>
+.editor_root {
+  width: 100%;
+}
+</style>