@2kog/pkg-editor 0.0.1

package/src/assets/js/xss.js

@@ -0,0 +1,72 @@
+import sanitizeHtml from "sanitize-html";
+
+const FORBID = new Set(["script", "object", "embed", "applet", "base", "meta", "link"]);
+
+const EXTRA_TAGS = [
+    "img",
+    "h1", "h2", "h3", "h4", "h5", "h6",
+    "table", "thead", "tbody", "tr", "th", "td",
+    "blockquote", "pre", "code", "hr",
+    "video", "source",
+    "iframe",
+];
+
+export default function sanitizeRichText(html) {
+    if (!html) return html;
+
+    const allowedTags = sanitizeHtml.defaults.allowedTags
+        .concat(EXTRA_TAGS)
+        .filter((t, i, arr) => arr.indexOf(t) === i) // 去重
+        .filter(t => !FORBID.has(t));
+
+    return sanitizeHtml(html, {
+        disallowedTagsMode: "discard",
+        allowedTags,
+
+        allowedAttributes: {
+            "*": ["class", "style", "title", "id", "data-*"],
+            a: ["href", "target", "rel", "title", "class", "style"],
+            img: ["src", "alt", "title", "width", "height", "class", "style", "loading", "decoding"],
+            video: ["controls", "width", "height", "class", "style"],
+            source: ["src", "type"],
+            iframe: ["src","width","height","frameborder","scrolling","allowfullscreen","sandbox","referrerpolicy","class","style"],
+        },
+
+        allowedSchemes: ["http", "https", "mailto", "tel"],
+        allowProtocolRelative: false,
+        allowedSchemesByTag: { img: ["http", "https", "data"],iframe: ["http", "https"], },
+
+        transformTags: {
+            "*": (tagName, attribs) => {
+                const out = { ...attribs };
+
+                // 移除 on*
+                for (const k of Object.keys(out)) if (/^on/i.test(k)) delete out[k];
+
+                // style 禁 @import / url(
+                if (typeof out.style === "string" && out.style) {
+                    let s = out.style;
+                    s = s.replace(/@import\s+[^;]+;?/gi, "");
+                    s = s.replace(/url\s*\(\s*[^)]+\s*\)/gi, "");
+                    s = s.replace(/;;+/g, ";").trim();
+                    if (!s) delete out.style;
+                    else out.style = s;
+                }
+
+                // 兜底禁 javascript:
+                for (const key of ["href", "src"]) {
+                    if (out[key] && /^\s*javascript:/i.test(out[key])) out[key] = "";
+                }
+
+                // 仅允许 data:image/*
+                if (tagName === "img" && typeof out.src === "string" && out.src.startsWith("data:")) {
+                    if (!/^data:image\/(png|jpe?g|gif|webp|avif|bmp|svg\+xml);/i.test(out.src)) {
+                        out.src = "";
+                    }
+                }
+
+                return { tagName, attribs: out };
+            },
+        },
+    });
+}

package/src/components/Article.vue

@@ -0,0 +1,218 @@
+<template>
+    <div class="c-article-tinymce c-article-box">
+        <!-- <div id="c-article-origin" class="c-article-origin" ref="origin"><slot></slot></div> -->
+        <div id="c-article" class="c-article" ref="article" v-if="pageable">
+            <div
+                class="c-article-chunk"
+                v-for="(text, i) in data"
+                :key="i"
+                v-html="text"
+                :class="{ on: i == page - 1 || all == true }"
+                :id="'c-article-part' + ~~(i + 1)"
+            ></div>
+        </div>
+        <div id="c-article" class="c-article" ref="article" v-else-if="data && data.length" v-html="data[0]"></div>
+        <el-button class="c-article-all" type="primary" v-if="!all && hasPages" @click="showAll">加载全部</el-button>
+        <el-pagination
+            class="c-article-pages"
+            v-if="!all"
+            background
+            center
+            :page-size="1"
+            :hide-on-single-page="true"
+            @current-change="changePage"
+            :current-page="page"
+            layout="total, prev, pager, next, jumper"
+            :total="total"
+        ></el-pagination>
+
+        <!-- 相册 -->
+        <!-- <el-image-viewer
+            v-if="showImageViewer"
+            :url-list="images"
+            @close="onImageViewerClose"
+            :initialIndex="imageIndex"
+            hide-on-click-modal
+        ></el-image-viewer> -->
+    </div>
+</template>
+
+<script>
+import { ElPagination, ElButton } from "element-plus";
+import "element-plus/dist/index.css";
+
+// XSS
+import execFilterXSS from "../assets/js/xss";
+// const execFilterXSS = require("xss");
+// const xss_options = {
+//     allowCommentTag: true,
+// };
+
+// 基本文本
+import execLazyload from "../assets/js/img";
+import execFilterIframe from "../assets/js/iframe";
+import execFilterLink from "../assets/js/a";
+import execSplitPages from "../assets/js/nextpage";
+
+// 扩展文本
+import renderFoldBlock from "../assets/js/fold";
+import renderDirectory from "../assets/js/directory";
+import renderKatex from "../assets/js/katex";
+import renderCode from "../assets/js/code";
+import renderImgPreview from "../assets/js/renderImgPreview";
+
+export default {
+    name: "ArticleRender",
+    props: {
+        // 内容
+        content: String,
+
+        // 拼接相对路径地址的图片，需要自带协议
+        cdnDomain: {
+            type: String,
+            default: "",
+        },
+        // 链接白名单检查，不在白名单，使用新窗跳转
+        linkWhitelist: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        // 链接白名单强制模式，开启后不在白名单的链接一律置空，不允许跳转
+        linkStrict: {
+            type: Boolean,
+            default: false,
+        },
+        // iframe白名单检查，不在白名单，移除iframe
+        iframeWhitelist: {
+            type: Array,
+            default: function () {
+                return [];
+            },
+        },
+        // 目录容器选择器
+        directorybox: String,
+        // 是否开启分页
+        pageable: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data: function () {
+        return {
+            // 作品
+            all: false,
+            page: 1,
+            data: [],
+            mode: "",
+        };
+    },
+    computed: {
+        total: function () {
+            return this.chunks.length;
+        },
+        hasPages: function () {
+            return this.chunks.length > 1;
+        },
+        origin: function () {
+            return this.content;
+        },
+        chunks: function () {
+            return this.pageable ? execSplitPages(this.origin) : [this.origin];
+        },
+    },
+    methods: {
+        doReg: function (data) {
+            if (data) {
+                // 过滤内容
+                data = execLazyload(data, this.cdnDomain);
+                data = execFilterIframe(data, this.iframeWhitelist);
+                data = execFilterXSS(data);
+                data = execFilterLink(data, this.linkWhitelist, this.linkStrict);
+                return data;
+            } else {
+                return "";
+            }
+        },
+        doDOM: function ($root) {
+            // 折叠块
+            renderFoldBlock($root);
+            // 代码
+            renderCode(`code[class=^'language-']`);
+            // Latex
+            renderKatex();
+
+            // 画廊
+            renderImgPreview();
+        },
+        doDir: function () {
+            // 显示局部
+            let target = "";
+            if (this.hasPages && !this.all) {
+                target = "#c-article-part" + this.page;
+                // 全部
+            } else {
+                target = "#c-article";
+            }
+            let dir = renderDirectory(target, this.directorybox);
+            this.$emit("directoryRendered", dir);
+        },
+        changePage: function (i) {
+            this.page = i;
+            window.scrollTo(0, 0);
+            this.$nextTick(() => {
+                this.doDir();
+            });
+        },
+        showAll: function () {
+            this.all = true;
+            this.$nextTick(() => {
+                this.doDir();
+            });
+        },
+        render: function () {
+            let result = [];
+            for (let chunk of this.chunks) {
+                let _chunk = this.doReg(chunk);
+                result.push(_chunk);
+            }
+            this.data = result;
+        },
+        run: function () {
+            this.render();
+
+            // 等待html加载完毕后
+            this.$nextTick(() => {
+                this.$emit("contentLoaded");
+
+                // 统一DOM处理
+                const $root = this.$refs.article;
+                this.doDOM($root);
+                this.$emit("contentRendered");
+
+                // 目录处理
+                this.doDir();
+            });
+        },
+    },
+    watch: {
+        content: function () {
+            this.run();
+        },
+    },
+    mounted: function () {
+        const params = new URLSearchParams(location.search);
+        this.mode = params.get("mode") || "";
+        this.run();
+    },
+    components: {
+        "el-pagination": ElPagination,
+        "el-button": ElButton,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/article.less";
+</style>

package/src/components/Tinymce.vue

@@ -0,0 +1,189 @@
+<template>
+    <div class="c-editor-tinymce">
+        <slot name="prepend"></slot>
+
+        <div class="c-editor-header">
+            <Upload v-if="attachmentEnable" @insert="insertAttachments" :uploadFn="attachmentUploadFn" :domain="attachmentCdnDomain" />
+        </div>
+
+        <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 v-if="showTips"
+            >进入特殊区域（代码块，折叠块等等）脱离或使用工具栏触发后，请使用键盘方向 → ↓
+            键进行脱离，回车只是正常在区块内换行。去掉样式点击第二行第一个&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";
+import hljs_languages from "../assets/js/hljs_languages.js";
+import GlobalConf from '../../config/global.js';
+
+export default {
+    name: "Tinymce",
+    props: {
+        // 内容
+        modelValue: {
+            type: String,
+            default: "",
+        },
+        // 默认高度
+        height: {
+            type: Number,
+            default: 800,
+        },
+        // Tinymce右键粘贴上传函数
+        tinymceUploadFn: {
+            type: Function,
+            default: () => {},
+        },
+        // Tinymce资源CDN拼接域名
+        tinymceAssetsDomain: {
+            type: String,
+            default: "",
+        },
+        // 是否显示编辑器使用提示
+        showTips: {
+            type: Boolean,
+            default: true,
+        },
+
+
+        // 是否启用附件上传
+        attachmentEnable: {
+            type: Boolean,
+            default: true,
+        },
+        // 附件上传函数
+        attachmentUploadFn: {
+            type: Function,
+            default: () => {},
+        },
+        // 附件CDN拼接域名
+        attachmentCdnDomain: {
+            type: String,
+            default: "",
+        },
+
+    },
+    emits: ["update:modelValue"],
+    data: function () {
+        return {
+            data: "",
+            init: {
+                // 选择器
+                selector: "#tinymce",
+
+                // 语言
+                language: "zh_CN",
+
+                // 设置
+                convert_urls: false,
+
+                // 样式
+                content_css: process.env.VUE_APP_TINYMCE_DEV === "true" ? `http://localhost:5120/skins/content/default/content.min.css` : `${this.tinymceAssetsDomain}/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,
+
+                // UI
+                icons: "custom",
+                menubar: false,
+                branding: false,
+                contextmenu: "",
+                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: GlobalConf.color_map,
+
+                codesample_languages: hljs_languages,
+
+                // Image
+                image_advtab: true,
+                file_picker_types: "file image",
+                // images_upload_url: this.uploadUrl,
+                automatic_uploads: true,
+                // images_upload_credentials: true,
+                images_upload_handler: this.image_upload_handler,
+                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) {
+            // eslint-disable-next-line no-undef
+            tinyMCE.editors["tinymce"].insertContent(data.html);
+        },
+        insertResource: function (data) {
+            // eslint-disable-next-line no-undef
+            tinyMCE.editors["tinymce"].insertContent(data);
+        },
+        image_upload_handler: function (blobInfo, success, failure) {
+            const formData = new FormData();
+            formData.append("file", blobInfo.blob(), blobInfo.filename());
+
+            this.tinymceUploadFn(formData)
+                .then((res) => {
+                    const json = res.data;
+
+                    success(json.location);
+                })
+                .catch((error) => {
+                    if (error.response) {
+                        // 请求已发出，但服务器响应的状态码不在 2xx 范围内
+                        failure("Image upload failed. Status: " + error.response.status);
+                    } else if (error.request) {
+                        // 请求已发出，但没有收到响应
+                        failure("Image upload failed. No response received.");
+                    } else {
+                        // 发送请求时出了some问题
+                        failure("Image upload failed. Error: " + error.message);
+                    }
+                });
+        },
+    },
+    mounted: function () {
+        // console.log(process.env.VUE_APP_TINYMCE_DEV)
+    },
+    components: {
+        Editor,
+        Upload,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/tinymce.less";
+</style>