@jx3box/jx3box-ui 0.0.1

package/src/editor/Tinymce.vue

@@ -0,0 +1,204 @@
+<template>
+    <div class="c-editor-tinymce">
+        <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" />
+        </div>
+        <Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
+
+        <slot></slot>
+
+        <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 href="" target="_blank">[编辑器使用指南]</a> -->
+        </el-alert>
+
+        <slot name="append"></slot>
+    </div>
+</template>
+
+<script>
+import Editor from "@tinymce/tinymce-vue";
+import Upload from "./Upload.vue";
+import Resource from "./Resource.vue";
+import BoxResource from "./BoxResource.vue";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import Emotion from "@jx3box/jx3box-emotion/src/Emotion2.vue";
+import hljs_languages from "../../assets/js/item/hljs_languages.js";
+const { __cms, __imgPath } = JX3BOX;
+const proxyEnabled = ["1", "true", "yes", "on"].includes(String(process.env.VUE_APP_PROXY_ENABLE || "").toLowerCase());
+const proxyPrefix = process.env.VUE_APP_PROXY_PREFIX || "/__proxy";
+const API_Root = process.env.NODE_ENV === "production" ? __cms : proxyEnabled ? `${proxyPrefix}/cms/` : "/";
+const API = API_Root.replace(/\/+$/, "/") + "api/cms/upload/tinymce";
+
+export default {
+    name: "TinyMce",
+    props: ["modelValue", "height", "attachmentEnable", "resourceEnable"],
+    emits: ["update:modelValue"],
+    data: function () {
+        return {
+            data: "",
+            init: {
+                // 选择器
+                selector: "#tinymce",
+
+                // 语言
+                language: "zh_CN",
+
+                // 设置
+                convert_urls: false,
+
+                // 样式
+                // TODO:
+                content_css: `https://oss.jx3box.com/static/tinymce/skins/content/default/content.min.css`,
+                // content_css: `http://localhost:5000/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,
+
+                // UI
+                icons: "custom",
+                menubar: false,
+                branding: false,
+                contextmenu: "",
+                plugins: [
+                    "link autolink",
+                    "hr lists advlist table codeinline codesample checklist foldtext latex",
+                    "image emoticons media",
+                    "code fullscreen wordcount powerpaste pagebreak printpage", // template anchor jx3icon autosave
+                ],
+                toolbar: [
+                    "undo | formatselect | fontsizeselect | forecolor backcolor | bold italic underline strikethrough superscript subscript | link unlink | fullscreen code", //restoredraft
+                    "removeformat | hr alignleft aligncenter alignright alignjustify indent outdent | bullist numlist checklist table blockquote foldtext codeinline codesample latex | emoticons image media | pagebreak printpage", // template anchor jx3icon
+                ],
+                mobile: {
+                    toolbar_drawer: true,
+                    toolbar: [
+                        "undo emoticons bold forecolor backcolor removeformat pagebreak fullscreen",
+                        "hr alignleft aligncenter alignright alignjustify indent outdent bullist numlist checklist table blockquote codesample latex media",
+                    ],
+                },
+                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",
+                    "黑色",
+                ],
+
+                codesample_languages: hljs_languages,
+
+                // Image
+                image_advtab: true,
+                file_picker_types: "file image",
+                images_upload_url: API,
+                automatic_uploads: true,
+                images_upload_credentials: true,
+                valid_children: "+body[style]",
+            },
+            mode: "tinymce",
+        };
+    },
+    watch: {
+        data: function (val) {
+            this.$emit("update:modelValue", val);
+        },
+        modelValue: {
+            immediate: true,
+            handler: function (val) {
+                this.data = val;
+            },
+        },
+    },
+    methods: {
+        setup: function (editor) {
+            console.log("ID为: " + editor.id + " 的编辑器即将初始化.");
+        },
+        ready: function (editor) {
+            console.log("ID为: " + editor.id + " 的编辑器已初始化完成.");
+        },
+        insertAttachments: function (data) {
+            tinyMCE.editors["tinymce"].insertContent(data.html);
+        },
+        insertResource: function (data) {
+            tinyMCE.editors["tinymce"].insertContent(data);
+        },
+        emotionSelected: function (emotion) {
+            let src = emotion.filename;
+            if (!emotion.filename.startsWith("http")) {
+                src = `${__imgPath}emotion/output/${emotion.filename}`;
+            }
+            const IMAGE = `<img class="t-emotion" src="${src}" alt="${src}" style="max-width:60px; max-height: 60px"/>`;
+            tinyMCE.editors["tinymce"].insertContent(IMAGE);
+        },
+    },
+    mounted: function () {},
+    components: {
+        Editor,
+        Upload,
+        Emotion,
+        Resource,
+        BoxResource,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/tinymce/_.less";
+</style>

package/src/editor/Upload.vue

@@ -0,0 +1,277 @@
+<template>
+    <div class="c-upload">
+        <!-- 上传触发按钮 -->
+        <el-button type="primary" @click="dialogVisible = true" :disabled="!enable">
+            <el-icon class="u-icon"><UploadFilled /></el-icon>
+            {{ btn_txt }}
+        </el-button>
+
+        <!-- 弹出界面 -->
+        <el-dialog class="c-large-dialog" title="上传" v-model="dialogVisible" @close="closeUpload">
+            <!-- 清空按钮 -->
+            <el-button class="u-upload-clear" plain size="small" @click="clear"
+                ><el-icon><Delete /></el-icon>清空</el-button
+            >
+
+            <!-- 限制提示 -->
+            <el-alert class="u-upload-tip" :title="tip" type="info" show-icon :closable="false"></el-alert>
+
+            <!-- 文件区 -->
+            <el-upload
+                :action="API"
+                list-type="picture-card"
+                :auto-upload="false"
+                :limit="10"
+                multiple
+                with-credentials
+                :file-list="fileList"
+                :on-change="change"
+                ref="uploadBox"
+                :accept="accept"
+                :key="timeStamp + fileList.length"
+            >
+                <template #default>
+                    <el-icon><Plus /></el-icon>
+                </template>
+
+                <!-- 文件项 -->
+                <template #file="{ file }">
+                    <div
+                        class="u-file-wrapper"
+                        @click="select(file)"
+                        :class="{
+                            isSelected: file.selected,
+                            disabled: file.status != 'success',
+                        }"
+                    >
+                        <span style="display: none">{{ fileList }}</span>
+                        <!-- 图片类型 -->
+                        <img v-if="file.is_img" class="el-upload-list__item-thumbnail u-imgbox" :src="file.url" alt />
+                        <!-- 其他类型 -->
+                        <div v-else class="u-filebox">
+                            <img class="u-fileplaceholder" svg-inline src="../../assets/img/editor/file.svg" />
+                            <span class="u-filename">{{ file.name }}</span>
+                        </div>
+                        <!-- 勾选角标 -->
+                        <label v-show="file.selected" class="u-file-select-label">
+                            <el-icon class="el-icon-upload-success el-icon-check" color="#fff"><Check /></el-icon>
+                        </label>
+                    </div>
+                </template>
+            </el-upload>
+
+            <!-- 插入按钮 -->
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="closeUpload">取 消</el-button>
+                    <el-button type="primary" @click="insert">
+                        {{ buttonTXT }}
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+import { cloneDeep } from "lodash";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+const { __cms } = JX3BOX;
+const API_Root = process.env.NODE_ENV === "production" ? __cms : "/";
+const API = API_Root + "api/cms/upload";
+const imgtypes = ["jpg", "png", "gif", "bmp", "webp", "jpeg", "JPG", "PNG", "GIF", "BMP", "WEBP", "JPEG"];
+
+export default {
+    name: "EditorUpload",
+    props: {
+        text: {
+            type: String,
+        },
+        onlyImage: {
+            type: Boolean,
+        },
+        desc: {
+            type: String,
+        },
+        accept: {
+            type: String,
+        },
+        enable: {
+            type: Boolean,
+            default: true,
+        },
+        max: {
+            type: Number,
+            default: 10,
+        },
+        // 文件大小限制
+        sizeLimit: {
+            type: Number,
+            default: 30,
+        },
+    },
+    data: function () {
+        return {
+            API: API,
+            dialogVisible: false,
+            tip:
+                this.desc ||
+                `一次最多同时上传${this.max}个文件（单个文件不超过${this.sizeLimit}M），格式限常见的图片、文档、数据表及压缩包`,
+            btn_txt: this.text || "上传附件",
+
+            fileList: [],
+            selectedCount: 0,
+            insertList: "",
+            timeStamp: null,
+
+            // accept: allow_types.accept,
+            // sizeLimit: allow_types.sizeLimit,
+        };
+    },
+    watch: {
+        fileList: {
+            deep: true,
+            handler: function (newVal) {
+                this.timeStamp = new Date().getTime() + Math.random();
+                this.$emit("update", newVal);
+            },
+        },
+        insertList: function (newVal) {
+            this.$emit("htmlUpdate", newVal);
+        },
+    },
+    computed: {
+        buttonTXT: function () {
+            return this.selectedCount ? "插 入" : "确 定";
+        },
+    },
+    methods: {
+        change: function (file) {
+            if (file.status != "success") {
+                // 判断大小
+                // if (file.size > this.sizeLimit) {
+                //     this.$message.error("文件超出大小限制");
+                //     this.removeFile(fileList, file.uid);
+                //     return;
+                // }
+
+                // 分析文件类型
+                let ext = file.name.split(".").pop();
+                let is_img = imgtypes.includes(ext);
+
+                if (this.onlyImage && !is_img) return;
+
+                // 构建数据
+                let fdata = new FormData();
+                fdata.append("file", file.raw);
+
+                // 异步上传
+                axios
+                    .post(API, fdata, {
+                        headers: {
+                            "Content-Type": "multipart/form-data",
+                        },
+                        withCredentials: true,
+                        auth: {
+                            username: (localStorage && localStorage.getItem("token")) || "",
+                            password: "cms common request",
+                        },
+                    })
+                    .then((res) => {
+                        if (res.data.code) {
+                            this.$message({
+                                message: res.data.msg,
+                                type: "error",
+                            });
+                            return;
+                        }
+                        // 提醒
+                        this.$message({
+                            message: "上传成功",
+                            type: "success",
+                        });
+
+                        // 修改path
+                        file.url = res.data.data && res.data.data[0];
+
+                        // 额外赋值
+                        file.is_img = is_img;
+                        file.selected = true;
+
+                        // 修改状态加入仓库
+                        file.status = "success";
+                        this.fileList.push(file);
+                        this.selectedCount++;
+                    })
+                    .catch((err) => {
+                        if (err.response.data.code) {
+                            this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
+                        } else {
+                            this.$message.error("请求异常");
+                        }
+                    });
+            }
+        },
+        select: function (file) {
+            this.fileList = this.fileList.map((item) => {
+                if (item.uid == file.uid) {
+                    item.selected = !item.selected;
+                }
+                return item;
+            });
+            if (file.status == "success") {
+                file.selected ? this.selectedCount++ : this.selectedCount--;
+            }
+        },
+        buildHTML: function () {
+            const list = cloneDeep(this.fileList)
+                .filter((item) => item.selected && item.status == "success")
+                .map((file) => {
+                    const html = file.is_img
+                        ? ` <img src="${file.url}" />`
+                        : `<a target="_blank" href="${file.url}">${file.name}</a>`;
+                    return html;
+                });
+            this.insertList = list.join(" \n");
+            return this.insertList;
+        },
+        insert: function () {
+            // 关闭窗口
+            this.closeUpload();
+
+            //为空不执行插入
+            if (!this.selectedCount) return;
+
+            // 传递值
+            this.$emit("insert", {
+                list: this.fileList.filter((item) => item.selected && item.status == "success"),
+                html: this.buildHTML(),
+            });
+
+            //移除所有上传图片
+            this.clear();
+        },
+
+        clear: function () {
+            this.$refs.uploadBox.clearFiles();
+            this.fileList = [];
+            this.selectedCount = 0;
+        },
+        closeUpload() {
+            this.dialogVisible = false;
+        },
+        removeFile: function (fileList, uid) {
+            fileList.forEach((file, i) => {
+                if (file.uid == uid) {
+                    fileList.splice(i, 1);
+                }
+            });
+        },
+    },
+};
+</script>
+
+<style lang="less">
+@import "../../assets/css/editor/upload.less";
+</style>

package/src/editor/UploadAlum.vue

@@ -0,0 +1,176 @@
+<template>
+    <div class="c-upload-album">
+        <Upload @insert="updateFileList" text="批量上传图片" />
+        <div class="c-upload-album-list">
+            <draggable class="m-album" v-model="imgList" item-key="id" v-if="imgList && imgList.length">
+                <template #item="{ element }">
+                    <div class="u-album-item">
+                        <img class="u-pic" :src="element.url ? element.url : element" />
+                        <i class="u-mask"></i>
+                        <el-icon class="u-op u-preview" @click="previewHandle(element)"><ZoomIn /></el-icon>
+                        <el-icon class="u-op u-delete" @click="deleteHandle(element)"><Delete /></el-icon>
+                    </div>
+                </template>
+            </draggable>
+            <div class="u-null" v-else><i class="el-icon-warning-outline"></i> 当前没有任何图片</div>
+        </div>
+        <el-dialog class="c-upload-album-preview" v-model="dialogVisible">
+            <img class="u-img" :src="dialogImageUrl" alt />
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import draggable from "vuedraggable";
+import JX3BOX from "@jx3box/jx3box-common/data/jx3box.json";
+import Upload from "./Upload.vue";
+const { getThumbnail } = JX3BOX;
+
+export default {
+    name: "UploadAlum",
+    props: ["data"],
+    data: function () {
+        return {
+            imgList: this.data || [],
+            dialogImageUrl: "",
+            dialogVisible: false,
+        };
+    },
+    model: {
+        prop: "data", //向上同步数据
+        event: "update",
+    },
+    components: {
+        Upload,
+        draggable,
+    },
+    watch: {
+        data: {
+            immediate: true,
+            deep: true,
+            handler: function (newVal) {
+                this.imgList = newVal || [];
+            },
+        },
+        imgList: {
+            deep: true,
+            handler: function (list) {
+                this.$emit("update", list);
+            },
+        },
+    },
+    computed: {},
+    methods: {
+        updateFileList: function (data) {
+            let upload_list = data.list;
+            let img_list = [];
+            upload_list.forEach((item) => {
+                if (item.is_img) {
+                    img_list.push({
+                        name: item.name,
+                        url: item.url,
+                    });
+                }
+            });
+            this.imgList = [...this.imgList, ...img_list];
+        },
+        previewHandle: function (item) {
+            this.dialogImageUrl = item;
+            this.dialogVisible = true;
+        },
+        deleteHandle: function (row) {
+            this.imgList=   this.imgList.filter(item=>item !== row);
+        },
+        showThumbnail(val) {
+            return getThumbnail(val, 146);
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-upload-album {
+    .flex;
+    .w(100%);
+    flex-direction: column;
+    gap: 20px;
+    .c-upload-album-list {
+        .flex;
+        .w(100%);
+        .r(8px);
+        gap: 20px;
+        box-sizing: border-box;
+        flex-wrap: wrap;
+        padding: 20px;
+        border: 2px dashed #eee;
+        @h: 148px;
+        min-height: @h;
+        .u-null {
+            .x;
+            .auto(x);
+            .fz(12px,@h);
+            color: #999;
+        }
+        .m-album {
+            .flex;
+            gap: 10px;
+            .u-album-item {
+                .pr;
+                .size(@h);
+                img {
+                    .db;
+                    .size(100%);
+                }
+                overflow: hidden;
+                background-color: #fff;
+                border: 1px solid #c0ccda;
+                border-radius: 6px;
+                box-sizing: border-box;
+                display: inline-block;
+                &:hover {
+                    .u-mask,
+                    .u-op {
+                        .db;
+                    }
+                }
+            }
+
+            .u-mask,
+            .u-op {
+                .pa;
+                .none;
+            }
+            .u-op {
+                .pointer;
+            }
+            .u-mask {
+                background-color: rgba(0, 0, 0, 0.5);
+                transition: opacity 0.3s;
+                .lt(0);
+                .size(100%);
+                .none;
+                cursor: move;
+            }
+            .u-delete,
+            .u-preview {
+                .fz(20px);
+                color: #fff;
+                .lt(50%);
+                .size(20px);
+                transform: translate(-50%, -50%);
+            }
+            .u-delete {
+                .ml(20px);
+            }
+            .u-preview {
+                .ml(-20px);
+            }
+        }
+    }
+}
+.c-upload-album-preview {
+    .u-img {
+        min-width: 800px;
+    }
+}
+</style>