@2kog/pkg-editor 0.0.1

package/README.md

@@ -0,0 +1,35 @@
+# iruxu-editor
+
+## 组件文档
++ [Article](./docs/article.md)
++ [Tinymce](./docs/tinymce.md)
++ [Upload](./docs/upload.md)
+
+## 开发
+```
+$ npm install
+$ npm run dev //本地调试
+$ npm run serve //使用线上tinymce资源和接口
+```
+
+
+## Fork&构建流程
+### 构建发布
+本地执行`npm run build`，需要将文章与编辑器共用样式在tinymce进行生成静态css
+
+
+## Tinymce
+### 特性
++ 基于tinymce v5.2.2扩展
++ 保留v4版本分割线规则
++ 内置powerpaste&checklist插件
++ 增加插入B站视频插件
++ 增加插入折叠文本插件
++ 增加mathjax支持latex
+
+### 插件添加步骤
+1. tinymce/icons/custom/icons.js 添加svg图标,需设置尺寸,注意视口大小,移除换行符等
+2. tinymce/plugins目录，复制videox(input),foldtext(null)目录作为参考新建插件目录，替换videox为新插件名
+3. 编辑器配置中激活插件和添加工具栏项
+
+

package/config/global.js

@@ -0,0 +1,77 @@
+module.exports = {
+
+    // 编辑器
+    /*------------------*/
+    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 | image media", // 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",
+        ],
+    },
+    color_map: [
+        "FF99CC",
+        "浅粉",
+        "FF3399",
+        "深粉",
+        "FF0000",
+        "正红",
+        "CC99FF",
+        "紫色",
+        "9933ff",
+        "深紫",
+
+        "FFFF99",
+        "浅黄",
+        "FFFF00",
+        "金黄",
+        "FFCC00",
+        "亮黄",
+        "FFCC99",
+        "浅桃",
+        "FF6600",
+        "橘色",
+
+        "CCFFCC",
+        "浅绿",
+        "9bf915",
+        "荧光绿",
+        "00FF00",
+        "辣眼绿",
+        "49c10f",
+        "深绿",
+        "008080",
+        "深青",
+
+        "CCFFFF",
+        "浅蓝",
+        "00FFFF",
+        "参考线",
+        "00CCFF",
+        "天蓝",
+        "99CCFF",
+        "蔚蓝",
+        "0000FF",
+        "辣眼蓝",
+
+        "CC0000",
+        "深红",
+        "000000",
+        "黑色",
+    ],
+
+    // 上传组件
+    /*------------------*/
+    imgTypes: ["jpg", "png", "gif", "bmp", "webp", "jpeg", "heic", "heif", "avif", "tif", "tiff","svg"],
+    videoTypes: ["mp4", "mov", "avi", "flv", "3gp", "wmv", "mkv", "webm", "m4v"]
+}

package/config/global.less

@@ -0,0 +1,5 @@
+// 主题色（链接等）
+@primary:#0366d6;
+
+// 文字颜色（黑底、白底）
+@color: #3d454d;

package/package.json

@@ -0,0 +1,67 @@
+{
+    "name": "@2kog/pkg-editor",
+    "version": "0.0.1",
+    "description": "Custom Tinymce、Article Renderer",
+    "scripts": {
+        "serve": "npm run dev",
+        "dev:vue": "vue-cli-service serve",
+        "dev:tinymce": "serve -l 5120 ./tinymce",
+        "dev": "npm run dev:vue & npm run dev:tinymce",
+        "build": "npx lessc -x ./tinymce/skins/content/default/content.less ./tinymce/skins/content/default/content.min.css",
+        "lint": "vue-cli-service lint"
+    },
+    "dependencies": {
+        "@element-plus/icons-vue": "^2.0.10",
+        "@tinymce/tinymce-vue": "^5.0.0",
+        "axios": "^1.3.2",
+        "cheerio": "^1.1.2",
+        "element-plus": "^2.2.29",
+        "highlight.js": "^11.7.0",
+        "jquery": "^3.5.1",
+        "katex": "^0.16.4",
+        "lodash": "^4.17.21",
+        "sanitize-html": "^2.17.0",
+        "uuid": "^9.0.1",
+        "viewerjs": "^1.11.3",
+        "vue": "^3.2.13"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.12.16",
+        "@babel/eslint-parser": "^7.12.16",
+        "@typescript-eslint/eslint-plugin": "^5.31.0",
+        "@typescript-eslint/parser": "^5.31.0",
+        "@vue/cli-plugin-babel": "~5.0.0",
+        "@vue/cli-plugin-eslint": "~5.0.0",
+        "@vue/cli-plugin-typescript": "~5.0.0",
+        "@vue/cli-service": "~5.0.0",
+        "@vue/eslint-config-typescript": "^11.0.0",
+        "babel-loader": "^8.2.5",
+        "csslab": "^6.0.1",
+        "eslint": "^7.32.0",
+        "eslint-plugin-vue": "^9.3.0",
+        "husky": "^8.0.0",
+        "less": "^3.11.1",
+        "less-loader": "^11.0.0",
+        "lint-staged": "^13.0.2",
+        "prettier": "2.7.1",
+        "serve": "^14.2.0",
+        "style-resources-loader": "^1.5.0",
+        "typescript": "~4.5.5",
+        "unplugin-vue-define-options": "^1.2.1",
+        "url": "^0.11.0",
+        "vue-svg-inline-loader": "^2.1.3"
+    },
+    "browserslist": [
+        "> 1%",
+        "last 2 versions",
+        "not dead",
+        "not ie 11"
+    ],
+    "lint-staged": {
+        "**/*": "prettier --write --ignore-unknown"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/2kog/pkg-editor.git"
+    }
+}

package/src/assets/css/article.less

@@ -0,0 +1,23 @@
+// tinymce文章样式
+
+@import "./var.less";
+
+@import "tinymce/_.less";
+@import "tinymce/a.less";
+@import "tinymce/list.less";
+@import "tinymce/quote.less";
+@import "tinymce/hr.less";
+@import "tinymce/table.less";
+@import "tinymce/img.less";
+@import "tinymce/p.less";
+@import "tinymce/h.less";
+@import "tinymce/code.less";
+@import "tinymce/fold.less";
+@import "tinymce/plugin.less";
+@import "tinymce/imgpreview.less";
+@import "tinymce/latex.less";
+@import "tinymce/nextpage.less";
+
+@import "tinymce/video.less";
+
+@import "module/directory.less";

package/src/assets/css/module/directory.less

@@ -0,0 +1,104 @@
+.c-article-directory {
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        margin: 0;
+        padding: 0;
+        cursor: pointer;
+        font-weight: normal;
+        white-space: nowrap;
+        word-wrap: normal;
+        word-break: keep-all;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        letter-spacing: 0.2px;
+        line-height: 20px;
+        padding: 8px 0;
+        &:hover {
+            // font-weight: 600;
+            color: @primary;
+        }
+        font-size: 12px;
+    }
+    a {
+        color: @color;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+        &::before {
+            content: "\e78b";
+
+            font-family: element-icons !important;
+            speak: none;
+            font-style: normal;
+            font-weight: 400;
+            font-variant: normal;
+            text-transform: none;
+            line-height: 1;
+            vertical-align: baseline;
+            display: inline-block;
+            -webkit-font-smoothing: antialiased;
+            margin-right: 5px;
+            font-size: 16px;
+        }
+    }
+
+    .lv2 {
+        padding-left: 20px;
+    }
+
+    .lv3 {
+        padding-left: 40px;
+    }
+
+    .lv0 {
+        display: none;
+    }
+}
+
+.c-article-directory-title {
+    margin-bottom: 5px;
+    .c-article-directory-title-label {
+        font-weight: 300;
+        font-size: 18px;
+        .u-icon{
+            font-size: 20px;
+        }
+    }
+    .c-article-directory-title-skip,
+    .c-article-directory-title-folder {
+        font-size: 14px;
+        float: right;
+        padding: 0 5px;
+        line-height: 25px;
+        color: darken(#dcdfe6, 5%);
+        cursor: pointer;
+        &:hover {
+            color: darken(#dcdfe6, 20%);
+        }
+    }
+}
+.c-article-directory-content {
+    padding: 10px 15px;
+}
+
+@keyframes focusFade {
+    from {
+        background-color: #c3fcff;
+    }
+    to {
+        background-color: transparent;
+    }
+}
+
+.c-article .isScrollFocus {
+    animation: focusFade 0.5s ease-in-out;
+}

package/src/assets/css/tinymce.less

@@ -0,0 +1,81 @@
+// tinymce编辑器样式
+@import 'var.less';
+.c-editor-header {
+    .mb(10px);
+    .clearfix;
+
+    .c-upload,
+    .c-resource {
+        .fl;
+    }
+    .c-upload {
+        .mr(5px);
+    }
+}
+
+.c-editor-emotion {
+    max-height: 168px;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+        width: 4px;
+    }
+
+    &::-webkit-scrollbar-track,
+    &::-webkit-scrollbar-track-piece {
+        background-color: #fafafa;
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background-color: #eee;
+        border-radius: 6px;
+    }
+
+    &::-webkit-scrollbar-button,
+    &::-webkit-scrollbar-corner,
+    &::-webkit-resizer {
+        display: none;
+    }
+}
+
+.c-editor-tinymce {
+    .u-tutorial {
+        padding: 0 10px;
+        .mt(10px);
+        .mb(10px);
+        .fz(13px,32px);
+        .el-alert__icon.is-big {
+            .fz(18px);
+        }
+        .el-alert__content {
+            padding-left: 0;
+        }
+        .el-alert__closebtn {
+            top: 12px;
+        }
+        a {
+            color: @primary;
+        }
+        a:hover {
+            box-shadow: 0 1px 0 @primary;
+        }
+        .el-alert__description {
+            margin: 0 !important;
+        }
+    }
+
+    .t-emotion {
+        padding: unset;
+        border: unset;
+        margin: unset;
+    }
+}
+
+@media screen and (max-width: @phone) {
+    .c-editor-tinymce {
+        .u-tutorial {
+            .none;
+        }
+    }
+}

package/src/assets/css/upload.less

@@ -0,0 +1,119 @@
+@import "var.less";
+.c-upload {
+    .c-upload-trigger {
+        margin-right: 5px;
+    }
+
+    .c-upload-toolbar {
+        .flex(y);
+        margin-bottom: 20px;
+        .u-upload-clear {
+            .el-icon{
+                margin-right: 3px;
+            }
+            margin-right: 5px;
+        }
+        .u-upload-tip {
+            padding-right: 10px;
+            padding-top: 6px;
+            padding-bottom: 6px;
+            .fz(12px, 16px);
+            padding-right: 20px;
+            .db;
+            .nobreak;
+        }
+    }
+
+    .el-dialog__body {
+        padding-top: 0;
+    }
+
+    .el-upload-list li {
+        outline: none;
+    }
+
+    .el-upload-list__item {
+        &:hover {
+            border: 1px solid #13ce66;
+        }
+    }
+
+    .el-upload--picture-card:hover{
+        background-color:#fafcff;
+    }
+
+    // 列表
+    .u-file-wrapper {
+        .size(100%);
+        &.isSelected {
+        }
+        &.disabled {
+            cursor: default;
+            opacity: 0.38;
+            border-color: #eee;
+            .u-fileplaceholder {
+                fill: #aaa;
+            }
+        }
+        .pointer;
+    }
+    .u-filebox {
+        .x;
+        padding: 37px;
+    }
+    .u-fileplaceholder {
+        width: 40px;
+        height: 40px;
+        fill: @primary;
+    }
+    .u-filename {
+        .db;
+        .nobreak;
+    }
+
+    // 勾选
+    .u-file-select-label {
+        position: absolute;
+        right: -15px;
+        top: -6px;
+        width: 40px;
+        height: 24px;
+        background: #13ce66;
+        text-align: center;
+        -webkit-transform: rotate(45deg);
+        transform: rotate(45deg);
+        -webkit-box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 1pc 1px rgba(0, 0, 0, 0.2);
+
+        i {
+            font-size: 12px;
+            margin-top: 12px;
+            transform: rotate(-45deg);
+        }
+    }
+
+    .c-large-dialog {
+        &.el-dialog {
+            .w(60%);
+            height: 70%;
+            .el-dialog__body {
+                height: calc(100% - 100px);
+                overflow-y: auto;
+                box-sizing: border-box;
+            }
+        }
+    }
+    @media screen and (max-width: @notebook) {
+        .c-large-dialog .el-dialog {
+            .w(90%);
+        }
+    }
+    @media screen and (max-width: @ipad-y) {
+        .c-large-dialog .el-dialog {
+            margin: 0 !important;
+            .size(100%);
+            max-height: none;
+            .h(100%);
+        }
+    }
+}

package/src/assets/css/var.less

@@ -0,0 +1,17 @@
+@import "../../../config/global.less";
+
+// 颜色
+@bg-black: #24292e;
+@bg-gray: #f6f8fa;
+@bg-light: #fafbfc;
+@border-hr: #e1e4e8;
+@border: #e4e7ed;
+
+// 适配
+@smallpc: 1680px; //21寸显示器
+@notebook: 1440px; //笔记本电脑
+@mininote: 1280px; //小屏笔记本
+@ipad: 1133px; //平板，适配到8.3mini6
+@ipad-y: 1023px; //竖屏
+@phone: 720px; //手机
+@ip5: 374px; //iphone5超小屏

package/src/assets/img/file.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 469.333 469.333" style="enable-background:new 0 0 469.333 469.333;" xml:space="preserve">
+<g>
+	<g>
+		<g>
+			<path d="M466.208,88.458L380.875,3.125c-2-2-4.708-3.125-7.542-3.125H42.667C19.146,0,0,19.135,0,42.667v384
+				c0,23.531,19.146,42.667,42.667,42.667h384c23.521,0,42.667-19.135,42.667-42.667V96
+				C469.333,93.167,468.208,90.458,466.208,88.458z M106.667,21.333h234.667v128c0,11.76-9.563,21.333-21.333,21.333H128
+				c-11.771,0-21.333-9.573-21.333-21.333V21.333z M384,448H85.333V256H384V448z M448,426.667c0,11.76-9.563,21.333-21.333,21.333
+				h-21.333V245.333c0-5.896-4.771-10.667-10.667-10.667h-320c-5.896,0-10.667,4.771-10.667,10.667V448H42.667
+				c-11.771,0-21.333-9.573-21.333-21.333v-384c0-11.76,9.563-21.333,21.333-21.333h42.667v128C85.333,172.865,104.479,192,128,192
+				h192c23.521,0,42.667-19.135,42.667-42.667v-128h6.25L448,100.417V426.667z"/>
+			<path d="M266.667,149.333h42.667c5.896,0,10.667-4.771,10.667-10.667V53.333c0-5.896-4.771-10.667-10.667-10.667h-42.667
+				c-5.896,0-10.667,4.771-10.667,10.667v85.333C256,144.562,260.771,149.333,266.667,149.333z M277.333,64h21.333v64h-21.333V64z"
+				/>
+		</g>
+	</g>
+</g>
+</svg>

package/src/assets/js/a.js

@@ -0,0 +1,141 @@
+// formatLink.js
+import { load } from "cheerio";
+
+/** 规范化 whitelist：统一小写、去空格、允许传入带协议的域名 */
+function normalizeWhitelist(list = []) {
+  return (Array.isArray(list) ? list : [])
+    .map((x) => String(x || "").trim().toLowerCase())
+    .filter(Boolean)
+    .map((x) => {
+      // 允许用户写 https://xxx.com
+      try {
+        if (/^https?:\/\//i.test(x)) return new URL(x).hostname.toLowerCase();
+      } catch {
+        console.warn(`formatLink: 无法解析 whitelist 域名 "${x}"，已忽略该项`);
+      }
+      return x;
+    });
+}
+
+/** 是否相对链接（默认认为站内，视为白名单） */
+function isRelativeHref(href = "") {
+  const s = href.trim();
+  if (!s) return true;
+  if (s.startsWith("#") || s.startsWith("?") || s.startsWith("/")) return true;
+  if (s.startsWith("./") || s.startsWith("../")) return true;
+  // 没有 scheme 且不是 //xxx，通常是相对路径（如 a/b）
+  return !/^[a-zA-Z][a-zA-Z0-9+\-.]*:/.test(s) && !s.startsWith("//");
+}
+
+/** 从 href 里提取 hostname（只处理 http/https/协议相对 //） */
+function getHostnameFromHref(href = "") {
+  const s = href.trim();
+  if (!s) return "";
+
+  if (s.startsWith("//")) {
+    try {
+      return new URL("https:" + s).hostname.toLowerCase();
+    } catch {
+      return "";
+    }
+  }
+
+  if (/^https?:\/\//i.test(s)) {
+    try {
+      return new URL(s).hostname.toLowerCase();
+    } catch {
+      return "";
+    }
+  }
+
+  return "";
+}
+
+/**
+ * whitelist 规则：
+ * - "xxx.com" 只匹配根域
+ * - "*.xxx.com" 只匹配子域（a.xxx.com），不匹配根域（xxx.com）
+ */
+function matchHost(hostname, whitelist) {
+  const host = (hostname || "").toLowerCase();
+  if (!host) return false;
+
+  for (const rule of whitelist) {
+    if (!rule) continue;
+
+    if (rule.startsWith("*.")) {
+      const root = rule.slice(2);
+      if (root && host.endsWith("." + root)) return true;
+      continue;
+    }
+
+    if (host === rule) return true;
+  }
+  return false;
+}
+
+/**
+ * @param {string} html - HTML 字符串（可为片段）
+ * @param {string[]} whitelist - 例如 ["xxx.com", "*.xxx.com"]
+ * @param {boolean} strict - true 时，非白名单链接 href 强制置空
+ */
+export default function formatLink(html, whitelist = [], strict = false) {
+  if (!html) return html;
+
+  const wl = normalizeWhitelist(whitelist);
+  const hasWhitelist = wl.length > 0;
+
+  // cheerio 用 root 包一下，保证片段也能正常选取
+  const $ = load(`<root>${html}</root>`, { decodeEntities: false });
+
+  $("a[href]").each((_, el) => {
+    const a = $(el);
+    const hrefRaw = a.attr("href") ?? "";
+    const href = String(hrefRaw).trim();
+    if (!href) return;
+
+    // markdown 锚点：强制 _self
+    if (href.startsWith("#")) {
+      a.attr("target", "_self");
+      return;
+    }
+
+    // 安全兜底：javascript: 一律干掉
+    if (/^javascript:/i.test(href)) {
+      a.attr("href", "");
+      return;
+    }
+
+    // mailto/tel 等不参与白名单判断（你也可以按 strict 强行置空，这里先按常见做法放行）
+    if (/^(mailto:|tel:|sms:)/i.test(href)) {
+      return;
+    }
+
+    // 相对链接默认视为站内
+    let isWhite = true;
+
+    if (!isRelativeHref(href)) {
+      const host = getHostnameFromHref(href);
+      isWhite = matchHost(host, wl);
+    } else {
+      isWhite = true;
+    }
+
+    // 只有设置了 whitelist 才触发“非白名单处理”
+    if (hasWhitelist && !isWhite) {
+      if (strict) {
+        a.attr("href", "");
+        return;
+      }
+
+      // 如果本身就是 _blank，就不管；否则强制 _blank
+      const target = String(a.attr("target") || "").toLowerCase();
+      if (target !== "_blank") {
+        a.attr("target", "_blank");
+      }
+    }
+  });
+
+  // 取出 root 里原始内容
+  return $("root").html() || "";
+}