@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/pages/tinymce.js

@@ -0,0 +1,49 @@
+import { createApp } from "vue";
+
+import TinymcePage from "../views/tinymce.vue";
+const app = createApp(TinymcePage);
+
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+
+const rawLang = (localStorage.getItem("lang") || "zh-cn").toLowerCase();
+const langMap = {
+    "zh-cn": { element: "zh-cn", tinymce: "zh_CN" },
+    "zh-hans": { element: "zh-cn", tinymce: "zh_CN" },
+    "zh-tw": { element: "zh-tw", tinymce: "zh_TW" },
+    "zh-hant": { element: "zh-tw", tinymce: "zh_TW" },
+    en: { element: "en", tinymce: "en" },
+    "en-us": { element: "en", tinymce: "en" },
+    vi: { element: "vi", tinymce: "vi_VN" },
+    "vi-vn": { element: "vi", tinymce: "vi_VN" },
+};
+const currentLang = langMap[rawLang] || langMap["zh-cn"];
+window.__EDITOR_LANG__ = currentLang;
+
+const epLocaleLoaders = {
+    "zh-cn": () => import("element-plus/es/locale/lang/zh-cn"),
+    "zh-tw": () => import("element-plus/es/locale/lang/zh-tw"),
+    en: () => import("element-plus/es/locale/lang/en"),
+    vi: () => import("element-plus/es/locale/lang/vi"),
+};
+const loadElementLocale = epLocaleLoaders[currentLang.element] || epLocaleLoaders["zh-cn"];
+
+import '@jx3box/jx3box-common/css/font.css';
+import '@jx3box/jx3box-common/css/normalize.css';
+
+import * as ElementPlusIconsVue from "@element-plus/icons-vue";
+for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    app.component(key, component);
+}
+
+loadElementLocale()
+    .then((module) => {
+        app.use(ElementPlus, { locale: module.default });
+    })
+    .catch(() => {
+        app.use(ElementPlus);
+    })
+    .finally(() => {
+        app.mount("#app");
+    });

package/src/pages/upload.js

@@ -0,0 +1,14 @@
+import { createApp } from "vue";
+
+import UploadPage from "../views/upload.vue";
+const app = createApp(UploadPage);
+
+import ElementPlus from "element-plus";
+import "element-plus/dist/index.css";
+import "@jx3box/jx3box-common/css/element-plus-theme.scss";
+app.use(ElementPlus);
+
+import '@jx3box/jx3box-common/css/font.css';
+import '@jx3box/jx3box-common/css/normalize.css';
+
+app.mount("#app");

package/{service → src/service}/author.js

@@ -1,4 +1,4 @@
-import { $next, $cms, $team } from "@jx3box/jx3box-common/js/https";
+import { $next, $cms, $team } from "@jx3box/jx3box-common/js/api";
 
 async function getUserMedals(uid) {
     const res = await $next({ mute: true })
@@ -31,4 +31,4 @@ export {
     getUserInfo,
     getUserPublicTeams,
     getEmotion
-}
+}

package/{service → src/service}/cms.js

@@ -1,6 +1,8 @@
-import { $cms } from "@jx3box/jx3box-common/js/https";
+import { $cms } from "@jx3box/jx3box-common/js/api";
 import axios from "axios";
-import { __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+
+const { __cdn } = JX3BOX;
 
 function uploadFile(data) {
     return $cms().post(`/api/cms/upload`, data);
@@ -37,4 +39,4 @@ function getLetterPaper(params) {
         params,
     });
 }
-export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationJson, getLetterPaper };
+export { uploadFile, loadAuthors, loadEmotions, getDecoration, getDecorationJson, getLetterPaper };

package/{service → src/service}/database.js

@@ -1,6 +1,8 @@
 import axios from "axios";
-import { __node, __helperUrl, __iconPath } from "@jx3box/jx3box-common/data/jx3box.json";
-import { $node } from "@jx3box/jx3box-common/js/https";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import { $node } from "@jx3box/jx3box-common/js/api";
+
+const { __node } = JX3BOX;
 
 function loadResource(type, query, params) {
     switch (type) {

package/{service → src/service}/item.js

@@ -1,4 +1,4 @@
-import { $node, $cms } from "@jx3box/jx3box-common/js/https";
+import { $node, $cms } from "@jx3box/jx3box-common/js/api";
 
 // 获取物品
 function get_item(item_id, client = 'std') {

package/{service → src/service}/node.js

@@ -1,4 +1,4 @@
-import { $node, axios } from "@jx3box/jx3box-common/js/https";
+import { $node, axios } from "@jx3box/jx3box-common/js/api";
 
 function getSkill(query, params) {
     let condition = isNaN(query) ? "name" : "id";

package/{service → src/service}/resource.js

@@ -5,7 +5,7 @@
  * @LastEditTime: 2022-08-20 23:54:41
  * @Description:
  */
-import { $node } from "@jx3box/jx3box-common/js/https";
+import { $node } from "@jx3box/jx3box-common/js/api";
 const $ = $node();
 
 /* import axios from 'axios'

package/src/views/article.vue

@@ -0,0 +1,72 @@
+<template>
+    <h1 class="title">文章渲染</h1>
+    <div class="tab">
+        <el-segmented v-model="group" :options="groupOptions" />
+    </div>
+    <div class="container">
+        <Article class="article" :content="content"></Article>
+        <div id="directory"></div>
+    </div>
+</template>
+
+<script>
+import Article from "../Article.vue";
+export default {
+    name: "ArticleDemo",
+    props: [],
+    components: {
+        Article,
+    },
+    data: function () {
+        return {
+            content: "",
+            group: "basic",
+            groupOptions: [
+                { label: "基础内容", value: "basic" },
+                { label: "剑三内容", value: "jx3" },
+                { label: "魔盒内容", value: "jx3box" },
+                { label: "Markdown", value: "markdown" },
+            ],
+        };
+    },
+    watch: {
+        group: {
+            immediate: true,
+            handler(val) {
+                const url = `/demo/article_${val}.html`;
+                fetch(url)
+                    .then((res) => res.text())
+                    .then((data) => {
+                        this.content = data;
+                    });
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.title {
+    .x;
+}
+.tab {
+    .flex(x);
+    margin-bottom: 1rem;
+}
+.container{
+    #directory{
+        .w(200px);
+        position: fixed;
+        right:20px;
+        top:20px;
+    }
+    .article{
+        margin-right: 320px;
+    }
+
+}
+body{
+    min-height:2000px;
+    padding:0 20px;
+}
+</style>

package/src/views/index.vue

@@ -0,0 +1,11 @@
+<template>
+    <div>
+        <h2>通用组件</h2>
+        <ul>
+            <li><a href="/article">Article - 文章渲染</a></li>
+            <li><a href="/tinymce">Tinymce - 编辑器</a></li>
+            <li><a href="/markdown">Markdown - 编辑器</a></li>
+            <li><a href="/upload">Upload - 上传组件</a></li>
+        </ul>
+    </div>
+</template>

package/src/views/markdown.vue

@@ -0,0 +1,58 @@
+<template>
+    <div class="m-markdown-demo">
+        <h1 class="m-markdown-demo__title">Markdown 编辑器</h1>
+        <p class="m-markdown-demo__desc">基于 Vditor 的演示页，默认加载 `public/demo/article_markdown.html`。</p>
+
+        <Markdown v-model="content" />
+    </div>
+</template>
+
+<script>
+import Markdown from "../Markdown.vue";
+
+export default {
+    name: "MarkdownDemo",
+    components: {
+        Markdown,
+    },
+    data() {
+        return {
+            content: "",
+        };
+    },
+    created() {
+        this.loadDemoContent();
+    },
+    methods: {
+        loadDemoContent() {
+            fetch("/demo/article_markdown.html")
+                .then((res) => res.text())
+                .then((data) => {
+                    this.content = data;
+                })
+                .catch(() => {
+                    this.content = "";
+                });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.m-markdown-demo {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 24px;
+
+    &__title {
+        margin: 0 0 8px;
+        text-align: center;
+    }
+
+    &__desc {
+        margin: 0 0 16px;
+        text-align: center;
+        color: #57606a;
+    }
+}
+</style>

package/src/views/tinymce.vue

@@ -0,0 +1,58 @@
+<template>
+    <h1 class="title">Tinymce编辑器</h1>
+    <div class="tab">
+        <el-segmented v-model="group" :options="groupOptions" />
+    </div>
+
+    <div>
+        <Tinymce
+            v-model="content"
+            :attachmentEnable="true"
+            :resourceEnable="true"
+        />
+    </div>
+</template>
+
+<script>
+import Tinymce from "../Tinymce.vue";
+export default {
+    name: "TinymceDemo",
+    data: function () {
+        return {
+            content: "",
+            group: "basic",
+            groupOptions: [
+                { label: "基础内容", value: "basic" },
+                { label: "剑三内容", value: "jx3" },
+                { label: "魔盒内容", value: "jx3box" },
+            ],
+        };
+    },
+    components: {
+        Tinymce,
+    },
+    watch: {
+        group: {
+            immediate: true,
+            handler(val) {
+                const url = `/demo/article_${val}.html`;
+                fetch(url)
+                    .then((res) => res.text())
+                    .then((data) => {
+                        this.content = data;
+                    });
+            },
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.title {
+    .x;
+}
+.tab {
+    .flex(x);
+    margin-bottom: 1rem;
+}
+</style>

package/src/views/upload.vue

@@ -0,0 +1,111 @@
+<template>
+    <div class="c-upload-demo">
+        <h1 class="title">Upload 组件演示</h1>
+
+        <el-tabs v-model="activeTab">
+            <el-tab-pane label="Upload 附件上传" name="upload">
+                <Upload @insert="onInsert" @update="onUploadListChange" />
+
+                <el-alert class="u-alert" type="info" :closable="false" show-icon title="插入结果（HTML）" />
+                <pre class="u-block">{{ insertedHtml || "暂无插入内容" }}</pre>
+
+                <el-alert class="u-alert" type="info" :closable="false" show-icon title="当前文件列表" />
+                <ul class="u-list" v-if="uploadFileList.length">
+                    <li v-for="file in uploadFileList" :key="file.uid || file.url">
+                        <span>{{ file.name }}</span>
+                        <a :href="file.url" target="_blank" rel="noopener noreferrer">{{ file.url }}</a>
+                    </li>
+                </ul>
+                <div v-else class="u-empty">暂无文件</div>
+            </el-tab-pane>
+
+            <el-tab-pane label="UploadAlbum 图片相册" name="album">
+                <UploadAlbum v-model="albumList" />
+                <ol class="u-list" v-if="albumList.length">
+                    <li v-for="item in albumList" :key="item.id || item.url">
+                        <span>{{ item.name || "未命名" }}</span>
+                        <a :href="item.url" target="_blank" rel="noopener noreferrer">{{ item.url }}</a>
+                    </li>
+                </ol>
+                <div v-else class="u-empty">暂无相册图片</div>
+            </el-tab-pane>
+        </el-tabs>
+    </div>
+</template>
+
+<script>
+import Upload from "../Upload.vue";
+import UploadAlbum from "../UploadAlbum.vue";
+
+export default {
+    name: "UploadDemo",
+    components: {
+        Upload,
+        UploadAlbum,
+    },
+    data() {
+        return {
+            activeTab: "upload",
+            insertedHtml: "",
+            uploadFileList: [],
+            albumList: [],
+        };
+    },
+    methods: {
+        onInsert(payload) {
+            this.insertedHtml = payload?.html || "";
+        },
+        onUploadListChange(list) {
+            this.uploadFileList = Array.isArray(list) ? list : [];
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-upload-demo {
+    max-width: 960px;
+    margin: 0 auto;
+
+    .title {
+        .x;
+        margin-bottom: 20px;
+    }
+
+    .u-alert {
+        margin: 20px 0 10px;
+    }
+
+    .u-block {
+        margin: 0;
+        padding: 12px;
+        border: 1px solid #e4e7ed;
+        border-radius: 4px;
+        background: #fafafa;
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+
+    .u-list {
+        margin: 0;
+        padding-left: 18px;
+        line-height: 1.8;
+
+        li {
+            span {
+                margin-right: 8px;
+                color: #303133;
+            }
+
+            a {
+                color: #409eff;
+                word-break: break-all;
+            }
+        }
+    }
+
+    .u-empty {
+        color: #909399;
+    }
+}
+</style>

package/.env

@@ -1,2 +0,0 @@
-STATIC_PATH=origin
-VUE_APP_DEV_COMPONENT=true

package/.vscode/settings.json

@@ -1,5 +0,0 @@
-{
-    "cSpell.words": [
-        "wujie"
-    ]
-}

package/assets/css/katex-fix.css

@@ -1,20 +0,0 @@
-/* KaTeX 字体修复 */
-.katex {
-    font-family: KaTeX_Main, "Times New Roman", serif !important;
-}
-
-.katex .mord,
-.katex .mop {
-    font-family: KaTeX_Main, "Times New Roman", serif !important;
-}
-
-/* 强制求和符号使用正确字体 */
-.katex .mop.op-symbol.large-op {
-    font-family: KaTeX_Size2, KaTeX_Size1, KaTeX_Main, "Times New Roman", serif !important;
-}
-
-/* 确保数学符号显示 */
-.katex .mop:before,
-.katex .mop:after {
-    font-family: KaTeX_Main, "Times New Roman", serif !important;
-}

package/assets/css/tinymce/_.less

@@ -1,30 +0,0 @@
-.c-article-tinymce{
-    font-size: 1em;
-    line-height: 1.8;
-    color: #3d454d;
-    max-width: 100%;
-    -webkit-font-smoothing: antialiased !important;
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,"Microsoft YaHei", Trebuchet MS, Calibri,
-        BlinkMacSystemFont, Segoe UI, Helvetica Neue, Helvetica, sans-serif;
-    text-rendering: optimizelegibility;
-
-    *{
-        max-width: 100%;
-        box-sizing: border-box;
-    }
-
-    scroll-behavior: smooth;
-}
-.c-article-editor{
-    margin:8px;
-}
-.c-article-origin{
-    display: none;
-}
-@media print{
-    .c-article-tinymce{
-        -webkit-print-color-adjust: exact;
-    }
-}

package/assets/css/tinymce/a.less

@@ -1,30 +0,0 @@
-/* 链接 */
-.c-article-tinymce{
-    a {
-        color: #0366d6;
-        text-decoration: none;
-        word-break: break-all;
-        &:hover {
-            box-shadow: 0 1px 0 #0366d6;
-        }
-    }
-
-    .e-jx3-author{
-        // padding: 2px 5px;
-        // border-radius: 3px;
-        // border: 1px solid #8250df;
-        color:#8250df;
-
-        &:hover{
-            box-shadow: 0 1px 0 #8250df;
-            // background-color: #fafbfc;
-        }
-    }
-}
-// @media print {
-//     .c-article {
-//         a::after {
-//             content: "(" attr(href) ")"; /* 所有链接后显示链接地址 */
-//         }
-//     }
-// }

package/assets/css/tinymce/combo.less

@@ -1,111 +0,0 @@
-.c-article-tinymce:not(.c-article-editor) {
-    .w-skill-combo {
-        .flex;
-        gap: 20px;
-        flex-wrap: wrap;
-        list-style: none;
-        padding:0;
-        margin:0;
-    }
-    .w-skill-combo-item {
-        list-style: none;
-        .pr;
-        .flex;
-        flex-direction: column;
-        align-items: center;
-        &:not(:last-of-type)::after {
-            content: "▲";
-            .pa;
-            right: -20px;
-            top: 5px;
-            transform: rotate(90deg);
-        }
-
-        img {
-            border: none;
-            padding: 0;
-            margin: 0;
-        }
-        .u-skill-icon {
-            .size(48px);
-            .x;
-            .flex;
-            align-items: center;
-            justify-content: center;
-        }
-
-        .u-skill-icon_small {
-            .size(42px);
-        }
-
-        .u-gcd-icon {
-            .pa;
-            // 左上角
-            left: -4px;
-            top: -4px;
-            background-color: #0366d6;
-            .size(12px);
-            .r(50%);
-            .db;
-            .none;
-
-            &.is-show {
-                display: inline-block;
-            }
-
-            i {
-                color: #fff;
-                .fz(12px, 1);
-                .db;
-            }
-        }
-        .u-skill-name {
-            .fz(13px,1.5);
-            width: 56px;
-            overflow: hidden;
-            text-overflow: clip;
-            white-space: pre-wrap;
-            text-align: center;
-        }
-
-        .u-skill-name_underline {
-            text-decoration: underline;
-            text-underline-offset: 3px;
-        }
-
-        .u-skill-note {
-            .fz(12px,1);
-            width: 56px;
-            text-overflow: clip;
-            white-space: pre-wrap;
-            text-align: center;
-            margin-bottom: 5px;
-        }
-    }
-}
-.c-article-editor {
-    .e-skill-combo {
-        font-size: 14px;
-        width: 100%;
-        box-sizing: border-box;
-        background-color: #f1f8ff;
-        border: 1px solid #c8e1ff;
-        color: #62a9ff;
-        padding: 10px 10px 10px 30px;
-        font-family: Monaco, Consolas, "Lucida Console", "Courier New", serif;
-        position: relative;
-        *zoom: 1;
-        border-radius: 3px;
-    }
-    .e-skill-combo:after {
-        content: "JX3BOX·连招套路";
-        position: absolute;
-        right: 8px;
-        top: 8px;
-        background-color: #62a9ff;
-        color: #fff;
-        border-radius: 3px;
-        padding: 2px 8px;
-        line-height: 21px;
-    }
-}