@jx3box/jx3box-editor 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
.c-markdown {
|
|
2
|
+
.markdown-body .hljs {
|
|
3
|
+
background-color: #f6f8fa;
|
|
4
|
+
}
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
.c-article-markdown {
|
|
8
|
+
@import "module/video.less";
|
|
9
|
+
|
|
10
|
+
@import 'module/macro.less';
|
|
11
|
+
@import 'module/qixue.less';
|
|
12
|
+
|
|
13
|
+
@import 'module/jx3_element.less';
|
|
14
|
+
@import 'module/buff.less';
|
|
15
|
+
@import 'module/skill.less';
|
|
16
|
+
@import 'module/icon.less';
|
|
17
|
+
@import 'module/resource.less';
|
|
18
|
+
}
|
package/package.json
CHANGED
|
@@ -1,76 +1,77 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
2
|
+
"name": "@jx3box/jx3box-editor",
|
|
3
|
+
"version": "1.0.1",
|
|
4
|
+
"description": "JX3BOX Article & Editor",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"dev": "env DEV_SERVER=true vue-cli-service serve",
|
|
8
|
+
"serve": "vue-cli-service serve",
|
|
9
|
+
"build": "vue-cli-service build",
|
|
10
|
+
"lint": "vue-cli-service lint",
|
|
11
|
+
"inspect": "vue inspect > output.js",
|
|
12
|
+
"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",
|
|
13
|
+
"article": "vue-cli-service build --target lib --name jx3box_article src/Article.vue --mode production",
|
|
14
|
+
"tinymce": "vue-cli-service build --target lib --name tinymce src/Tinymce.vue && cp public/tinymce.html dist/tinymce.html"
|
|
15
|
+
},
|
|
16
|
+
"eslintConfig": {
|
|
17
|
+
"root": true,
|
|
18
|
+
"env": {
|
|
19
|
+
"node": true
|
|
15
20
|
},
|
|
16
|
-
"
|
|
17
|
-
|
|
18
|
-
"env": {
|
|
19
|
-
"node": true
|
|
20
|
-
},
|
|
21
|
-
"extends": [
|
|
22
|
-
"plugin:vue/essential"
|
|
23
|
-
],
|
|
24
|
-
"rules": {},
|
|
25
|
-
"parserOptions": {
|
|
26
|
-
"parser": "babel-eslint"
|
|
27
|
-
}
|
|
28
|
-
},
|
|
29
|
-
"browserslist": [
|
|
30
|
-
"> 1%",
|
|
31
|
-
"last 2 versions"
|
|
21
|
+
"extends": [
|
|
22
|
+
"plugin:vue/essential"
|
|
32
23
|
],
|
|
33
|
-
"
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"@jx3box/jx3box-emotion": "^1.0.10",
|
|
37
|
-
"@jx3box/jx3box-macro": "^1.0.1",
|
|
38
|
-
"@jx3box/jx3box-talent": "^1.1.2",
|
|
39
|
-
"@jx3box/markdown": "0.0.8",
|
|
40
|
-
"@tinymce/tinymce-vue": "^3.2.2",
|
|
41
|
-
"axios": "^0.19.2",
|
|
42
|
-
"core-js": "^3.6.5",
|
|
43
|
-
"csslab": "^4.0.3",
|
|
44
|
-
"element-ui": "^2.13.2",
|
|
45
|
-
"hevue-img-preview": "^5.0.0",
|
|
46
|
-
"jquery": "^3.5.1",
|
|
47
|
-
"js-base64": "^3.6.1",
|
|
48
|
-
"katex": "^0.13.0",
|
|
49
|
-
"lodash": "^4.17.15",
|
|
50
|
-
"photoswipe": "^4.1.2",
|
|
51
|
-
"prismjs": "^1.20.0",
|
|
52
|
-
"vue": "^2.6.11",
|
|
53
|
-
"vue-gallery-slideshow": "^1.5.2",
|
|
54
|
-
"vue-photoswipe.js": "^2.0.23",
|
|
55
|
-
"xss": "^1.0.8"
|
|
56
|
-
},
|
|
57
|
-
"devDependencies": {
|
|
58
|
-
"@vue/cli-plugin-babel": "~4.3.0",
|
|
59
|
-
"@vue/cli-plugin-eslint": "~4.3.0",
|
|
60
|
-
"@vue/cli-plugin-vuex": "^4.0.0",
|
|
61
|
-
"@vue/cli-service": "~4.3.0",
|
|
62
|
-
"babel-eslint": "^10.1.0",
|
|
63
|
-
"eslint": "^6.7.2",
|
|
64
|
-
"eslint-plugin-vue": "^6.2.2",
|
|
65
|
-
"less": "^3.0.4",
|
|
66
|
-
"less-loader": "^5.0.0",
|
|
67
|
-
"style-resources-loader": "^1.3.3",
|
|
68
|
-
"vue-cli-plugin-element": "~1.0.1",
|
|
69
|
-
"vue-svg-inline-loader": "^1.4.6",
|
|
70
|
-
"vue-template-compiler": "^2.6.11"
|
|
71
|
-
},
|
|
72
|
-
"repository": {
|
|
73
|
-
"type": "git",
|
|
74
|
-
"url": "git+https://github.com/JX3BOX/jx3box-editor.git"
|
|
24
|
+
"rules": {},
|
|
25
|
+
"parserOptions": {
|
|
26
|
+
"parser": "babel-eslint"
|
|
75
27
|
}
|
|
28
|
+
},
|
|
29
|
+
"browserslist": [
|
|
30
|
+
"> 1%",
|
|
31
|
+
"last 2 versions"
|
|
32
|
+
],
|
|
33
|
+
"dependencies": {
|
|
34
|
+
"@jx3box/jx3box-common": "^6.7.2",
|
|
35
|
+
"@jx3box/jx3box-data": "^1.8.3",
|
|
36
|
+
"@jx3box/jx3box-emotion": "^1.0.10",
|
|
37
|
+
"@jx3box/jx3box-macro": "^1.0.1",
|
|
38
|
+
"@jx3box/jx3box-talent": "^1.1.2",
|
|
39
|
+
"@jx3box/markdown": "0.0.8",
|
|
40
|
+
"@tinymce/tinymce-vue": "^3.2.2",
|
|
41
|
+
"axios": "^0.19.2",
|
|
42
|
+
"core-js": "^3.6.5",
|
|
43
|
+
"csslab": "^4.0.3",
|
|
44
|
+
"element-ui": "^2.13.2",
|
|
45
|
+
"hevue-img-preview": "^5.0.0",
|
|
46
|
+
"jquery": "^3.5.1",
|
|
47
|
+
"js-base64": "^3.6.1",
|
|
48
|
+
"katex": "^0.13.0",
|
|
49
|
+
"lodash": "^4.17.15",
|
|
50
|
+
"photoswipe": "^4.1.2",
|
|
51
|
+
"prismjs": "^1.20.0",
|
|
52
|
+
"vue": "^2.6.11",
|
|
53
|
+
"vue-gallery-slideshow": "^1.5.2",
|
|
54
|
+
"vue-photoswipe.js": "^2.0.23",
|
|
55
|
+
"xss": "^1.0.8"
|
|
56
|
+
},
|
|
57
|
+
"devDependencies": {
|
|
58
|
+
"@babel/plugin-proposal-optional-chaining": "^7.16.5",
|
|
59
|
+
"@vue/cli-plugin-babel": "~4.3.0",
|
|
60
|
+
"@vue/cli-plugin-eslint": "~4.3.0",
|
|
61
|
+
"@vue/cli-plugin-vuex": "^4.0.0",
|
|
62
|
+
"@vue/cli-service": "~4.3.0",
|
|
63
|
+
"babel-eslint": "^10.1.0",
|
|
64
|
+
"eslint": "^6.7.2",
|
|
65
|
+
"eslint-plugin-vue": "^6.2.2",
|
|
66
|
+
"less": "^3.0.4",
|
|
67
|
+
"less-loader": "^5.0.0",
|
|
68
|
+
"style-resources-loader": "^1.3.3",
|
|
69
|
+
"vue-cli-plugin-element": "~1.0.1",
|
|
70
|
+
"vue-svg-inline-loader": "^1.4.6",
|
|
71
|
+
"vue-template-compiler": "^2.6.11"
|
|
72
|
+
},
|
|
73
|
+
"repository": {
|
|
74
|
+
"type": "git",
|
|
75
|
+
"url": "git+https://github.com/JX3BOX/jx3box-editor.git"
|
|
76
|
+
}
|
|
76
77
|
}
|
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="c-article-markdown">
|
|
3
|
+
<mavon-editor class="c-markdown" ref="article" v-model="origin" :editable="false" :navigation="false" @change="updateOrigin" :subfield="false" :readOnly="true"></mavon-editor>
|
|
4
|
+
<div class="w-jx3-element-pop" :style="jx3_element.style">
|
|
5
|
+
<jx3-item :item_id="item.id" :jx3ClientType="item.client" v-show="jx3_element.type == 'item'" />
|
|
6
|
+
<jx3-buff :client="buff.client" :id="buff.id" :level="buff.level" v-show="jx3_element.type == 'buff'" />
|
|
7
|
+
<jx3-skill :client="skill.client" :id="skill.id" :level="skill.level" v-show="jx3_element.type == 'skill'" />
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
</template>
|
|
11
|
+
|
|
12
|
+
<script>
|
|
13
|
+
// 基本文本
|
|
14
|
+
import execLazyload from "../assets/js/img";
|
|
15
|
+
import execFilterIframe from "../assets/js/iframe";
|
|
16
|
+
import execFilterLink from "../assets/js/a";
|
|
17
|
+
import execFilterXSS from "../assets/js/script";
|
|
18
|
+
|
|
19
|
+
// 扩展文本
|
|
20
|
+
import renderDirectory from "../assets/js/directory";
|
|
21
|
+
import renderMacro from "../assets/js/macro";
|
|
22
|
+
import renderTalent from "../assets/js/qixue";
|
|
23
|
+
import renderTalent2 from "../assets/js/talent2";
|
|
24
|
+
|
|
25
|
+
// 剑三
|
|
26
|
+
import Item from "./Item";
|
|
27
|
+
import Buff from "./Buff";
|
|
28
|
+
import Skill from "./Skill";
|
|
29
|
+
import renderJx3Element from "../assets/js/jx3_element";
|
|
30
|
+
|
|
31
|
+
export default {
|
|
32
|
+
name: "ArticleMarkdown",
|
|
33
|
+
props: {
|
|
34
|
+
content: String,
|
|
35
|
+
directorybox: String,
|
|
36
|
+
},
|
|
37
|
+
data: function() {
|
|
38
|
+
return {
|
|
39
|
+
// 原始md
|
|
40
|
+
origin : '',
|
|
41
|
+
// 原始渲染md后的html
|
|
42
|
+
html: "",
|
|
43
|
+
// 文本处理后的html
|
|
44
|
+
data: "",
|
|
45
|
+
|
|
46
|
+
// 物品
|
|
47
|
+
item: {
|
|
48
|
+
id: "",
|
|
49
|
+
client: 1,
|
|
50
|
+
},
|
|
51
|
+
// BUFF
|
|
52
|
+
buff: {
|
|
53
|
+
client: "std",
|
|
54
|
+
id: "",
|
|
55
|
+
level: "",
|
|
56
|
+
},
|
|
57
|
+
// SKILL
|
|
58
|
+
skill: {
|
|
59
|
+
client: "std",
|
|
60
|
+
id: "",
|
|
61
|
+
level: "",
|
|
62
|
+
},
|
|
63
|
+
jx3_element: {
|
|
64
|
+
style: {
|
|
65
|
+
top: 0,
|
|
66
|
+
left: 0,
|
|
67
|
+
display: "none",
|
|
68
|
+
},
|
|
69
|
+
type: "",
|
|
70
|
+
},
|
|
71
|
+
};
|
|
72
|
+
},
|
|
73
|
+
computed: {
|
|
74
|
+
},
|
|
75
|
+
methods: {
|
|
76
|
+
doReg: function(data) {
|
|
77
|
+
if (data) {
|
|
78
|
+
// 过滤内容
|
|
79
|
+
data = execLazyload(data);
|
|
80
|
+
data = execFilterIframe(data);
|
|
81
|
+
data = execFilterXSS(data);
|
|
82
|
+
data = execFilterLink(data);
|
|
83
|
+
return data;
|
|
84
|
+
} else {
|
|
85
|
+
return "";
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
doDOM: function($root) {
|
|
89
|
+
// 宏
|
|
90
|
+
renderMacro();
|
|
91
|
+
// 奇穴
|
|
92
|
+
renderTalent();
|
|
93
|
+
renderTalent2();
|
|
94
|
+
// 物品
|
|
95
|
+
renderJx3Element(this);
|
|
96
|
+
},
|
|
97
|
+
doDir: function() {
|
|
98
|
+
// 显示局部
|
|
99
|
+
let target = "";
|
|
100
|
+
if (this.hasPages && !this.all) {
|
|
101
|
+
target = "#c-article-part" + this.page;
|
|
102
|
+
// 全部
|
|
103
|
+
} else {
|
|
104
|
+
target = "#c-article";
|
|
105
|
+
}
|
|
106
|
+
let dir = renderDirectory(target, this.directorybox);
|
|
107
|
+
if (dir) this.$emit("directoryRendered");
|
|
108
|
+
},
|
|
109
|
+
updateOrigin : function (md,html){
|
|
110
|
+
this.html = html
|
|
111
|
+
this.render()
|
|
112
|
+
},
|
|
113
|
+
render: function() {
|
|
114
|
+
let result = this.doReg(this.html);
|
|
115
|
+
this.data = result;
|
|
116
|
+
},
|
|
117
|
+
run: function() {
|
|
118
|
+
this.render();
|
|
119
|
+
|
|
120
|
+
// 等待html加载完毕后
|
|
121
|
+
this.$nextTick(() => {
|
|
122
|
+
this.$emit("contentLoaded");
|
|
123
|
+
|
|
124
|
+
// 统一DOM处理
|
|
125
|
+
const $root = this.$refs.article;
|
|
126
|
+
this.doDOM($root);
|
|
127
|
+
this.$emit("contentRendered");
|
|
128
|
+
|
|
129
|
+
// 目录处理
|
|
130
|
+
this.doDir();
|
|
131
|
+
});
|
|
132
|
+
},
|
|
133
|
+
},
|
|
134
|
+
watch: {
|
|
135
|
+
content : {
|
|
136
|
+
immediate : true,
|
|
137
|
+
handler : function (val){
|
|
138
|
+
this.origin = val
|
|
139
|
+
}
|
|
140
|
+
}
|
|
141
|
+
},
|
|
142
|
+
mounted: function() {
|
|
143
|
+
},
|
|
144
|
+
components: {
|
|
145
|
+
"jx3-item": Item,
|
|
146
|
+
"jx3-buff": Buff,
|
|
147
|
+
"jx3-skill": Skill,
|
|
148
|
+
},
|
|
149
|
+
};
|
|
150
|
+
</script>
|
|
151
|
+
|
|
152
|
+
<style lang="less">
|
|
153
|
+
@import "../assets/css/article_markdown.less";
|
|
154
|
+
</style>
|
package/vue.config.js
CHANGED
|
@@ -24,6 +24,12 @@ module.exports = {
|
|
|
24
24
|
template : 'public/article.html',
|
|
25
25
|
filename:'markdown/index.html',
|
|
26
26
|
},
|
|
27
|
+
article_markdown : {
|
|
28
|
+
title : 'Markdown文章内容渲染',
|
|
29
|
+
entry:'demo/MarkdownArticleDemo.js',
|
|
30
|
+
template : 'public/article.html',
|
|
31
|
+
filename:'index.html',
|
|
32
|
+
},
|
|
27
33
|
},
|
|
28
34
|
|
|
29
35
|
|
|
File without changes
|
|
File without changes
|