@jx3box/jx3box-editor 1.0.0 → 1.0.5

package/assets/css/article_markdown.less

@@ -0,0 +1,12 @@
+.c-article-markdown {
+    @import "module/video.less";
+
+    @import 'module/macro.less';
+    @import 'module/qixue.less';
+
+    @import 'module/jx3_element.less';
+    @import 'module/buff.less';
+    @import 'module/skill.less';
+    @import 'module/icon.less';
+    @import 'module/resource.less';
+}

package/assets/css/markdown/common.less

@@ -0,0 +1,13 @@
+.c-editor-markdown-macro {
+    display: inline-block;
+
+    .u-input {
+        .el-textarea__inner {
+
+            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
+        }
+    }
+    .el-dialog__body {
+        padding-top: 0;
+    }
+}

package/assets/css/markdown.less

@@ -15,7 +15,6 @@
     .h(780px);
     .v-note-wrapper{
         .h(780px);
-        .z(1);
     }
 }
 
@@ -32,9 +31,3 @@
 .c-markdown-store-item {
     .none;
 }
-
-.c-markdown {
-    .markdown-body .hljs {
-        background-color: #f6f8fa;
-    }
-}

package/assets/css/module/code.less

@@ -87,7 +87,7 @@
     }
     :not(pre) > code[class*="language-"],
     pre[class*="language-"] {
-        background: #f5f2f0;
+        background: #f6f8fa;
     }
     /* Inline code */
     :not(pre) > code[class*="language-"] {

package/assets/data/markdown_whitelist.json

@@ -0,0 +1,14 @@
+{
+    "xssOptions": {
+        "whiteList": {
+            "pre": ["class", "style"],
+            "div": ["class", "style"],
+            "video": ["controls", "width", "height", "style", "src"],
+            "audio": ["controls", "src"],
+            "source": ["src", "type", "style"],
+            "iframe": ["src", "frameborder", "scrolling", "allowfullscreen"],
+            "details":[],
+            "summary":[]
+        }
+    }
+}

package/assets/js/code.js

@@ -0,0 +1,13 @@
+import hljs from "highlight.js";
+import "highlight.js/styles/github.css";
+
+function renderCode(selector) {
+    if (!selector) {
+        hljs.configure({
+            cssSelector: selector,
+        });
+    }
+    hljs.highlightAll();
+}
+
+export default renderCode;

package/assets/js/directory.js

@@ -10,7 +10,7 @@ const count = {
 const MAX_DEPTH = 3;
 const PREFIX_CLS = "lv"; //class前缀
 
-function directory(from, to) {
+function directory(from, to = '#directory') {
     // 装载容器设置
     const $box = $(to);
     if (!to && $box.length) return;

package/package.json

@@ -1,76 +1,78 @@
 {
-    "name": "@jx3box/jx3box-editor",
-    "version": "1.0.0",
-    "description": "JX3BOX Article & Editor",
-    "main": "index.js",
-    "scripts": {
-        "dev": "env DEV_SERVER=true vue-cli-service serve",
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint",
-        "inspect": "vue inspect > output.js",
-        "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-data@latest @jx3box/markdown@latest",
-        "article": "vue-cli-service build --target lib --name jx3box_article src/Article.vue --mode production",
-        "tinymce": "vue-cli-service build --target lib --name tinymce src/Tinymce.vue && cp public/tinymce.html dist/tinymce.html"
+  "name": "@jx3box/jx3box-editor",
+  "version": "1.0.5",
+  "description": "JX3BOX Article & Editor",
+  "main": "index.js",
+  "scripts": {
+    "dev": "env DEV_SERVER=true vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "inspect": "vue inspect > output.js",
+    "update": "npm --registry https://registry.npmjs.org install @jx3box/jx3box-common@latest @jx3box/jx3box-macro@latest @jx3box/jx3box-talent@latest @jx3box/jx3box-emotion@latest @jx3box/jx3box-data@latest @jx3box/markdown@latest",
+    "article": "vue-cli-service build --target lib --name jx3box_article src/Article.vue --mode production",
+    "tinymce": "vue-cli-service build --target lib --name tinymce src/Tinymce.vue && cp public/tinymce.html dist/tinymce.html"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential"
-        ],
-        "rules": {},
-        "parserOptions": {
-            "parser": "babel-eslint"
-        }
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions"
+    "extends": [
+      "plugin:vue/essential"
     ],
-    "dependencies": {
-        "@jx3box/jx3box-common": "^6.7.2",
-        "@jx3box/jx3box-data": "^1.8.3",
-        "@jx3box/jx3box-emotion": "^1.0.10",
-        "@jx3box/jx3box-macro": "^1.0.1",
-        "@jx3box/jx3box-talent": "^1.1.2",
-        "@jx3box/markdown": "0.0.8",
-        "@tinymce/tinymce-vue": "^3.2.2",
-        "axios": "^0.19.2",
-        "core-js": "^3.6.5",
-        "csslab": "^4.0.3",
-        "element-ui": "^2.13.2",
-        "hevue-img-preview": "^5.0.0",
-        "jquery": "^3.5.1",
-        "js-base64": "^3.6.1",
-        "katex": "^0.13.0",
-        "lodash": "^4.17.15",
-        "photoswipe": "^4.1.2",
-        "prismjs": "^1.20.0",
-        "vue": "^2.6.11",
-        "vue-gallery-slideshow": "^1.5.2",
-        "vue-photoswipe.js": "^2.0.23",
-        "xss": "^1.0.8"
-    },
-    "devDependencies": {
-        "@vue/cli-plugin-babel": "~4.3.0",
-        "@vue/cli-plugin-eslint": "~4.3.0",
-        "@vue/cli-plugin-vuex": "^4.0.0",
-        "@vue/cli-service": "~4.3.0",
-        "babel-eslint": "^10.1.0",
-        "eslint": "^6.7.2",
-        "eslint-plugin-vue": "^6.2.2",
-        "less": "^3.0.4",
-        "less-loader": "^5.0.0",
-        "style-resources-loader": "^1.3.3",
-        "vue-cli-plugin-element": "~1.0.1",
-        "vue-svg-inline-loader": "^1.4.6",
-        "vue-template-compiler": "^2.6.11"
-    },
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/JX3BOX/jx3box-editor.git"
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
     }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ],
+  "dependencies": {
+    "@jx3box/jx3box-common": "^6.7.8",
+    "@jx3box/jx3box-data": "^1.8.3",
+    "@jx3box/jx3box-emotion": "^1.0.10",
+    "@jx3box/jx3box-macro": "^1.0.1",
+    "@jx3box/jx3box-talent": "^1.1.2",
+    "@jx3box/markdown": "^0.1.4",
+    "@tinymce/tinymce-vue": "^3.2.2",
+    "axios": "^0.19.2",
+    "core-js": "^3.6.5",
+    "csslab": "^4.0.3",
+    "element-ui": "^2.13.2",
+    "hevue-img-preview": "^5.0.0",
+    "highlight.js": "^11.3.1",
+    "jquery": "^3.5.1",
+    "js-base64": "^3.6.1",
+    "katex": "^0.13.0",
+    "lodash": "^4.17.15",
+    "photoswipe": "^4.1.2",
+    "prismjs": "^1.20.0",
+    "vue": "^2.6.11",
+    "vue-gallery-slideshow": "^1.5.2",
+    "vue-photoswipe.js": "^2.0.23",
+    "xss": "^1.0.8"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.16.5",
+    "@vue/cli-plugin-babel": "~4.3.0",
+    "@vue/cli-plugin-eslint": "~4.3.0",
+    "@vue/cli-plugin-vuex": "^4.0.0",
+    "@vue/cli-service": "~4.3.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^6.2.2",
+    "less": "^3.0.4",
+    "less-loader": "^5.0.0",
+    "style-resources-loader": "^1.3.3",
+    "vue-cli-plugin-element": "~1.0.1",
+    "vue-svg-inline-loader": "^1.4.6",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/JX3BOX/jx3box-editor.git"
+  }
 }

package/src/Article.vue

@@ -62,9 +62,6 @@
 import { Pagination, Button, Popover } from "element-ui";
 import "@jx3box/jx3box-common/css/element.css";
 
-// 语法高亮
-import Prism from "prismjs";
-
 // 相册
 // import gallery from "vue-gallery-slideshow";
 import Vue from "vue";
@@ -91,7 +88,7 @@ import renderMacro from "../assets/js/macro";
 import renderTalent from "../assets/js/qixue";
 import renderTalent2 from "../assets/js/talent2";
 import renderKatex from "../assets/js/katex";
-// import renderGallery from "../assets/js/gallery";
+import renderCode from "../assets/js/code";
 import renderImgPreview from "../assets/js/renderImgPreview";
 
 // 剑三
@@ -180,7 +177,7 @@ export default {
             // 折叠块
             renderFoldBlock($root);
             // 代码
-            $root && Prism.highlightAllUnder($root);
+            renderCode(`code[class=^'language-']`)
             // Tatex
             renderKatex();
 

package/src/ArticleMarkdown.vue

@@ -0,0 +1,151 @@
+<template>
+    <div class="c-article-markdown">
+        <markdown-render id="c-article" class="c-markdown" ref="article" v-model="origin" @change="updateOrigin" :preRender="doReg"></markdown-render>
+        <div class="w-jx3-element-pop" :style="jx3_element.style">
+            <jx3-item :item_id="item.id" :jx3ClientType="item.client" v-show="jx3_element.type == 'item'" />
+            <jx3-buff :client="buff.client" :id="buff.id" :level="buff.level" v-show="jx3_element.type == 'buff'" />
+            <jx3-skill :client="skill.client" :id="skill.id" :level="skill.level" v-show="jx3_element.type == 'skill'" />
+        </div>
+    </div>
+</template>
+
+<script>
+import markdownRender from '@jx3box/markdown/src/render.vue'
+
+// 基本文本
+import execLazyload from "../assets/js/img";
+import execFilterIframe from "../assets/js/iframe";
+import execFilterLink from "../assets/js/a";
+import execFilterXSS from "../assets/js/script";
+
+// 扩展文本
+import renderDirectory from "../assets/js/directory";
+import renderMacro from "../assets/js/macro";
+import renderTalent from "../assets/js/qixue";
+import renderTalent2 from "../assets/js/talent2";
+import renderKatex from "../assets/js/katex";
+import renderCode from "../assets/js/code";
+
+// 剑三
+import Item from "./Item";
+import Buff from "./Buff";
+import Skill from "./Skill";
+import renderJx3Element from "../assets/js/jx3_element";
+
+import {xssOptions} from '../assets/data/markdown_whitelist.json'
+
+export default {
+    name: "ArticleMarkdown",
+    props: {
+        content: String,
+        directorybox: String,
+    },
+    data: function() {
+        return {
+            // 原始md
+            origin : '',
+            // 原始渲染md后的html(传入文本回调处理函数)
+            html: "",
+
+            // 物品
+            item: {
+                id: "",
+                client: 1,
+            },
+            // BUFF
+            buff: {
+                client: "std",
+                id: "",
+                level: "",
+            },
+            // SKILL
+            skill: {
+                client: "std",
+                id: "",
+                level: "",
+            },
+            jx3_element: {
+                style: {
+                    top: 0,
+                    left: 0,
+                    display: "none",
+                },
+                type: "",
+            },
+
+            xssOptions
+        };
+    },
+    computed: {
+    },
+    methods: {
+        doReg: function(data) {
+            if (data) {
+                // 过滤内容
+                data = execLazyload(data);
+                data = execFilterIframe(data);
+                data = execFilterXSS(data);
+                data = execFilterLink(data);
+                return data;
+            } else {
+                return "";
+            }
+        },
+        doDOM: function() {
+            // 宏
+            renderMacro();
+            // 奇穴
+            renderTalent();
+            renderTalent2();
+            // Tatex
+            renderKatex();
+            // 语法高亮
+            renderCode(`code[class=^'lang-']`)
+            // 物品
+            renderJx3Element(this);
+        },
+        doDir: function() {
+            let target = "#c-article";
+            let dir = renderDirectory(target, this.directorybox);
+            if (dir) this.$emit("directoryRendered");
+        },
+        updateOrigin : function (md,html){
+            this.html = html
+            this.render()
+        },
+        render: function() {
+            // 等待html加载完毕后
+            this.$nextTick(() => {
+                this.$emit("contentLoaded");
+
+                // 统一DOM处理
+                this.doDOM();
+                this.$emit("contentRendered");
+
+                // 目录处理
+                this.doDir();
+            });
+        },
+    },
+    watch: {
+        content : {
+            immediate : true,
+            handler : function (val){
+                this.origin = val
+            }
+        }
+    },
+    mounted: function() {
+    },
+    components: {
+        "jx3-item": Item,
+        "jx3-buff": Buff,
+        "jx3-skill": Skill,
+        markdownRender,
+    },
+};
+</script>
+
+<style lang="less">
+@import "../assets/css/article_markdown.less";
+</style>

package/src/Markdown.vue

@@ -10,12 +10,14 @@
 
         <slot></slot>
 
-        <mavon-editor class="c-markdown" ref="md" v-model="data" :editable="editable" :navigation="false" @change="updateData" :subfield="false" :readOnly="readOnly">
+        <markdown-editor class="c-markdown" ref="md" v-model="data" @change="updateData" :subfield="false">
             <template slot="left-toolbar-after">
                 <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>
+                <!-- <macro @insert="insertMacro" /> -->
+                <!-- <pz @insert="insertPz" /> -->
             </template>
-        </mavon-editor>
+        </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 />
 
@@ -24,9 +26,19 @@
 </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 { uploadFile } from "../service/cms";
+
+// jx3
+// import macro from './components/markdown/macro.vue'
+// import pz from './components/markdown/pz.vue'
+
+
 export default {
     name: "Markdown",
     props: {
@@ -51,8 +63,12 @@ export default {
         }
     },
     components: {
+        markdownEditor,
         Upload,
         Resource,
+        
+        // macro,
+        // pz,
     },
     data: function() {
         return {
@@ -62,6 +78,8 @@ export default {
             image_ext: ["png", "jpg", "gif", "bmp", "webp"],
             files: [],
             resolved_files: [],
+
+            xssOptions
         };
     },
     model: {
@@ -192,6 +210,20 @@ export default {
             // TODO:
             // tinyMCE.editors["tinymce"].insertContent(data);
         },
+        insertMacro(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
+        },
+        insertPz(data) {
+            this.$md.insertText(this.$md.getTextareaDom(), {
+                prefix: data,
+                subfix: "",
+                str: "",
+            });
+        }
     },
     filters: {},
     created: function() {},

package/src/components/markdown/macro.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="c-editor-markdown-dialog c-editor-markdown-macro">
+        <span class="c-markdown-toolbar-file c-markdown-toolbar-item" @click="handleClick" title="插入宏">宏</span>
+
+        <el-dialog :visible.sync="visible" title="插入宏" :modal-append-to-body="false">
+            <el-input class="u-input u-input-macro" type="textarea" :rows="15" v-model="macro" show-word-limit :maxlength="128"></el-input>
+
+            <div slot="footer">
+                <el-button @click="cancel">取消</el-button>
+                <el-button type="primary" @click="insert">插入</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'markdown_marco',
+    data() {
+        return {
+            visible: false,
+            macro: ''
+        }
+    },
+    methods: {
+        handleClick() {
+            this.visible = true
+        },
+        cancel() {
+            this.visible = false
+            this.macro = ''
+        },
+        insert() {
+            const content = `<pre class="e-jx3macro-area w-jx3macro">${this.macro}</pre>`
+
+            this.$emit('insert', content)
+
+            this.visible = false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/css/markdown/common.less';
+</style>

package/src/components/markdown/pz.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class="m-macro-dialog m-pz-dialog">
+        <span class="c-markdown-toolbar-file c-markdown-toolbar-item" @click="handleClick" title="插入配装方案">装</span>
+
+        <el-dialog :visible.sync="visible" title="配装方案" :modal-append-to-body="false">
+
+            <p>👘 请填入魔盒配装方案的<a target="_blank" href="/tool/32032">【嵌入版】</a>编码</p>
+
+            <el-input class="m-macro-input" type="textarea" :rows="4" v-model="pzCode"></el-input>
+
+            <div slot="footer">
+                <el-button @click="cancel">取消</el-button>
+                <el-button type="primary" @click="insert">插入</el-button>
+            </div>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'markdown_marco',
+    data() {
+        return {
+            visible: false,
+            pzCode: ''
+        }
+    },
+    methods: {
+        handleClick() {
+            this.visible = true
+        },
+        cancel() {
+            this.visible = false
+            this.pzCode = ''
+        },
+        insert() {
+            const content = `${this.pzCode}`
+
+            this.$emit('insert', content)
+
+            this.visible = false
+        }
+    }
+}
+</script>
+
+<style lang="less">
+@import '../../../assets/css/markdown/common.less';
+</style>

package/vue.config.js

@@ -24,6 +24,12 @@ module.exports = {
             template : 'public/article.html',
             filename:'markdown/index.html',
         },
+        article_markdown : {
+            title : 'Markdown文章内容渲染',
+            entry:'demo/MarkdownArticleDemo.js',
+            template : 'public/article.html',
+            filename:'article_markdown/index.html',
+        },
     },