@jx3box/jx3box-ui 2.0.4 → 2.0.6

package/src/editor/Tinymce.vue

@@ -1,204 +0,0 @@
-<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

@@ -1,277 +0,0 @@
-<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

@@ -1,176 +0,0 @@
-<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>