|
|
@@ -0,0 +1,175 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-Record">
|
|
|
+ <!-- <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()"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="adult-book-input-item">
|
|
|
+ <span class="adult-book-lable">图片：</span>
|
|
|
+ <Upload :changeFillId="changeImage" :uploadType="'image'" />
|
|
|
+ </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' + artIndex" class="art_url"
|
|
|
+ >{{ artItem.url }}
|
|
|
+ <i class="el-icon-document-copy" @click="copyHttp('file' + artIndex)"
|
|
|
+ /></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <div class="main">
|
|
|
+ <Editor id="tinydemo" v-model="curQue.con" :init="init" />
|
|
|
+ </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"],
|
|
|
+ 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,
|
|
|
+ }, //富文本初始化
|
|
|
+ data_structure: {
|
|
|
+ type: "tinydemo",
|
|
|
+ name: "富文本",
|
|
|
+ title: "",
|
|
|
+ con: "",
|
|
|
+ img_list: [],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ copyHttp(id) {
|
|
|
+ CopyToClipboard(id, this);
|
|
|
+ },
|
|
|
+ changeImage(fileList, item, index) {
|
|
|
+ console.log(fileList);
|
|
|
+ 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));
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ if (!this.curQue) {
|
|
|
+ this.changeCurQue(this.data_structure);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ tinymce.init({});
|
|
|
+ },
|
|
|
+ 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>
|
natasha