@jx3box/jx3box-editor 0.9.5 → 1.0.0

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.
Files changed (10) hide show
  1. package/assets/css/markdown.less +28 -7
  2. package/assets/css/tinymce.less +16 -15
  3. package/docs/markdown.md +16 -0
  4. package/package.json +2 -2
  5. package/src/Markdown.vue +59 -5
  6. package/src/Resource.vue +79 -182
  7. package/src/Tinymce.vue +10 -2
  8. package/src/Upload.vue +38 -51
  9. package/src/components/article/render_markdown.vue +0 -0
  10. package/src/components/article/render_tinymce.vue +0 -0
package/assets/css/markdown.less CHANGED
@@ -1,19 +1,40 @@
1
- .c-markdown-toolbar-item{
1
+ .c-editor-header {
2
+ .mb(10px);
3
+ .clearfix;
4
+
5
+ .c-upload,
6
+ .c-resource {
7
+ .fl;
8
+ }
9
+ .c-upload {
10
+ .mr(5px);
11
+ }
12
+ }
13
+
14
+ .c-markdown{
15
+ .h(780px);
16
+ .v-note-wrapper{
17
+ .h(780px);
18
+ .z(1);
19
+ }
20
+ }
21
+
22
+ .c-markdown-toolbar-item {
2
23
  .mr(5px);
3
24
  .pointer;
4
25
  padding: 2px 5px 3px 5px;
5
26
 
6
- &:hover{
27
+ &:hover {
7
28
  background: #e9e9eb;
8
29
  .r(4px);
9
30
  }
10
31
  }
11
- .c-markdown-store-item{
32
+ .c-markdown-store-item {
12
33
  .none;
13
34
  }
14
35
 
15
- .c-markdown{
16
- .markdown-body .hljs{
17
- background-color:#f6f8fa;
36
+ .c-markdown {
37
+ .markdown-body .hljs {
38
+ background-color: #f6f8fa;
18
39
  }
19
- }
40
+ }
package/assets/css/tinymce.less CHANGED
@@ -1,21 +1,22 @@
1
- .c-editor-tinymce {
2
-
3
- .c-editor-header{
4
- .mb(10px);
5
- .clearfix;
1
+ .c-editor-header{
2
+ .mb(10px);
3
+ .clearfix;
6
4
 
7
- .c-upload,.c-resource{
8
- .fl;
9
- }
10
- .c-upload{
11
- .mr(5px);
12
- }
5
+ .c-upload,.c-resource{
6
+ .fl;
13
7
  }
14
-
15
- .c-editor-emotion{
16
- max-height: 168px;
17
- overflow: auto;
8
+ .c-upload{
9
+ .mr(5px);
18
10
  }
11
+ }
12
+
13
+ .c-editor-emotion{
14
+ max-height: 168px;
15
+ overflow: auto;
16
+ }
17
+
18
+ .c-editor-tinymce {
19
+
19
20
 
20
21
  .u-tutorial {
21
22
  padding:0 10px;
package/docs/markdown.md ADDED
@@ -0,0 +1,16 @@
1
+ ## Markdown
2
+
3
+ 这组件真是垃圾，有时间我一定自己重写一个。。。
4
+
5
+
6
+ ## main.js引入
7
+ ```javascript
8
+ import mavonEditor from "@jx3box/markdown";
9
+ import "@jx3box/markdown/dist/css/index.css";
10
+ Vue.use(mavonEditor)
11
+ ```
12
+
13
+ ## 封装模块引入
14
+ ```javascript
15
+ import Markdown from '@jx3box/jx3box-editor/src/Markdown.vue'
16
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@jx3box/jx3box-editor",
3
- "version": "0.9.5",
3
+ "version": "1.0.0",
4
4
  "description": "JX3BOX Article & Editor",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -36,7 +36,7 @@
36
36
  "@jx3box/jx3box-emotion": "^1.0.10",
37
37
  "@jx3box/jx3box-macro": "^1.0.1",
38
38
  "@jx3box/jx3box-talent": "^1.1.2",
39
- "@jx3box/markdown": "0.0.7",
39
+ "@jx3box/markdown": "0.0.8",
40
40
  "@tinymce/tinymce-vue": "^3.2.2",
41
41
  "axios": "^0.19.2",
42
42
  "core-js": "^3.6.5",
package/src/Markdown.vue CHANGED
@@ -1,17 +1,31 @@
1
1
  <template>
2
- <div class="c-markdown">
3
- <input class="c-markdown-store-item" id="c-markdown-store-images" type="file" @change="uploadImages" ref="markdownImages" multiple :accept="allow_image_types" />
4
- <input class="c-markdown-store-item" id="c-markdown-store-files" type="file" @change="uploadFiles" ref="markdownFiles" multiple />
5
- <mavon-editor class="c-markdown-box" ref="md" v-model="data" :editable="editable" :navigation="false" @change="updateData">
2
+ <div class="c-editor-markdown">
3
+
4
+ <slot name="prepend"></slot>
5
+
6
+ <div class="c-editor-header">
7
+ <Upload v-if="attachmentEnable" @insert="insertAttachments" :enable="true" />
8
+ <Resource v-if="resourceEnable" @insert="insertResource" :enable="false" />
9
+ </div>
10
+
11
+ <slot></slot>
12
+
13
+ <mavon-editor class="c-markdown" ref="md" v-model="data" :editable="editable" :navigation="false" @change="updateData" :subfield="false" :readOnly="readOnly">
6
14
  <template slot="left-toolbar-after">
7
15
  <span class="c-markdown-toolbar-image c-markdown-toolbar-item" title="上传图片" @click="selectImages"><i class="el-icon-picture-outline-round"></i></span>
8
16
  <span class="c-markdown-toolbar-file c-markdown-toolbar-item" title="上传附件" @click="selectFiles"><i class="el-icon-paperclip"></i></span>
9
17
  </template>
10
18
  </mavon-editor>
19
+ <input class="c-markdown-store-item" id="c-markdown-store-images" type="file" @change="uploadImages" ref="markdownImages" multiple :accept="allow_image_types" />
20
+ <input class="c-markdown-store-item" id="c-markdown-store-files" type="file" @change="uploadFiles" ref="markdownFiles" multiple />
21
+
22
+ <slot name="append"></slot>
11
23
  </div>
12
24
  </template>
13
25
 
14
26
  <script>
27
+ import Upload from "./Upload";
28
+ import Resource from "./Resource";
15
29
  import { uploadFile } from "../service/cms";
16
30
  export default {
17
31
  name: "Markdown",
@@ -23,8 +37,23 @@ export default {
23
37
  type: Boolean,
24
38
  default: true,
25
39
  },
40
+ attachmentEnable: {
41
+ type: Boolean,
42
+ default: true,
43
+ },
44
+ resourceEnable: {
45
+ type: Boolean,
46
+ default: true,
47
+ },
48
+ readOnly : {
49
+ type : Boolean,
50
+ default : false,
51
+ }
52
+ },
53
+ components: {
54
+ Upload,
55
+ Resource,
26
56
  },
27
- components: {},
28
57
  data: function() {
29
58
  return {
30
59
  data: this.content,
@@ -138,6 +167,31 @@ export default {
138
167
  render,
139
168
  });
140
169
  },
170
+ // 插入附件
171
+ insertAttachments: function(data) {
172
+ let list = data?.list || []
173
+ for(let item of list){
174
+ // 插入图片
175
+ if (item.is_img) {
176
+ this.$md.insertText(this.$md.getTextareaDom(), {
177
+ prefix: `![${item.name}](${item.url})`,
178
+ subfix: "",
179
+ str: "",
180
+ });
181
+ // 插入文字链接
182
+ } else {
183
+ this.$md.insertText(this.$md.getTextareaDom(), {
184
+ prefix: `[${item.name}](${item.url})`,
185
+ subfix: "",
186
+ str: "",
187
+ });
188
+ }
189
+ }
190
+ },
191
+ insertResource: function(data) {
192
+ // TODO:
193
+ // tinyMCE.editors["tinymce"].insertContent(data);
194
+ },
141
195
  },
142
196
  filters: {},
143
197
  created: function() {},
package/src/Resource.vue CHANGED
@@ -1,9 +1,7 @@
1
1
  <template>
2
2
  <div class="c-resource">
3
3
  <!-- 上传触发按钮 -->
4
- <el-button class="u-switch" type="primary" @click="dialogVisible = true">
5
- <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />剑三资源
6
- </el-button>
4
+ <el-button class="u-switch" type="primary" @click="openDialog" :disabled="!enable"> <img class="u-icon" svg-inline src="../assets/img/jx3.svg" />剑三资源 </el-button>
7
5
 
8
6
  <!-- 弹出界面 -->
9
7
  <el-dialog class="c-large-dialog" title="剑三数据库" :visible.sync="dialogVisible">
@@ -13,21 +11,10 @@
13
11
  <el-radio-button label="std">正式服</el-radio-button>
14
12
  <el-radio-button label="origin">怀旧服</el-radio-button>
15
13
  </el-radio-group>
16
- <el-input
17
- class="u-input"
18
- placeholder="请输入 ID 或 名称"
19
- v-model="query"
20
- @change="search"
21
- @keyup.enter.native="search"
22
- >
14
+ <el-input class="u-input" placeholder="请输入 ID 或 名称" v-model="query" @change="search" @keyup.enter.native="search">
23
15
  <template slot="prepend">ID ／名称</template>
24
16
  <template slot="append" v-if="isPC">
25
- <el-switch
26
- v-model="strict"
27
- active-text="精确匹配"
28
- @change="search"
29
- title="仅对Buff/Skill有效"
30
- ></el-switch>
17
+ <el-switch v-model="strict" active-text="精确匹配" @change="search" title="仅对Buff/Skill有效"></el-switch>
31
18
  </template>
32
19
  </el-input>
33
20
  </div>
@@ -40,8 +27,7 @@
40
27
  <em class="u-count">{{ stat.buff }}</em>
41
28
  </span>
42
29
  <div v-if="buff.length && done" class="m-resource-count">
43
- <i class="el-icon-s-data"></i> 共找到
44
- <b>{{ buff.length }}</b> 条记录
30
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ buff.length }}</b> 条记录
45
31
  <div class="u-mode">
46
32
  插入模式：
47
33
  <el-radio-group v-model="buff_mode" size="mini" @change="changeMode">
@@ -51,25 +37,12 @@
51
37
  </div>
52
38
  </div>
53
39
  <ul class="m-resource-list">
54
- <li
55
- v-for="(o, i) in buff"
56
- class="u-item"
57
- :key="i"
58
- :class="{ on: !!o.isSelected }"
59
- @click="selectBuff(o, i)"
60
- ref="buff"
61
- >
40
+ <li v-for="(o, i) in buff" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectBuff(o, i)" ref="buff">
62
41
  <span class="u-id">
63
42
  ID:{{ o.BuffID }}
64
- <span
65
- class="u-detach"
66
- >{{o.DetachType | showDetachType}}</span>
43
+ <span class="u-detach">{{ o.DetachType | showDetachType }}</span>
67
44
  </span>
68
- <img
69
- class="u-pic"
70
- :title="'IconID:' + o.IconID"
71
- :src="iconURL(o.IconID)"
72
- />
45
+ <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
73
46
  <span class="u-primary">
74
47
  <span class="u-name">
75
48
  {{ o.Name }}
@@ -79,12 +52,7 @@
79
52
  </span>
80
53
  </li>
81
54
  </ul>
82
- <el-alert
83
- v-if="!buff.length && done"
84
- title="没有找到相关条目"
85
- type="info"
86
- show-icon
87
- ></el-alert>
55
+ <el-alert v-if="!buff.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
88
56
  </el-tab-pane>
89
57
  <el-tab-pane label="技能" name="skill">
90
58
  <span slot="label">
@@ -93,8 +61,7 @@
93
61
  <em class="u-count">{{ stat.skill }}</em>
94
62
  </span>
95
63
  <div v-if="skill.length && done" class="m-resource-count">
96
- <i class="el-icon-s-data"></i> 共找到
97
- <b>{{ skill.length }}</b> 条记录
64
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ skill.length }}</b> 条记录
98
65
  <div class="u-mode">
99
66
  插入模式：
100
67
  <el-radio-group v-model="skill_mode" size="mini" @change="changeMode">
@@ -104,39 +71,21 @@
104
71
  </div>
105
72
  </div>
106
73
  <ul class="m-resource-list">
107
- <li
108
- v-for="(o, i) in skill"
109
- class="u-item"
110
- :key="i"
111
- :class="{ on: !!o.isSelected }"
112
- @click="selectSkill(o, i)"
113
- ref="skill"
114
- >
74
+ <li v-for="(o, i) in skill" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectSkill(o, i)" ref="skill">
115
75
  <span class="u-id">ID:{{ o.SkillID }}</span>
116
- <img
117
- class="u-pic"
118
- :title="'IconID:' + o.IconID"
119
- :src="iconURL(o.IconID)"
120
- />
76
+ <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
121
77
  <span class="u-primary">
122
78
  <span class="u-name">
123
79
  {{ o.Name }}
124
80
  <em v-if="o.SkillName">({{ o.SkillName }})</em>
125
81
  </span>
126
82
  <span class="u-content">
127
- {{
128
- o.Desc | filterRaw
129
- }}
83
+ {{ o.Desc | filterRaw }}
130
84
  </span>
131
85
  </span>
132
86
  </li>
133
87
  </ul>
134
- <el-alert
135
- v-if="!skill.length && done"
136
- title="没有找到相关条目"
137
- type="info"
138
- show-icon
139
- ></el-alert>
88
+ <el-alert v-if="!skill.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
140
89
  </el-tab-pane>
141
90
  <el-tab-pane label="物品" name="item">
142
91
  <span slot="label">
@@ -145,39 +94,20 @@
145
94
  <em class="u-count">{{ stat.item }}</em>
146
95
  </span>
147
96
  <p v-if="item.length && done" class="m-resource-count">
148
- <i class="el-icon-s-data"></i> 共找到
149
- <b>{{ item.length }}</b> 条记录
97
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ item.length }}</b> 条记录
150
98
  </p>
151
99
  <ul class="m-resource-list" v-if="item.length">
152
- <li
153
- v-for="(o, i) in item"
154
- :key="i"
155
- class="u-item"
156
- :class="{ on: o.isSelected }"
157
- @click="selectItem(o, i)"
158
- ref="item"
159
- >
100
+ <li v-for="(o, i) in item" :key="i" class="u-item" :class="{ on: o.isSelected }" @click="selectItem(o, i)" ref="item">
160
101
  <span class="u-id">ID:{{ o.id }}</span>
161
- <img
162
- class="u-pic"
163
- :title="'IconID:' + o.IconID"
164
- :src="iconURL(o.IconID)"
165
- />
102
+ <img class="u-pic" :title="'IconID:' + o.IconID" :src="iconURL(o.IconID)" />
166
103
  <span class="u-name">{{ o.Name }}</span>
167
104
  <span class="u-content" v-html="o.DescHtml"></span>
168
105
  <span class="u-remark">
169
- {{
170
- o.Requirement
171
- }}
106
+ {{ o.Requirement }}
172
107
  </span>
173
108
  </li>
174
109
  </ul>
175
- <el-alert
176
- v-if="!item.length && done"
177
- title="没有找到相关条目"
178
- type="info"
179
- show-icon
180
- ></el-alert>
110
+ <el-alert v-if="!item.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
181
111
  </el-tab-pane>
182
112
  <el-tab-pane label="图标" name="icon">
183
113
  <span slot="label">
@@ -186,18 +116,10 @@
186
116
  <em class="u-count">{{ stat.icon }}</em>
187
117
  </span>
188
118
  <p v-if="icon.length && done" class="m-resource-count">
189
- <i class="el-icon-s-data"></i> 共找到
190
- <b>{{ icon.length }}</b> 条记录
119
+ <i class="el-icon-s-data"></i> 共找到 <b>{{ icon.length }}</b> 条记录
191
120
  </p>
192
121
  <ul class="m-resource-iconlist">
193
- <li
194
- v-for="(o, i) in icon"
195
- class="u-item"
196
- :key="i"
197
- :class="{ on: !!o.isSelected }"
198
- @click="selectIcon(o)"
199
- ref="icon"
200
- >
122
+ <li v-for="(o, i) in icon" class="u-item" :key="i" :class="{ on: !!o.isSelected }" @click="selectIcon(o)" ref="icon">
201
123
  <!-- <el-tooltip
202
124
  effect="dark"
203
125
  :content="o.Name || query"
@@ -207,24 +129,13 @@
207
129
  <!-- </el-tooltip> -->
208
130
  </li>
209
131
  </ul>
210
- <el-alert
211
- v-if="!icon.length && done"
212
- title="没有找到相关条目"
213
- type="info"
214
- show-icon
215
- ></el-alert>
132
+ <el-alert v-if="!icon.length && done" title="没有找到相关条目" type="info" show-icon></el-alert>
216
133
  </el-tab-pane>
217
134
  </el-tabs>
218
135
 
219
136
  <template v-if="multipage">
220
137
  <!-- 下一页 -->
221
- <el-button
222
- class="m-archive-more"
223
- :class="{ show: hasNextPage }"
224
- type="primary"
225
- icon="el-icon-arrow-down"
226
- @click="appendPage"
227
- >加载更多</el-button>
138
+ <el-button class="m-archive-more" :class="{ show: hasNextPage }" type="primary" icon="el-icon-arrow-down" @click="appendPage">加载更多</el-button>
228
139
  <!-- 分页 -->
229
140
  <el-pagination
230
141
  class="m-archive-pages"
@@ -245,9 +156,7 @@
245
156
  <span slot="footer" class="dialog-footer">
246
157
  <el-button @click="dialogVisible = false">取 消</el-button>
247
158
  <el-button type="primary" @click="insert">
248
- {{
249
- buttonTXT
250
- }}
159
+ {{ buttonTXT }}
251
160
  </el-button>
252
161
  </span>
253
162
  </el-dialog>
@@ -257,21 +166,22 @@
257
166
  <script>
258
167
  import axios from "axios";
259
168
  import { loadResource, loadStat, getIcons } from "../service/database";
260
- import {
261
- __ossRoot,
262
- __iconPath,
263
- __Root,
264
- __OriginRoot,
265
- } from "@jx3box/jx3box-common/data/jx3box.json";
169
+ import { __ossRoot, __iconPath, __Root, __OriginRoot } from "@jx3box/jx3box-common/data/jx3box.json";
266
170
  import detach_types from "../assets/data/detach_type.json";
267
171
  import User from "@jx3box/jx3box-common/js/user";
268
172
  import { iconLink } from "@jx3box/jx3box-common/js/utils";
269
173
  export default {
270
174
  name: "Resource",
271
- props: [],
272
- data: function () {
175
+ props: {
176
+ enable: {
177
+ type: Boolean,
178
+ default: true,
179
+ },
180
+ },
181
+ data: function() {
273
182
  return {
274
183
  dialogVisible: false,
184
+ actived: false,
275
185
 
276
186
  type: "buff",
277
187
  query: "",
@@ -309,35 +219,35 @@ export default {
309
219
  };
310
220
  },
311
221
  computed: {
312
- buttonTXT: function () {
222
+ buttonTXT: function() {
313
223
  return this.selectedCount ? "插 入" : "确 定";
314
224
  },
315
- isBlank: function () {
225
+ isBlank: function() {
316
226
  return !this.query && !this[this.type]["length"];
317
227
  },
318
- selectedCount: function () {
228
+ selectedCount: function() {
319
229
  return !!this.html;
320
230
  },
321
- isNumber: function () {
231
+ isNumber: function() {
322
232
  return !isNaN(this.query);
323
233
  },
324
- hasNextPage: function () {
234
+ hasNextPage: function() {
325
235
  return this.total > 1 && this.page < this.pages;
326
236
  },
327
- multipage: function () {
237
+ multipage: function() {
328
238
  return this.type !== "icon" && this.done && this.pages > 1;
329
239
  },
330
- iconDir: function () {
240
+ iconDir: function() {
331
241
  return this.client == "origin" ? "origin_icon" : "icon";
332
242
  },
333
243
  },
334
244
  watch: {
335
- html: function (newval) {
245
+ html: function(newval) {
336
246
  this.$emit("update", newval);
337
247
  },
338
248
  },
339
249
  methods: {
340
- getData: function (page = 1, append = false) {
250
+ getData: function(page = 1, append = false) {
341
251
  if (!this.query) return;
342
252
 
343
253
  this.loading = true;
@@ -396,115 +306,105 @@ export default {
396
306
  });
397
307
  }
398
308
  },
399
- search: function () {
309
+ search: function() {
400
310
  this.getData();
401
311
  },
402
- appendPage: function () {
312
+ appendPage: function() {
403
313
  this.getData(++this.page, true);
404
314
  },
405
- changePage: function (i) {
315
+ changePage: function(i) {
406
316
  this.getData(i);
407
317
  },
408
- changeType: function () {
318
+ changeType: function() {
409
319
  this.page = 1;
410
320
  this.getData();
411
321
  },
412
- insert: function () {
322
+ insert: function() {
413
323
  this.dialogVisible = false;
414
324
  this.$emit("insert", this.html);
415
325
  },
416
- transformData: function (data) {
326
+ transformData: function(data) {
417
327
  data.forEach((item) => {
418
328
  item.isSelected = false;
419
329
  });
420
330
  return data;
421
331
  },
422
- changeMode : function (){
332
+ changeMode: function() {
423
333
  this.resetItems();
424
334
  },
425
- selectBuff: function (o, i) {
335
+ selectBuff: function(o, i) {
426
336
  this.resetItems();
427
337
  o.isSelected = true;
428
338
  if (this.buff_mode == "simple") {
429
339
  // <img src="${this.iconURL(
430
340
  // o.IconID
431
341
  // )}">
432
- this.html = `<a data-type="buff" class="e-jx3-buff w-jx3-element ${
433
- o.CanCancel == 1 ? "isBuff" : "isDebuff"
434
- }" href="${this.getLink(
342
+ this.html = `<a data-type="buff" class="e-jx3-buff w-jx3-element ${o.CanCancel == 1 ? "isBuff" : "isDebuff"}" href="${this.getLink(
435
343
  "buff",
436
344
  this.client,
437
345
  o.BuffID,
438
346
  o.Level
439
- )}" data-client="${this.client}" data-id="${
440
- o.BuffID
441
- }" data-level="${o.Level}">[${o.Name}]</a>`;
347
+ )}" data-client="${this.client}" data-id="${o.BuffID}" data-level="${o.Level}">[${o.Name}]</a>`;
442
348
  } else {
443
- this.html = `<pre data-type="buff" data-id="${
444
- o.BuffID
445
- }" class="e-jx3-resource">${
446
- this.$refs[this.type][i]["innerHTML"]
447
- }</pre>`;
349
+ this.html = `<pre data-type="buff" data-id="${o.BuffID}" class="e-jx3-resource">${this.$refs[this.type][i]["innerHTML"]}</pre>`;
448
350
  }
449
351
  },
450
- selectSkill: function (o, i) {
352
+ selectSkill: function(o, i) {
451
353
  this.resetItems();
452
354
  o.isSelected = true;
453
355
  if (this.skill_mode == "simple") {
454
- this.html = `<a data-type="skill" class="e-jx3-skill w-jx3-element" href="${this.getLink(
455
- "skill",
456
- this.client,
457
- o.SkillID,
458
- o.Level
459
- )}" data-client="${this.client}" data-id="${
356
+ this.html = `<a data-type="skill" class="e-jx3-skill w-jx3-element" href="${this.getLink("skill", this.client, o.SkillID, o.Level)}" data-client="${this.client}" data-id="${
460
357
  o.SkillID
461
358
  }" data-level="${o.Level}">[${o.Name}]</a>`;
462
359
  } else {
463
- this.html = `<pre data-type="skill" data-id="${
464
- o.SkillID
465
- }" class="e-jx3-resource">${
466
- this.$refs[this.type][i]["innerHTML"]
467
- }</pre>`;
360
+ this.html = `<pre data-type="skill" data-id="${o.SkillID}" class="e-jx3-resource">${this.$refs[this.type][i]["innerHTML"]}</pre>`;
468
361
  }
469
362
  },
470
- selectItem: function (o, i) {
363
+ selectItem: function(o, i) {
471
364
  this.resetItems();
472
365
  o.isSelected = true;
473
366
  this.html = `<a data-type="item" class="e-jx3-item e-jx3-item-q${o.Quality} w-jx3-element" data-mode="" data-id="${o.id}" data-quality="${o.Quality}" data-client="${this.client}" target="_blank" href="${o.Link}">[${o.Name}]</a>`;
474
367
  },
475
- selectIcon: function (o) {
368
+ selectIcon: function(o) {
476
369
  this.resetItems();
477
370
  o.isSelected = true;
478
371
  this.html = `<img class="e-jx3-icon" src="${__iconPath}${this.iconDir}/${o.iconID}.png" alt="${o.iconID}"/>`;
479
372
  },
480
- resetItems: function () {
373
+ resetItems: function() {
481
374
  let data = this[this.type];
482
375
  data.forEach((item) => {
483
376
  item.isSelected = false;
484
377
  });
485
- this.html = ''
378
+ this.html = "";
486
379
  },
487
- checkUA: function () {
380
+ checkUA: function() {
488
381
  this.isPC = window.innerWidth > 720;
489
382
  },
490
- iconURL: function (id) {
491
- return iconLink(id,this.client);
383
+ iconURL: function(id) {
384
+ return iconLink(id, this.client);
492
385
  },
493
- getLink: function (type, client, id, level) {
386
+ getLink: function(type, client, id, level) {
494
387
  let domain = client == "origin" ? __OriginRoot : __Root;
495
- return (
496
- domain +
497
- "app/database/?type=" +
498
- type +
499
- `&query=${id}&level=${level}`
500
- );
388
+ return domain + "app/database/?type=" + type + `&query=${id}&level=${level}`;
389
+ },
390
+
391
+ // 杂项
392
+ // ==============================
393
+ openDialog: function() {
394
+ this.dialogVisible = true;
395
+ if (!this.actived) {
396
+ loadStat().then((data) => {
397
+ this.stat = data;
398
+ this.actived = true;
399
+ });
400
+ }
501
401
  },
502
402
  },
503
403
  filters: {
504
- filterRaw: function (str) {
404
+ filterRaw: function(str) {
505
405
  return str && str.replace(/\\n/g, "\n");
506
406
  },
507
- showDetachType: function (val) {
407
+ showDetachType: function(val) {
508
408
  if (val && detach_types[val]) {
509
409
  return detach_types[val];
510
410
  } else {
@@ -512,11 +412,8 @@ export default {
512
412
  }
513
413
  },
514
414
  },
515
- created: function () {
415
+ created: function() {
516
416
  this.checkUA();
517
- loadStat().then((data) => {
518
- this.stat = data;
519
- });
520
417
  },
521
418
  components: {},
522
419
  };
package/src/Tinymce.vue CHANGED
@@ -1,11 +1,16 @@
1
1
  <template>
2
2
  <div class="c-editor-tinymce">
3
+
4
+ <slot name="prepend"></slot>
5
+
3
6
  <div class="c-editor-header">
4
7
  <Upload v-if="attachmentEnable" @insert="insertAttachments" />
5
8
  <Resource v-if="resourceEnable" @insert="insertResource" />
6
- <slot></slot>
7
9
  </div>
8
10
  <Emotion class="c-editor-emotion" @selected="emotionSelected"></Emotion>
11
+
12
+ <slot></slot>
13
+
9
14
  <editor
10
15
  id="tinymce"
11
16
  v-model="data"
@@ -22,6 +27,8 @@
22
27
  >[编辑器使用指南]</a
23
28
  >
24
29
  </el-alert>
30
+
31
+ <slot name="append"></slot>
25
32
  </div>
26
33
  </template>
27
34
 
@@ -157,6 +164,7 @@ export default {
157
164
  // },
158
165
  // ],
159
166
  },
167
+ mode : 'tinymce'
160
168
  };
161
169
  },
162
170
  model: {
@@ -188,7 +196,7 @@ export default {
188
196
  const pathKey = key.slice(1);
189
197
  const IMAGE = `<img class="t-emotion" src="${__ossRoot}image/emotion/${pathKey}.gif" alt="${key}" />`
190
198
  tinyMCE.editors["tinymce"].insertContent(IMAGE)
191
- }
199
+ },
192
200
  },
193
201
  mounted: function() {},
194
202
  components: {
package/src/Upload.vue CHANGED
@@ -1,35 +1,18 @@
1
1
  <template>
2
2
  <div class="c-upload">
3
3
  <!-- 上传触发按钮 -->
4
- <el-button type="primary" @click="dialogVisible = true" icon="el-icon-upload">{{btn_txt}}</el-button>
4
+ <el-button type="primary" @click="dialogVisible = true" icon="el-icon-upload" :disabled="!enable">{{ btn_txt }}</el-button>
5
5
 
6
6
  <!-- 弹出界面 -->
7
7
  <el-dialog class="c-large-dialog" title="上传" :visible.sync="dialogVisible">
8
8
  <!-- 清空按钮 -->
9
- <el-button
10
- class="u-upload-clear"
11
- plain
12
- icon="el-icon-delete"
13
- size="mini"
14
- @click="clear"
15
- >清空</el-button>
9
+ <el-button class="u-upload-clear" plain icon="el-icon-delete" size="mini" @click="clear">清空</el-button>
16
10
 
17
11
  <!-- 限制提示 -->
18
12
  <el-alert class="u-upload-tip" :title="tip" type="info" show-icon :closable="false"></el-alert>
19
13
 
20
14
  <!-- 文件区 -->
21
- <el-upload
22
- :action="API"
23
- list-type="picture-card"
24
- :auto-upload="false"
25
- :limit="10"
26
- multiple
27
- with-credentials
28
- :file-list="fileList"
29
- :on-change="change"
30
- ref="uploadbox"
31
- :accept="accept"
32
- >
15
+ <el-upload :action="API" list-type="picture-card" :auto-upload="false" :limit="10" multiple with-credentials :file-list="fileList" :on-change="change" ref="uploadbox" :accept="accept">
33
16
  <!-- :accept="accept" -->
34
17
  <i slot="default" class="el-icon-plus"></i>
35
18
 
@@ -45,12 +28,7 @@
45
28
  }"
46
29
  >
47
30
  <!-- 图片类型 -->
48
- <img
49
- v-if="file.is_img"
50
- class="el-upload-list__item-thumbnail u-imgbox"
51
- :src="file.url"
52
- alt
53
- />
31
+ <img v-if="file.is_img" class="el-upload-list__item-thumbnail u-imgbox" :src="file.url" alt />
54
32
  <!-- 其他类型 -->
55
33
  <div v-else class="u-filebox">
56
34
  <img class="u-fileplaceholder" svg-inline src="../assets/img/file.svg" />
@@ -67,9 +45,7 @@
67
45
  <span slot="footer" class="dialog-footer">
68
46
  <el-button @click="dialogVisible = false">取 消</el-button>
69
47
  <el-button type="primary" @click="insert">
70
- {{
71
- buttonTXT
72
- }}
48
+ {{ buttonTXT }}
73
49
  </el-button>
74
50
  </span>
75
51
  </el-dialog>
@@ -87,8 +63,25 @@ const imgtypes = ["jpg", "png", "gif", "bmp", "webp"];
87
63
 
88
64
  export default {
89
65
  name: "Upload",
90
- props: ["text",'onlyImage','desc','accept'],
91
- data: function () {
66
+ props: {
67
+ text: {
68
+ type: String,
69
+ },
70
+ onlyImage: {
71
+ type: Boolean,
72
+ },
73
+ desc: {
74
+ type: String,
75
+ },
76
+ accept: {
77
+ type: String,
78
+ },
79
+ enable : {
80
+ type: Boolean,
81
+ default : true,
82
+ }
83
+ },
84
+ data: function() {
92
85
  return {
93
86
  API: API,
94
87
  dialogVisible: false,
@@ -106,21 +99,21 @@ export default {
106
99
  watch: {
107
100
  fileList: {
108
101
  deep: true,
109
- handler: function (newval) {
102
+ handler: function(newval) {
110
103
  this.$emit("update", newval);
111
104
  },
112
105
  },
113
- insertList: function (newval) {
106
+ insertList: function(newval) {
114
107
  this.$emit("htmlUpdate", newval);
115
108
  },
116
109
  },
117
110
  computed: {
118
- buttonTXT: function () {
111
+ buttonTXT: function() {
119
112
  return this.selectedCount ? "插 入" : "确 定";
120
113
  },
121
114
  },
122
115
  methods: {
123
- change: function (file, fileList) {
116
+ change: function(file, fileList) {
124
117
  if (file.status != "success") {
125
118
  // 判断大小
126
119
  // if (file.size > this.sizeLimit) {
@@ -133,7 +126,7 @@ export default {
133
126
  let ext = file.name.split(".").pop();
134
127
  let is_img = imgtypes.includes(ext);
135
128
 
136
- if(this.onlyImage && !is_img) return
129
+ if (this.onlyImage && !is_img) return;
137
130
 
138
131
  // 构建数据
139
132
  let fdata = new FormData();
@@ -166,36 +159,30 @@ export default {
166
159
  })
167
160
  .catch((err) => {
168
161
  if (err.response.data.code) {
169
- this.$message.error(
170
- `[${err.response.data.code}] ${err.response.data.message}`
171
- );
162
+ this.$message.error(`[${err.response.data.code}] ${err.response.data.message}`);
172
163
  } else {
173
164
  this.$message.error("请求异常");
174
165
  }
175
166
  });
176
167
  }
177
168
  },
178
- select: function (file) {
169
+ select: function(file) {
179
170
  if (file.status == "success") {
180
171
  this.$set(file, "selected", !file.selected);
181
172
  file.selected ? this.selectedCount++ : this.selectedCount--;
182
173
  }
183
174
  },
184
- buildHTML: function () {
175
+ buildHTML: function() {
185
176
  let list = [];
186
177
  this.fileList.forEach((file) => {
187
178
  if (file.selected) {
188
- file.is_img
189
- ? list.push(`<img src="${file.url}" />`)
190
- : list.push(
191
- `<a target="_blank" href="${file.url}">${file.name}</a>`
192
- );
179
+ file.is_img ? list.push(`<img src="${file.url}" />`) : list.push(`<a target="_blank" href="${file.url}">${file.name}</a>`);
193
180
  }
194
181
  });
195
182
  this.insertList = list.join(" \n");
196
183
  return this.insertList;
197
184
  },
198
- insert: function () {
185
+ insert: function() {
199
186
  // 关闭窗口
200
187
  this.dialogVisible = false;
201
188
 
@@ -211,17 +198,17 @@ export default {
211
198
  //移除所有选择状态
212
199
  this.resetSelectStatus();
213
200
  },
214
- resetSelectStatus: function () {
201
+ resetSelectStatus: function() {
215
202
  this.fileList.forEach((file, i) => {
216
203
  this.$set(this.fileList[i], "selected", false);
217
204
  });
218
205
  this.selectedCount = 0;
219
206
  },
220
- clear: function () {
207
+ clear: function() {
221
208
  this.$refs.uploadbox.clearFiles();
222
209
  this.fileList = [];
223
210
  },
224
- removeFile: function (fileList, uid) {
211
+ removeFile: function(fileList, uid) {
225
212
  fileList.forEach((file, i) => {
226
213
  if (file.uid == uid) {
227
214
  fileList.splice(i, 1);
@@ -229,7 +216,7 @@ export default {
229
216
  });
230
217
  },
231
218
  },
232
- mounted: function () {},
219
+ mounted: function() {},
233
220
  components: {},
234
221
  };
235
222
  </script>
package/src/components/article/render_markdown.vue ADDED
File without changes
package/src/components/article/render_tinymce.vue ADDED
File without changes