@jx3box/jx3box-editor 1.4.11 → 1.5.1

package/assets/js/renderImgPreview.js

@@ -1,7 +1,11 @@
 import $ from 'jquery'
 
 function renderImgPreview(vm, selector='.c-article img'){
-    $(selector).each((i, ele) => {
+    // 获取src不为空的图片
+    let imgs = $(selector).filter(function(){
+        return $(this).attr('src') != ''
+    })
+    imgs.each((i, ele) => {
         // 加载全部src（lazyload）
         vm.images.push($(ele).attr('src'))
         // 绑定事件挂钩索引位置

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jx3box/jx3box-editor",
-  "version": "1.4.11",
+  "version": "1.5.1",
   "description": "JX3BOX Article & Editor",
   "main": "index.js",
   "scripts": {

package/src/ArticleMarkdown.vue

@@ -13,6 +13,10 @@
 <script>
 import markdownRender from '@jx3box/markdown/src/render.vue'
 
+import Vue from "vue";
+import hevueImgPreview from "hevue-img-preview";
+Vue.use(hevueImgPreview);
+
 // 基本文本
 import execLazyload from "../assets/js/img";
 import execFilterIframe from "../assets/js/iframe";
@@ -33,6 +37,7 @@ import Buff from "./Buff";
 import Skill from "./Skill";
 import Npc from "./Npc";
 import renderJx3Element from "../assets/js/jx3_element";
+import renderImgPreview from "../assets/js/renderImgPreview";
 
 import {xssOptions} from '../assets/data/markdown_whitelist.json'
 
@@ -79,6 +84,7 @@ export default {
                 },
                 type: "",
             },
+            images: [],
 
             xssOptions
         };
@@ -106,6 +112,8 @@ export default {
             renderTalent2();
             // Tatex
             renderKatex();
+            // 画廊
+            renderImgPreview(this);
             // 语法高亮
             renderCode(`code[class=^'lang-']`)
             // 物品
@@ -156,4 +164,8 @@ export default {
 
 <style lang="less">
 @import "../assets/css/article_markdown.less";
+
+.v-note-img-wrapper {
+    display: none;
+}
 </style>

package/src/GameText.vue

@@ -6,7 +6,7 @@
  * @Description: 用于渲染游戏内Text标签的文本
 -->
 <template>
-  <span v-html="html"></span>
+    <span v-html="html"></span>
 </template>
 
 <script>
@@ -15,170 +15,205 @@ import { getResource } from "../service/resource";
 import { escape } from "lodash";
 
 export default {
-  name: "GameText",
-  props: {
-    text: {
-      type: String,
-      default: "",
+    name: "GameText",
+    props: {
+        text: {
+            type: String,
+            default: "",
+        },
+        client: {
+            type: String,
+            default: "std",
+        },
     },
-    client: {
-      type: String,
-      default: "std",
+    data: function () {
+        return {
+            html: "",
+        };
     },
-  },
-  data: function () {
-    return {
-      html: "",
-    };
-  },
-  methods: {
-    /**
-     * 渲染某一个单独的Text标签成Span或链接
-     * @param {*} school_id
-     * @returns
-     */
-    renderItemHtml: function (item) {
-      let content = item.text;
-      let style = ``;
-      let link = null;
-      content = content.replace(/\\n/g, "<br />").replace(/\\/g, "");
-      if ([item.r, item.g, item.b].every((v) => v != undefined && v > 0)) {
-        style = `color: rgb(${item.r}, ${item.g}, ${item.b});`;
-      } else if (item.font != undefined && item.font != 100) {
-        const fonts = require("../assets/data/game_font.json");
-        for (let color in fonts) {
-          if (fonts[color].includes(item.font)) {
-            style = `color: ${color};`;
-            break;
-          }
-        }
-      }
-      if (item.name == "iteminfolink" && item.script) {
-        let item_type = item.script?.match(/this\.dwTabType=(\d+)/i)?.[1];
-        let item_index = item.script?.match(/this\.dwIndex=(\d+)/i)?.[1];
-        if (item_type && item_index) {
-          let item_id = `${item_type}_${item_index}`;
-          link = getLink("item", item_id);
-        }
-      }
-      if (link) {
-        return `<a style="${style} text-decoration: none;" target="_blank" href="${link}">${content}</a>`;
-      } else {
-        return `<span style="${style}">${content}</span>`;
-      }
-    },
-    /**
-     * 将一段游戏内文本转换为Html
-     * @param {Object[]} texts 标签对象
-     */
-    renderTextHtml: function (Text) {
-      let result = Text;
-      const matches = Text.match(/<Text>(.*?)<\/text>/gimsy);
-      if (!matches) return Text;
-      for (let match of matches) {
-        let text = extractTextContent(match);
-        let html = this.renderItemHtml(text[0]);
-        result = result.replace(match, html);
-      }
-      return result;
-    },
-    /**
-     * 获取形如<BUFF 110 1 desc>, <ENCHANT 100>的资源字段并转换
-     */
-    renderBuffResource: function () {
-      const matches = this.html.match(/<BUFF (\d+) (\d+) (.*?)>/gim);
-      if (!matches) return;
-      let need_replaces = {};
-      //先统计需要的资源，减少请求数量
-      for (let match of matches) {
-        let [token, id, level, type] = match.match(/<BUFF (\d+) (\d+) (.*?)>/i);
-        let buff_token = `${id}_${level}`;
-        if (!need_replaces[buff_token]) {
-          need_replaces[buff_token] = [];
-        }
-        need_replaces[buff_token].push({
-          token,
-          type,
-        });
-      }
-      //对每一个需要的资源发起请求
-      for (let buff_token in need_replaces) {
-        let token_item = need_replaces[buff_token];
-        getResource(`buff.${buff_token}`, this.client)
-          .then((res) => {
-            let data = res.data;
-            for (let item of token_item) {
-              item.type = item.type.toLowerCase();
-              let type_map = {
-                desc: "Desc",
-                time: "Interval",
-              };
-              let attr = type_map[item.type] || item.type;
-              let value = data[attr];
-              if (typeof value == "number" && item.type == "time") {
-                let time = value / 16;
-                if (time > 60) {
-                  time = `${Math.floor(time / 60)}分钟`;
-                } else {
-                  time = `${time}秒`;
+    methods: {
+        /**
+         * 渲染某一个单独的Text标签成Span或链接
+         * @param {*} school_id
+         * @returns
+         */
+        renderItemHtml: function (item) {
+            let content = item.text;
+            let style = ``;
+            let link = null;
+            content = content.replace(/\\n/g, "<br />").replace(/\\/g, "");
+            if ([item.r, item.g, item.b].every(v => v != undefined && v > 0)) {
+                style = `color: rgb(${item.r}, ${item.g}, ${item.b});`;
+            } else if (item.font != undefined && item.font != 100) {
+                const fonts = require("../assets/data/game_font.json");
+                for (let color in fonts) {
+                    if (fonts[color].includes(item.font)) {
+                        style = `color: ${color};`;
+                        break;
+                    }
                 }
-                this.html = this.html.replace(item.token, time);
-                return;
-              }
-              if (!value) return;
-              let _matches = value.match(/<BUFF ([0-9a-zA-Z]+)>/gi);
-              if (!_matches) this.html = this.html.replace(match, value);
-              for (let _match of _matches) {
-                let [, _attr] = _match.match(/<BUFF ([0-9a-zA-Z]+)>/i);
-                for (let i = 1; i < 15; i++) {
-                  if (data[`BeginAttrib${i}`] == _attr) {
-                    value = value.replace(_match, data[`BeginValue${i}A`]);
-                  }
+            }
+            if (item.name == "iteminfolink" && item.script) {
+                let item_type = item.script?.match(
+                    /this\.dwTabType=(\d+)/i
+                )?.[1];
+                let item_index =
+                    item.script?.match(/this\.dwIndex=(\d+)/i)?.[1];
+                if (item_type && item_index) {
+                    let item_id = `${item_type}_${item_index}`;
+                    link = getLink("item", item_id);
                 }
-              }
-              this.html = this.html.replace(item.token, value);
             }
-          })
-          .catch((err) => {
-            console.log(err);
-          });
-      }
-    },
-    renderEnchantResource: function () {
-      const matches = this.html.match(/<ENCHANT (\d+)>/gim);
-      if(!matches) return;
-      for (let match of matches) {
-        let enchant_id = match.match(/<ENCHANT (\d+)>/i)[1];
-        getResource(`enchant.${enchant_id}`, this.client)
-          .then((res) => {
-            let data = res.data;
-            let time = data.Time;
-            if (time) time = `，持续${parseInt(time) / 60}分钟。`;
-            let result = `${data.AttriName}${time ? time : ""}`;
-            this.html = this.html.replace(match, result);
-          })
-          .catch((err) => {
-            this.html = this.html.replace(match, escape(match));
-            console.log(err);
-          });
-      }
-    },
-    renderResource: function () {
-      this.renderBuffResource();
-      this.renderEnchantResource();
+            if (link) {
+                return `<a style="${style} text-decoration: none;" target="_blank" href="${link}">${content}</a>`;
+            } else {
+                return `<span style="${style}">${content}</span>`;
+            }
+        },
+        /**
+         * 将image标签转换为HTML标签
+         */
+        renderImageHtml: function (Text) {
+            // <image>path="fromiconid" frame=1241 w=29 h=29 </image>
+            let matches = Text.match(/<image>(.*?)<\/image>/gims);
+            console.log(Text, matches);
+            if (!matches) return Text;
+            for (let match of matches) {
+                let icon_id = match.match(/frame=(\d+)/i)?.[1];
+                let w = parseInt(match.match(/w=(\d+)/i)?.[1]) / 1.12;
+                let h = parseInt(match.match(/h=(\d+)/i)?.[1]) / 1.12;
+                let src = `https://icon.jx3box.com/icon/${icon_id}.png`;
+                let html = `<img src="${src}" style="width: ${w}px; height: ${h}px; margin-bottom: -5px" />`;
+                Text = Text.replace(match, html);
+            }
+            return Text;
+        },
+        /**
+         * 将一段游戏内文本转换为Html
+         * @param {Object[]} texts 标签对象
+         */
+        renderTextHtml: function (Text) {
+            let result = Text;
+            result = this.renderImageHtml(result);
+            const matches = Text.match(/<Text>(.*?)<\/text>/gims);
+            if (!matches) return Text;
+            for (let match of matches) {
+                let text = extractTextContent(match);
+                let html = this.renderItemHtml(text[0]);
+                result = result.replace(match, html);
+            }
+            return result;
+        },
+        /**
+         * 获取形如<BUFF 110 1 desc>, <ENCHANT 100>的资源字段并转换
+         */
+        renderBuffResource: function () {
+            const matches = this.html.match(/<BUFF (\d+) (\d+) (.*?)>/gim);
+            if (!matches) return;
+            let need_replaces = {};
+            //先统计需要的资源，减少请求数量
+            for (let match of matches) {
+                let [token, id, level, type] = match.match(
+                    /<BUFF (\d+) (\d+) (.*?)>/i
+                );
+                let buff_token = `${id}_${level}`;
+                if (!need_replaces[buff_token]) {
+                    need_replaces[buff_token] = [];
+                }
+                need_replaces[buff_token].push({
+                    token,
+                    type,
+                });
+            }
+            //对每一个需要的资源发起请求
+            for (let buff_token in need_replaces) {
+                let token_item = need_replaces[buff_token];
+                getResource(`buff.${buff_token}`, this.client)
+                    .then(res => {
+                        let data = res.data;
+                        for (let item of token_item) {
+                            item.type = item.type.toLowerCase();
+                            let type_map = {
+                                desc: "Desc",
+                                time: "Interval",
+                            };
+                            let attr = type_map[item.type] || item.type;
+                            let value = data[attr];
+                            if (
+                                typeof value == "number" &&
+                                item.type == "time"
+                            ) {
+                                let time = value / 16;
+                                if (time > 60) {
+                                    time = `${Math.floor(time / 60)}分钟`;
+                                } else {
+                                    time = `${time}秒`;
+                                }
+                                this.html = this.html.replace(item.token, time);
+                                return;
+                            }
+                            if (!value) return;
+                            let _matches = value.match(
+                                /<BUFF ([0-9a-zA-Z]+)>/gi
+                            );
+                            if (!_matches)
+                                this.html = this.html.replace(match, value);
+                            for (let _match of _matches) {
+                                let [, _attr] = _match.match(
+                                    /<BUFF ([0-9a-zA-Z]+)>/i
+                                );
+                                for (let i = 1; i < 15; i++) {
+                                    if (data[`BeginAttrib${i}`] == _attr) {
+                                        value = value.replace(
+                                            _match,
+                                            data[`BeginValue${i}A`]
+                                        );
+                                    }
+                                }
+                            }
+                            this.html = this.html.replace(item.token, value);
+                        }
+                    })
+                    .catch(err => {
+                        console.log(err);
+                    });
+            }
+        },
+        renderEnchantResource: function () {
+            const matches = this.html.match(/<ENCHANT (\d+)>/gim);
+            if (!matches) return;
+            for (let match of matches) {
+                let enchant_id = match.match(/<ENCHANT (\d+)>/i)[1];
+                getResource(`enchant.${enchant_id}`, this.client)
+                    .then(res => {
+                        let data = res.data;
+                        let time = data.Time;
+                        if (time) time = `，持续${parseInt(time) / 60}分钟。`;
+                        let result = `${data.AttriName}${time ? time : ""}`;
+                        this.html = this.html.replace(match, result);
+                    })
+                    .catch(err => {
+                        this.html = this.html.replace(match, escape(match));
+                        console.log(err);
+                    });
+            }
+        },
+        renderResource: function () {
+            this.renderBuffResource();
+            this.renderEnchantResource();
+        },
     },
-  },
-  watch: {
-    text: {
-      immediate: true,
-      handler: function (val) {
-        this.html = this.renderTextHtml(val);
-        this.renderResource();
-      },
+    watch: {
+        text: {
+            immediate: true,
+            handler: function (val) {
+                if (!val) return;
+                this.html = this.renderTextHtml(val);
+                this.renderResource();
+            },
+        },
     },
-  },
 };
 </script>
 
-<style>
-</style>
+<style></style>

package/src/Item.vue

@@ -63,7 +63,7 @@
                         <div class="u-horse-desc" v-html="attribute.label"></div>
                     </span>
                     <span v-else class="u-value">
-                        <span v-text="attribute.label"></span>
+                        <game-text :text="attribute.label"></game-text>
                         <!-- <span
                             class="u-yellow"
                             v-text="
@@ -176,9 +176,9 @@
             </div>
             <!-- 描述 -->
             <p 
-                v-if="source.DescHtml"
+                v-if="source.Desc"
                 class="u-desc u-yellow">
-                <game-text :client="client" :text="source.DescHtml || source.Desc"></game-text>
+                <game-text :client="client" :text="source.Desc"></game-text>
             </p>
             <!-- 五彩石属性 -->
             <p v-if="source.WuCaiHtml" class="u-desc" v-html="source.WuCaiHtml"></p>

package/src/Resource.vue

@@ -102,7 +102,9 @@
                                     <span class="u-id">ID:{{ o.id }}</span>
                                     <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
                                     <span class="u-name">{{ o.Name }}</span>
-                                    <span class="u-content" v-html="o.DescHtml"></span>
+                                    <span class="u-content">
+                                        <game-text :text="o.Desc"></game-text>
+                                    </span>
                                     <span class="u-remark">
                                         {{ o.Requirement }}
                                     </span>
@@ -202,6 +204,7 @@ import { loadEmotions } from "../service/cms";
 import { __ossRoot, __iconPath, __Root, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
 import detach_types from "../assets/data/detach_type.json";
 import { iconLink, getLink, showAvatar } from "@jx3box/jx3box-common/js/utils";
+import GameText from "./GameText.vue";
 import User from "@jx3box/jx3box-common/js/user";
 import Item from './Item.vue';
 export default {
@@ -287,7 +290,7 @@ export default {
         },
         canInsertAuthor: function() {
             return User.getLevel(this.userInfo && this.userInfo.experience) >= 2;
-        },
+        }
     },
     watch: {
         html: function(newval) {
@@ -502,7 +505,8 @@ export default {
         this.checkUA();
     },
     components: {
-        'jx3-item': Item
+        'jx3-item': Item,
+        GameText
     },
 };
 </script>