GCLS_Page_Book_Component_NPC/src/components/Adult/inputModules/Tinydemo.vue

<!--  -->
<template>
  <div class="Big-Book-Record" v-if="curQue">
    <!-- <img
      src="../../../assets/adult/maikefeng-red.png"
      class="Big-Book-Record-icon"
    /> -->
    <div class="adult-book-input-item">
      <span class="adult-book-lable">标题：</span>
      <el-input
        class="adult-book-input"
        type="textarea"
        autosize
        placeholder="请输入标题"
        v-model="curQue.title"
        @blur="curQue.title = curQue.title.trim()"
        maxlength="500"
        show-word-limit
      ></el-input>
    </div>
    <div class="adult-book-input-item">
      <span class="adult-book-lable">图片：</span>
      <Upload
        :changeFillId="changeImage"
        :uploadType="'image'"
        :filleNumber="999"
      />
    </div>
    <ul v-if="curQue.img_list.length > 0" class="uploadArt_list">
      <li
        v-for="(artItem, artIndex) in curQue.img_list"
        :key="'articleImgList' + artIndex"
      >
        <span class="art_name">{{ artItem.name }}</span>
        <span v-if="artItem.url" :id="'file' + number" class="art_url"
          >{{ artItem.url }}
          <i class="el-icon-document-copy" @click="copyHttp('file' + number)"
        /></span>
      </li>
    </ul>
    <div class="main">
      <Editor
        :id="'tinydemo' + number"
        v-model="curQue.con"
        :init="init"
        @input="articleChange"
      />
    </div>
  </div>
</template>

<script>
import Upload from "../common/Upload.vue";
import tinymce from "tinymce/tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/icons/default/icons";
import "tinymce/themes/silver";
// 引入富文本编辑器主题的js和css
import "tinymce/themes/silver/theme.min";
import "tinymce/skins/ui/oxide/skin.min.css";
// 扩展插件
// import "tinymce/plugins/"
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount"; // 字数统计插件
import "tinymce/plugins/media"; // 插入视频插件
import "tinymce/plugins/template"; // 模板插件
import "tinymce/plugins/fullscreen";
import "tinymce/plugins/paste";
import "tinymce/plugins/preview";
import "tinymce/plugins/contextmenu";
import "tinymce/plugins/textcolor";
import "tinymce/plugins/colorpicker";
import { CopyToClipboard } from "@/utils/auth";

export default {
  components: { Editor, Upload },
  props: ["curQue", "fn_data", "changeCurQue", "number"],
  data() {
    return {
      init: {
        language_url: `/tinymce/langs/zh_CN.js`,
        language: "zh_CN",
        skin_url: "/tinymce/skins/ui/oxide",
        height: 500,
        plugins: "link lists image code table wordcount  preview",
        toolbar:
          "preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat",
        branding: false,
        ax_wordlimit_num: 50,
        ax_wordlimit_callback: function (editor, txt, num) {
          tipsJS("当前字数：" + txt.length + "，限制字数：" + num);
        },
      }, //富文本初始化
      data_structure: {
        type: "tinydemo",
        name: "富文本",
        title: "",
        con: "",
        img_list: [],
      },
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    copyHttp(id) {
      CopyToClipboard(id, this);
    },
    changeImage(fileList, items, index) {
      const articleImgList = JSON.parse(JSON.stringify(fileList));
      const articleImgRes = [];
      articleImgList.forEach((item) => {
        if (item.response) {
          const obj = {
            name: item.name,
            url: item.response.file_info_list[0].file_url,
            id: "[FID##" + item.response.file_info_list[0].file_id + "##FID]",
          };
          articleImgRes.push(obj);
        }
      });
      this.curQue.img_list = JSON.parse(JSON.stringify(articleImgRes));
    },
    articleChange(e) {
      let _this = this;
      let str = e.replace(/<[^>]+>/g, "");
      let arr = str.split(/[\n]/);
      let newstr = "";
      arr.forEach((item) => {
        newstr += item;
      });
      if (newstr.length == 5000) {
        this.newarticle = e;
      }
      if (newstr.length > 5000) {
        if (document.getElementsByClassName("el-message").length == 0) {
          this.$message.warning("已超出字数限制");
        }
        return;
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    if (!this.curQue) {
      this.changeCurQue(this.data_structure);
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    tinymce.init({
      selector: `#tinydemo${this.number}`,
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.Big-Book-Record {
  &-icon {
    width: 48px;
    height: 48px;
  }
  .Big-Book-hanzi-option {
    margin-top: 20px;
  }
  .main {
    margin-top: 10px;
  }
  .addoption {
    width: 148px;
    height: 40px;
    background: #f3f3f3;
    border: 1px dashed rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
    border-radius: 4px;
    text-align: center;
    line-height: 40px;
    cursor: pointer;
    font-size: 14px;
    color: #000000;
  }
  .Big-Book-con {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }
  .uploadArt_list {
    > li {
      min-height: 28px;
      .art_name {
        margin-right: 10px;
      }
    }
  }
}
</style>