@jx3box/jx3box-editor 1.0.1 → 1.0.3

package/assets/css/article_markdown.less

@@ -1,9 +1,3 @@
-.c-markdown {
-    .markdown-body .hljs {
-        background-color: #f6f8fa;
-    }
-}
-
 .c-article-markdown {
     @import "module/video.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {
@@ -31,18 +31,19 @@
     "last 2 versions"
   ],
   "dependencies": {
-    "@jx3box/jx3box-common": "^6.7.2",
+    "@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.0.8",
+    "@jx3box/markdown": "^0.1.3",
     "@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",

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

@@ -1,6 +1,6 @@
 <template>
     <div class="c-article-markdown">
-        <mavon-editor class="c-markdown" ref="article" v-model="origin" :editable="false" :navigation="false" @change="updateOrigin" :subfield="false" :readOnly="true"></mavon-editor>
+        <markdown-render class="c-markdown" ref="article" v-model="origin" @change="updateOrigin"></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'" />
@@ -10,6 +10,8 @@
 </template>
 
 <script>
+import markdownRender from '@jx3box/markdown/src/render.vue'
+
 // 基本文本
 import execLazyload from "../assets/js/img";
 import execFilterIframe from "../assets/js/iframe";
@@ -21,6 +23,8 @@ 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";
@@ -28,6 +32,8 @@ 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: {
@@ -68,6 +74,8 @@ export default {
                 },
                 type: "",
             },
+
+            xssOptions
         };
     },
     computed: {
@@ -85,12 +93,16 @@ export default {
                 return "";
             }
         },
-        doDOM: function($root) {
+        doDOM: function() {
             // 宏
             renderMacro();
             // 奇穴
             renderTalent();
             renderTalent2();
+            // Tatex
+            renderKatex();
+            // 语法高亮
+            renderCode(`code[class=^'lang-']`)
             // 物品
             renderJx3Element(this);
         },
@@ -113,17 +125,16 @@ export default {
         render: function() {
             let result = this.doReg(this.html);
             this.data = result;
-        },
-        run: function() {
-            this.render();
+
+            // TODO: 过滤未展示
+            this.$forceUpdate()
 
             // 等待html加载完毕后
             this.$nextTick(() => {
                 this.$emit("contentLoaded");
 
                 // 统一DOM处理
-                const $root = this.$refs.article;
-                this.doDOM($root);
+                this.doDOM();
                 this.$emit("contentRendered");
 
                 // 目录处理
@@ -145,6 +156,7 @@ export default {
         "jx3-item": Item,
         "jx3-buff": Buff,
         "jx3-skill": Skill,
+        markdownRender,
     },
 };
 </script>

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

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