@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/Skill.vue

@@ -1,17 +1,9 @@
 <template>
     <div class="w-skill" v-if="data">
         <div class="w-skill-wrapper">
-            <img
-                class="w-skill-icon"
-                :src="iconLink(data.IconID || 13)"
-                :alt="data.Name"
-            />
+            <img class="w-skill-icon" :src="iconLink(data.IconID || 13)" :alt="data.Name" />
             <div class="w-skill-content">
-                <el-button
-                    type="text"
-                    class="w-skill-switch-parse"
-                    @click="show_parse = !show_parse"
-                >
+                <el-button link class="w-skill-switch-parse" @click="show_parse = !show_parse">
                     <i class="el-icon-refresh"></i>
                 </el-button>
                 <span class="w-skill-name">{{ data.Name }}</span>
@@ -26,28 +18,42 @@
 </template>
 
 <script>
-import { getSkill } from "../service/database.js";
+import { getSkill } from "./service/database.js";
 import { iconLink } from "@jx3box/jx3box-common/js/utils";
 export default {
     name: "Skill",
-    props: ["client", "id", "level"],
+    props: {
+        client: {
+            type: String,
+            default: "std",
+        },
+        id: {
+            type: [String, Number],
+            default: "",
+        },
+        level: {
+            type: [String, Number],
+            default: "",
+        },
+    },
     data: () => ({
         data: null,
         show_parse: true,
+        requestVersion: 0,
     }),
     computed: {
         params: function () {
             return [this.client, this.id, this.level];
         },
         desc: function () {
-            if (this.data.parse && this.show_parse) {
+            if (this.data?.parse && this.show_parse) {
                 const result = this.data.parse.desc;
                 return result.replace(/\\n/g, "\n");
             }
             return this.data?.Desc;
         },
         talent_desc: function () {
-            if (this.data.parse && this.show_parse) {
+            if (this.data?.parse && this.show_parse) {
                 return this.data.parse.talent_desc;
             }
             return "";
@@ -56,32 +62,36 @@ export default {
     watch: {
         params: {
             immediate: true,
-            deep: true,
             handler(val) {
+                this.requestVersion += 1;
+                const currentVersion = this.requestVersion;
+
                 if (val) {
                     let [client, id, level] = val;
+                    if (!id) {
+                        this.data = null;
+                        return;
+                    }
                     // 读取本地数据
-                    const cache = sessionStorage.getItem(
-                        `skill-${client}-${id}-${level}`
-                    );
+                    const cache = sessionStorage.getItem(`skill-${client}-${id}-${level}`);
                     if (cache) {
                         try {
                             this.data = JSON.parse(cache);
                             return;
-                        } catch {}
+                        } catch (e) {
+                            console.log(e, "[Skill]无法解析本地缓存");
+                        }
                         // 没有缓存则发起请求获取数据
                     }
-                    if (!id) return;
-                    getSkill(...this.params).then(res => {
+                    getSkill(client, id, level).then((res) => {
+                        if (currentVersion !== this.requestVersion) return;
+
                         let data = res.data?.list?.[0];
                         if (!data) data = null;
                         this.data = data;
 
                         // 将数据放入 sessionStorage
-                        sessionStorage.setItem(
-                            `skill-${client}-${id}-${level}`,
-                            JSON.stringify(data)
-                        );
+                        sessionStorage.setItem(`skill-${client}-${id}-${level}`, JSON.stringify(data));
                     });
                 }
             },
@@ -96,5 +106,5 @@ export default {
 </script>
 
 <style lang="less">
-@import "../assets/css/module/skill.less";
+@import "./assets/css/module/skill.less";
 </style>

package/src/Tinymce.vue

@@ -3,17 +3,28 @@
         <slot name="prepend"></slot>
 
         <div class="c-editor-header">
+            <!-- 上传附件 -->
             <Upload v-if="attachmentEnable" @insert="insertAttachments" />
+            <!-- 剑三资源库 -->
             <Resource v-if="resourceEnable" @insert="insertResource" />
+            <!-- 魔盒资源库 -->
             <BoxResource v-if="resourceEnable" @insert="insertResource" :subtype="subtype" />
         </div>
-        <Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
+
+        <Emotion v-if="emotionEnable" class="c-editor-emotion" @selected="emotionSelected"></Emotion>
 
         <slot></slot>
 
-        <editor id="tinymce" v-model="data" :init="init" class="c-tinymce" placeholder="✔ 图片可右键粘贴或拖拽至编辑器内自动上传 ✔ 支持word/excel内容一键粘贴" />
+        <editor
+            id="tinymce"
+            v-model="data"
+            :init="init"
+            class="c-tinymce"
+            placeholder="✔ 图片可右键粘贴或拖拽至编辑器内自动上传 ✔ 支持word/excel内容一键粘贴"
+        />
         <el-alert class="u-tutorial" type="warning" show-icon
-            >进入特殊区域（代码块，折叠块等等）脱离或使用工具栏触发后，请使用键盘方向 → ↓ 键进行脱离，回车只是正常在区块内换行。去掉样式点击第二行第一个&lt;清除格式&gt;即可复位。<a
+            >进入特殊区域（代码块，折叠块等等）脱离或使用工具栏触发后，请使用键盘方向 → ↓
+            键进行脱离，回车只是正常在区块内换行。去掉样式点击第二行第一个&lt;清除格式&gt;即可复位。<a
                 href="/collection/31"
                 target="_blank"
                 >[编辑器使用指南]</a
@@ -25,28 +36,75 @@
 </template>
 
 <script>
-import Vue from "vue";
-import Editor from "@tinymce/tinymce-vue";
+import GlobalConf from "../config/global.js";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const { __cdn, __imgPath, __cms } = JX3BOX;
+// 开发环境走 devServer proxy，避免跨域导致粘贴图片上传“看起来没反应”
+const apiUrl = process.env.NODE_ENV === "development" ? "/api/cms/upload/tinymce" : __cms + "api/cms/upload/tinymce";
+
 import Upload from "./Upload";
 import Resource from "./Resource";
 import BoxResource from "./BoxResource";
-import { __cms } from "@jx3box/jx3box-common/data/jx3box.json";
-import { __imgPath } from "@jx3box/jx3box-common/data/jx3box.json";
 import Emotion from "@jx3box/jx3box-emotion/src/Emotion.vue";
-import hljs_languages from "../assets/js/item/hljs_languages.js";
-const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
-const API = API_Root + "api/cms/upload/tinymce";
 
-// directive
-import { draggable } from "../assets/js/drag";
-Vue.directive("draggable", draggable);
+import axios from "axios";
+import Editor from "@tinymce/tinymce-vue";
+import hljs_languages from "./assets/js/item/hljs_languages.js";
+// TODO:请求代理问题
 
 export default {
     name: "Tinymce",
-    props: ["content", "height", "attachmentEnable", "resourceEnable", "subtype"],
+    components: {
+        Editor,
+        Upload,
+        Resource,
+        BoxResource,
+        Emotion,
+    },
+    props: {
+        // Vue3 默认 v-model
+        modelValue: {
+            type: String,
+        },
+
+        // 内容 兼容旧用法
+        content: {
+            type: String,
+            default: "",
+        },
+
+        // 默认高度
+        height: {
+            type: Number,
+            default: 800,
+        },
+
+        // 是否启用附件上传
+        attachmentEnable: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否启用资源插入
+        resourceEnable: {
+            type: Boolean,
+            default: true,
+        },
+        // 是否启用表情插入
+        emotionEnable: {
+            type: Boolean,
+            default: true,
+        },
+
+        // 心法（技能连招使用）
+        subtype: {
+            type: String,
+            default: "通用",
+        },
+    },
+    emits: ["update:modelValue", "update:content", "update"],
     data: function () {
         return {
-            data: this.content,
+            data: this.modelValue ?? this.content ?? "",
             init: {
                 // 选择器
                 selector: "#tinymce",
@@ -58,9 +116,10 @@ export default {
                 convert_urls: false,
 
                 // 样式
-                // TODO:
-                content_css: process.env.VUE_APP_DEV_COMPONENT == "true" ? "/css/article.css" : `https://cdn.jx3box.com/static/jx3box-editor/css/article.css`,
-                // content_css: `http://localhost:3000/skins/content/default/content.min.css`,
+                content_css:
+                    process.env.VUE_APP_TINYMCE_DEV === "true"
+                        ? `http://localhost:5120/skins/content/default/content.min.css`
+                        : `${__cdn}/static/tinymce/skins/content/default/content.min.css`,
                 body_class: "c-article c-article-editor c-article-tinymce",
                 height: this.height || 800,
                 autosave_ask_before_unload: false,
@@ -71,131 +130,114 @@ export default {
                 menubar: false,
                 branding: false,
                 contextmenu: "",
-                plugins: [
-                    "link autolink",
-                    "hr lists advlist table codeinline codesample checklist foldtext latex anchor",
-                    "image emoticons media videox macro qixue talent2",
-                    "code fullscreen wordcount powerpaste pagebreak printpage pz audiox", // template anchor jx3icon autosave
-                ],
-                toolbar: [
-                    "undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | fullscreen code", //anchor restoredraft
-                    "removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media videox audiox | macro pz qixue talent2 pagebreak printpage", // template anchor jx3icon
-                ],
-                mobile: {
-                    toolbar_drawer: true,
-                    toolbar: [
-                        "undo emoticons bold italic underline strikethrough superscript subscript link unlink forecolor backcolor removeformat pagebreak fullscreen code",
-                        "hr alignleft aligncenter alignright alignjustify indent outdent bullist numlist checklist table blockquote foldtext codeinline codesample latex macro pz qixue talent2 media videox audiox",
-                    ],
-                },
+                plugins: GlobalConf.plugins,
+                toolbar: GlobalConf.toolbar,
+                mobile: GlobalConf.mobile,
                 block_formats: "段落=p;一级标题=h1;二级标题=h2;三级标题=h3;四级标题=h4;五级标题=h5;六级标题=h6;",
                 fontsize_formats: "12px 14px 16px 18px 22px 24px 26px 28px 32px 48px 72px",
-                color_map: [
-                    "FF99CC",
-                    "浅粉",
-                    "FF3399",
-                    "深粉",
-                    "FF0000",
-                    "正红",
-                    "CC99FF",
-                    "紫色",
-                    "9933ff",
-                    "深紫",
-                    "FFFF99",
-                    "浅黄",
-                    "FFFF00",
-                    "金黄",
-                    "FFCC00",
-                    "亮黄",
-                    "FFCC99",
-                    "浅桃",
-                    "FF6600",
-                    "橘色",
-                    "CCFFCC",
-                    "浅绿",
-                    "9bf915",
-                    "荧光绿",
-                    "00FF00",
-                    "辣眼绿",
-                    "49c10f",
-                    "深绿",
-                    "008080",
-                    "深青",
-                    "CCFFFF",
-                    "浅蓝",
-                    "00FFFF",
-                    "参考线",
-                    "00CCFF",
-                    "天蓝",
-                    "99CCFF",
-                    "蔚蓝",
-                    "0000FF",
-                    "辣眼蓝",
-                    "CC0000",
-                    "深红",
-                    "000000",
-                    "黑色",
-                ],
+                color_map: GlobalConf.color_map,
 
                 codesample_languages: hljs_languages,
 
                 // Image
                 image_advtab: true,
-                // paste_data_images: true,
                 file_picker_types: "file image",
-                images_upload_url: API,
+                // images_upload_url: this.uploadUrl,
                 automatic_uploads: true,
-                images_upload_credentials: true,
-
-                // Hook
-                // setup: this.setup,
-                // init_instance_callback: this.ready,
-
-                // Template
-                // templates: [
-                //     {
-                //         title: "剑三宏",
-                //         description: "",
-                //         content: `
-                //             <pre class="e-jx3macro-area w-jx3macro">/cast 自绝经脉</pre>
-                //         `,
-                //     },
-                // ],
+                // 允许直接粘贴图片（会以 blob 形式触发 images_upload_handler）
+                paste_data_images: true,
+                // images_upload_credentials: true,
+                images_upload_handler: this.imagesUploadHandler,
                 valid_children: "+body[style]",
             },
             mode: "tinymce",
-            style: "",
         };
     },
-    model: {
-        prop: "content",
-        event: "update",
-    },
     watch: {
-        data: function (newval) {
-            this.$emit("update", newval);
+        data: function (val) {
+            this.$emit("update:modelValue", val);
+            this.$emit("update:content", val);
+            this.$emit("update", val);
         },
-        content: function (newval) {
-            this.data = newval;
+        modelValue: {
+            immediate: true,
+            handler: function (val) {
+                // 当外部未使用默认 v-model（modelValue 未传入）时，走 :content / v-model:content
+                if (val !== undefined && val !== this.data) this.data = val ?? "";
+            },
         },
-        style(val) {
-            this.init.content_style = val;
+        content: {
+            immediate: true,
+            handler: function (val) {
+                if (this.modelValue === undefined && val !== this.data) this.data = val ?? "";
+            },
         },
     },
     methods: {
-        setup: function (editor) {
-            // console.log("ID为: " + editor.id + " 的编辑器即将初始化.");
+        setup(editor) {
+            console.log("ID为: " + editor.id + " 的编辑器即将初始化.");
         },
-        ready: function (editor) {
-            // console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
+        ready(editor) {
+            console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
         },
-        insertAttachments: function (data) {
+        insertAttachments(data) {
+            // eslint-disable-next-line no-undef
             tinyMCE.editors["tinymce"].insertContent(data.html);
         },
-        insertResource: function (data) {
+        insertResource(data) {
+            // eslint-disable-next-line no-undef
             tinyMCE.editors["tinymce"].insertContent(data);
         },
-        emotionSelected: function (emotion) {
+        imagesUploadHandler(blobInfo, success, failure, progress) {
+            let fdata = new FormData();
+            fdata.append("file", blobInfo.blob(), blobInfo.filename());
+
+            axios
+                .post(apiUrl, fdata, {
+                    headers: {
+                        "Content-Type": "multipart/form-data",
+                    },
+                    withCredentials: true,
+                    auth: {
+                        username: (localStorage && localStorage.getItem("token")) || "",
+                        password: "cms common request",
+                    },
+                    onUploadProgress: function (e) {
+                        if (progress && e.total > 0) {
+                            progress((e.loaded / e.total) * 100);
+                        }
+                    },
+                })
+                .then((res) => {
+                    const payload = res.data || {};
+                    if (payload.code) {
+                        failure(payload.msg || payload.message || "上传失败");
+                        return;
+                    }
+
+                    const url =
+                        payload.location ||
+                        payload.url ||
+                        (payload.data &&
+                            (Array.isArray(payload.data)
+                                ? payload.data[0]
+                                : payload.data.url || payload.data.location || payload.data));
+
+                    if (!url) {
+                        failure("上传成功但未返回图片地址");
+                        return;
+                    }
+
+                    success(url);
+                })
+                .catch((err) => {
+                    const message =
+                        (err.response && err.response.data && (err.response.data.msg || err.response.data.message)) ||
+                        "图片上传请求异常";
+                    failure(message);
+                });
+        },
+        emotionSelected(emotion) {
             let src = emotion.filename;
             if (!emotion.filename.startsWith("http")) {
                 src = `${__imgPath}emotion/output/${emotion.filename}`;
@@ -204,18 +246,12 @@ export default {
             tinyMCE.editors["tinymce"].insertContent(IMAGE);
         },
     },
-    mounted: function () {},
-    components: {
-        Editor,
-        Upload,
-        Resource,
-        Emotion,
-        BoxResource,
+    mounted() {
+        // console.log(process.env.VUE_APP_TINYMCE_DEV)
     },
 };
 </script>
 
 <style lang="less">
-@import "../assets/css/tinymce.less";
-@import "../assets/css/tinymce/combo.less";
+@import "./assets/css/tinymce.less";
 </style>