@jx3box/jx3box-editor 2.2.47 → 3.0.0

package/src/Markdown.vue

@@ -1,58 +1,51 @@
 <template>
     <div class="c-editor-markdown">
-
         <slot name="prepend"></slot>
 
-        <div class="c-editor-header">
-            <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="true" />
-            <Resource style="margin-right: 5px;" v-if="resourceEnable" @insert="insertResource" :enable="true" />
-            <BoxResource v-if="resourceEnable" @insert="insertResource" :enable="true" />
+        <div class="c-editor-markdown__toolbar">
+            <div class="c-editor-markdown__toolbar-left">
+                <span class="c-editor-markdown__toolbar-label">编辑模式</span>
+                <el-radio-group v-model="editorMode" size="small">
+                    <el-radio-button v-for="item in modeOptions" :key="item.value" :value="item.value">
+                        {{ item.label }}
+                    </el-radio-button>
+                </el-radio-group>
+            </div>
+            <div class="c-editor-markdown__toolbar-tip">GitHub 样式预览，支持 Ctrl+V 粘贴图片上传</div>
         </div>
 
         <slot></slot>
 
-        <markdown-editor class="c-markdown c-article" ref="md" v-model="data" @change="updateData" :subfield="false" :xssOptions="xssOptions">
-            <template slot="left-toolbar-after">
-                <markdown-katex @insert="insertKatex" />
-                <span class="c-markdown-toolbar-image c-markdown-toolbar-item" title="上传图片" @click="selectImages"><i class="el-icon-picture-outline-round"></i></span>
-                <span class="c-markdown-toolbar-file c-markdown-toolbar-item" title="上传附件" @click="selectFiles"><i class="el-icon-paperclip"></i></span>
-                <markdown-video @insert="insertVideo" />
-                <markdown-macro @insert="insertMacro" />
-                <markdown-pz @insert="insertPz" />
-                <markdown-talent @insert="insertTalent" />
-                <markdown-talent2 @insert="insertTalent2" />
-            </template>
-        </markdown-editor>
-        <input class="c-markdown-store-item" id="c-markdown-store-images" type="file" @change="uploadImages" ref="markdownImages" multiple :accept="allow_image_types" />
-        <input class="c-markdown-store-item" id="c-markdown-store-files" type="file" @change="uploadFiles" ref="markdownFiles" multiple />
+        <div ref="editorHost" class="c-editor-markdown__host"></div>
 
         <slot name="append"></slot>
     </div>
 </template>
 
 <script>
-import markdownEditor from '@jx3box/markdown/src/editor.vue'
-
-import {xssOptions} from '../assets/data/markdown_whitelist.json'
-import { uploadFile } from "../service/cms";
-
-import Upload from "./Upload";
-import Resource from "./Resource";
-import BoxResource from "./BoxResource";
+import axios from "axios";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import Vditor from "vditor";
+import "vditor/dist/index.css";
+import "github-markdown-css/github-markdown.css";
 
-// jx3
-import markdownMacro from './components/markdown/macro.vue'
-import markdownPz from './components/markdown/pz.vue'
-import markdownKatex from './components/markdown/katex.vue'
-import markdownTalent from './components/markdown/talent.vue'
-import markdownTalent2 from './components/markdown/talent2.vue'
-import markdownVideo from './components/markdown/video.vue'
+const { __cms } = JX3BOX;
+const UPLOAD_API = `${__cms}api/cms/upload`;
+const MODE_OPTIONS = [
+    { label: "所见即所得", value: "wysiwyg" },
+    { label: "即时渲染", value: "ir" },
+    { label: "分屏预览", value: "sv" },
+];
 
 export default {
     name: "Markdown",
     props: {
+        modelValue: {
+            type: String,
+        },
         content: {
             type: String,
+            default: "",
         },
         editable: {
             type: Boolean,
@@ -66,213 +59,372 @@ export default {
             type: Boolean,
             default: true,
         },
+        placeholder: {
+            type: String,
+            default: "支持 Markdown，支持 Ctrl+V 粘贴图片上传",
+        },
+        height: {
+            type: [String, Number],
+            default: 720,
+        },
     },
-    components: {
-        markdownEditor,
-        Upload,
-        Resource,
-        BoxResource,
-
-        markdownMacro,
-        markdownPz,
-        markdownKatex,
-        markdownTalent,
-        markdownTalent2,
-        markdownVideo,
-    },
-    data: function() {
+    emits: ["update:modelValue", "update:content", "update", "updateData"],
+    data() {
         return {
-            data: this.content,
-            allow_image_types: ["image/png", "image/jpeg", "image/gif", "image/bmp", "image/webp"],
-            allow_file_types: [],
-            image_ext: ["png", "jpg", "gif", "bmp", "webp"],
-            files: [],
-            resolved_files: [],
-
-            xssOptions
+            data: this.modelValue ?? this.content ?? "",
+            editor: null,
+            editorReady: false,
+            editorMode: "ir",
+            modeOptions: MODE_OPTIONS,
+            isRebuildingEditor: false,
+            isUploadingImage: false,
         };
     },
-    model: {
-        prop: "content",
-        event: "update",
-    },
     watch: {
-        data: function(newval) {
-            this.$emit("update", newval);
-        },
-        content: function(newval) {
-            this.data = newval;
+        modelValue: {
+            immediate: true,
+            handler(value) {
+                if (value !== undefined && value !== this.data) {
+                    this.data = value ?? "";
+                    this.syncEditorValue(this.data);
+                }
+            },
         },
-        // 监听过滤后的文件列表
-        files_list: function(list) {
-            this.bulkUpload(list);
+        content: {
+            immediate: true,
+            handler(value) {
+                if (this.modelValue === undefined && value !== this.data) {
+                    this.data = value ?? "";
+                    this.syncEditorValue(this.data);
+                }
+            },
         },
-    },
-    computed: {
-        files_list: function() {
-            let files = Array.from(this.files);
-            return files;
+        editable: {
+            immediate: true,
+            handler() {
+                this.applyEditableState();
+            },
         },
-        $md: function() {
-            return this.$refs.md;
+        editorMode(nextMode, prevMode) {
+            if (!this.editorReady || this.isRebuildingEditor || nextMode === prevMode) {
+                return;
+            }
+
+            this.rebuildEditor(nextMode);
         },
     },
+    mounted() {
+        this.initEditor();
+    },
+    beforeUnmount() {
+        this.destroyEditor();
+    },
     methods: {
-        // 点击上传按钮
-        selectImages: function() {
-            document.getElementById("c-markdown-store-images").dispatchEvent(new MouseEvent("click"));
-        },
-        selectFiles: function() {
-            document.getElementById("c-markdown-store-files").dispatchEvent(new MouseEvent("click"));
+        getPreviewMode(mode) {
+            return mode === "sv" ? "both" : "editor";
         },
-        // 监听选择结果变化
-        uploadImages: function(e) {
-            this.files = this.$refs.markdownImages.files;
+        getToolbar() {
+            return [
+                "headings",
+                "bold",
+                "italic",
+                "strike",
+                "link",
+                "|",
+                "list",
+                "ordered-list",
+                "check",
+                "quote",
+                "code",
+                "inline-code",
+                "table",
+                "|",
+                "undo",
+                "redo",
+                "fullscreen",
+            ];
         },
-        uploadFiles: function(e) {
-            this.files = this.$refs.markdownFiles.files;
+        buildEditorOptions(initialValue) {
+            return {
+                cache: {
+                    enable: false,
+                },
+                classes: {
+                    preview: "markdown-body",
+                },
+                counter: {
+                    enable: true,
+                    type: "markdown",
+                },
+                height: this.height,
+                icon: "ant",
+                lang: "zh_CN",
+                mode: this.editorMode,
+                placeholder: this.placeholder,
+                preview: {
+                    delay: 0,
+                    hljs: {
+                        enable: true,
+                        lineNumber: false,
+                        style: "github",
+                    },
+                    markdown: {
+                        sanitize: true,
+                    },
+                    mode: this.getPreviewMode(this.editorMode),
+                },
+                customWysiwygToolbar() {},
+                toolbar: this.getToolbar(),
+                toolbarConfig: {
+                    pin: true,
+                },
+                upload: {
+                    accept: "image/*",
+                    max: 30 * 1024 * 1024,
+                    multiple: false,
+                    withCredentials: true,
+                    handler: async (files) => this.handleImageUpload(files),
+                },
+                value: initialValue,
+                after: () => {
+                    this.editorReady = true;
+                    this.syncEditorValue(this.data);
+                    this.applyEditableState();
+                },
+                input: (value) => {
+                    this.handleEditorInput(value);
+                },
+            };
         },
-        // 批量上传
-        bulkUpload: function(list) {
-            // 存在有效数据队列时
-            if (!list || !list.length) return;
-
-            // 上传队列
-            let queue = [];
-            for (let item of list) {
-                let formdata = new FormData();
-                formdata.append("file", item);
-                queue.push(uploadFile(formdata));
-            }
+        initEditor(initialValue = this.data) {
+            const host = this.$refs.editorHost;
+            if (!host) return;
 
-            // 回调处理
-            Promise.allSettled(queue)
-                .then((results) => {
-                    results.forEach((result, i) => {
-                        if (result.status == "fulfilled") {
-                            let url = result.value.data?.data?.[0];
-                            this.resolved_files.push({
-                                url: url,
-                                filename: list[i]["name"],
-                                type: list[i]["type"],
-                                ext: list[i]["name"].split(".").pop(),
-                            });
-                        }
-                    });
-                    this.insertFiles();
-                })
-                .finally(() => {
-                    // 上传完成后清空input
-                    this.images = [];
-                    this.files = [];
-                    this.resolved_files = [];
-                });
+            this.editorReady = false;
+            this.editor = new Vditor(host, this.buildEditorOptions(initialValue));
         },
-        // 插入正文
-        insertFiles: function() {
-            for (let item of this.resolved_files) {
-                // 插入图片
-                if (this.image_ext.includes(item.ext)) {
-                    this.$md.insertText(this.$md.getTextareaDom(), {
-                        prefix: `![${item.filename}](${item.url})`,
-                        subfix: "",
-                        str: "",
-                    });
-                    // 插入文字链接
-                } else {
-                    this.$md.insertText(this.$md.getTextareaDom(), {
-                        prefix: `[${item.filename}](${item.url})`,
-                        subfix: "",
-                        str: "",
-                    });
-                }
-            }
+        destroyEditor() {
+            if (!this.editor) return;
+
+            this.editor.destroy();
+            this.editor = null;
+            this.editorReady = false;
         },
-        // 更新触发
-        updateData: function(data, render) {
-            this.$emit("updateData", {
-                data,
-                render,
+        rebuildEditor() {
+            const currentValue = this.editor?.getValue?.() ?? this.data ?? "";
+            this.data = currentValue;
+            this.isRebuildingEditor = true;
+            this.destroyEditor();
+            this.$nextTick(() => {
+                this.initEditor(currentValue);
+                this.isRebuildingEditor = false;
             });
-            this.data = data
         },
-        // 插入附件
-        insertAttachments: function(data) {
-            let list = data?.list || []
-            for(let item of list){
-                // 插入图片
-                if (item.is_img) {
-                    this.$md.insertText(this.$md.getTextareaDom(), {
-                        prefix: `![${item.name}](${item.url})`,
-                        subfix: "",
-                        str: "",
-                    });
-                // 插入文字链接
-                } else {
-                    this.$md.insertText(this.$md.getTextareaDom(), {
-                        prefix: `[${item.name}](${item.url})`,
-                        subfix: "",
-                        str: "",
-                    });
-                }
+        syncEditorValue(value) {
+            if (!this.editorReady || !this.editor) return;
+
+            const nextValue = value ?? "";
+            if (this.editor.getValue() === nextValue) return;
+            this.editor.setValue(nextValue);
+        },
+        applyEditableState() {
+            if (!this.editorReady || !this.editor) return;
+
+            if (this.editable) {
+                this.editor.enable();
+            } else {
+                this.editor.disabled();
             }
         },
-        insertResource: function(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
-            });
+        handleEditorInput(value) {
+            this.data = value;
+            this.emitEditorPayload(value);
         },
-        insertMacro(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
-            });
-        },
-        insertPz(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
+        emitEditorPayload(value) {
+            this.$emit("update:modelValue", value);
+            this.$emit("update:content", value);
+            this.$emit("update", value);
+            this.$emit("updateData", {
+                data: value,
+                render: this.editor?.getHTML?.() ?? "",
             });
         },
-        insertKatex(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
-            });
+        validateImageFile(file) {
+            if (!file) return "未检测到可上传的文件";
+            if (!file.type?.startsWith("image/")) return "当前仅支持粘贴图片上传";
+            if (file.size > 30 * 1024 * 1024) return "图片大小不能超过 30MB";
+            return "";
         },
-        insertTalent(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
+        async uploadImage(file) {
+            const formData = new FormData();
+            formData.append("file", file);
+
+            const response = await axios.post(UPLOAD_API, formData, {
+                headers: {
+                    "Content-Type": "multipart/form-data",
+                },
+                withCredentials: true,
+                auth: {
+                    username: (localStorage && localStorage.getItem("token")) || "",
+                    password: "cms common request",
+                },
             });
+
+            const payload = response.data || {};
+            if (payload.code) {
+                throw new Error(payload.msg || payload.message || "上传失败");
+            }
+
+            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) {
+                throw new Error("上传成功但未返回图片地址");
+            }
+
+            return url;
         },
-        insertTalent2(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
-            });
+        async handleImageUpload(files) {
+            if (this.isUploadingImage) return "图片上传中，请稍候";
+
+            const imageFiles = Array.from(files || []).filter(Boolean);
+            if (!imageFiles.length) return "未检测到可上传的图片";
+
+            for (const file of imageFiles) {
+                const message = this.validateImageFile(file);
+                if (message) return message;
+            }
+
+            this.isUploadingImage = true;
+
+            try {
+                const markdownList = [];
+                for (const file of imageFiles) {
+                    const url = await this.uploadImage(file);
+                    const alt = file.name || "image";
+                    markdownList.push(`![${alt}](${url})`);
+                }
+
+                if (markdownList.length) {
+                    this.editor?.insertMD(markdownList.join("\n"));
+                }
+            } catch (error) {
+                return error?.message || "图片上传失败";
+            } finally {
+                this.isUploadingImage = false;
+            }
         },
-        insertVideo(data) {
-            this.$md.insertText(this.$md.getTextareaDom(), {
-                prefix: data,
-                subfix: "",
-                str: "",
-            });
-        }
     },
-    filters: {},
-    created: function() {},
-    mounted: function() {},
 };
 </script>
 
 <style lang="less">
-@import "../assets/css/markdown.less";
+.c-editor-markdown {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+
+    &__toolbar {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    &__toolbar-left {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    &__toolbar-label,
+    &__toolbar-tip {
+        font-size: 13px;
+        color: #57606a;
+        line-height: 1.4;
+    }
+
+    &__host {
+        overflow: visible;
+        border: 1px solid #dcdfe6;
+        border-radius: 4px;
+        background-color: #ffffff;
+    }
+
+    .el-radio-group {
+        box-shadow: none;
+    }
+
+    .vditor {
+        border: 0;
+        background: #ffffff;
+        overflow: visible;
+    }
+
+    .vditor-toolbar {
+        padding: 10px 12px;
+        background: #f6f8fa;
+        border-bottom: 1px solid #d8dee4;
+        overflow: visible;
+    }
+
+    .vditor-reset {
+        min-height: 640px;
+    }
+
+    .vditor-reset.markdown-body {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: none;
+        min-height: 100%;
+        padding: 24px 32px;
+        background: #ffffff;
+    }
+
+    .vditor-sv__editor,
+    .vditor-ir__marker,
+    .vditor-wysiwyg {
+        padding: 24px 32px;
+    }
+
+    .vditor-wysiwyg > .vditor-reset > :first-child,
+    .vditor-ir > .vditor-reset > :first-child {
+        margin-top: 0;
+    }
+
+    .vditor-counter {
+        padding: 8px 12px;
+        border-top: 1px solid #d8dee4;
+        background: #f6f8fa;
+    }
+
+    .vditor-preview__action {
+        display: none;
+    }
+
+    .vditor-tooltipped::before,
+    .vditor-tooltipped::after {
+        z-index: 30;
+    }
+
+    @media (max-width: 768px) {
+        &__toolbar {
+            align-items: flex-start;
+        }
+
+        .vditor-reset.markdown-body,
+        .vditor-sv__editor,
+        .vditor-ir__marker,
+        .vditor-wysiwyg {
+            padding: 16px;
+        }
+    }
+}
 </style>