suneditor 2.44.6 → 2.44.7
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.
- package/LICENSE.txt +20 -20
- package/README.md +1585 -1585
- package/dist/suneditor.min.js +2 -2
- package/package.json +71 -71
- package/src/assets/css/suneditor-contents.css +556 -556
- package/src/assets/css/suneditor.css +0 -0
- package/src/assets/defaultIcons.js +103 -103
- package/src/lang/Lang.d.ts +143 -143
- package/src/lang/ckb.d.ts +4 -4
- package/src/lang/ckb.js +187 -187
- package/src/lang/da.d.ts +4 -4
- package/src/lang/da.js +191 -191
- package/src/lang/de.d.ts +4 -4
- package/src/lang/de.js +187 -187
- package/src/lang/en.d.ts +4 -4
- package/src/lang/en.js +187 -187
- package/src/lang/es.d.ts +4 -4
- package/src/lang/es.js +187 -187
- package/src/lang/fr.d.ts +4 -4
- package/src/lang/fr.js +188 -188
- package/src/lang/he.d.ts +4 -4
- package/src/lang/he.js +188 -188
- package/src/lang/index.d.ts +22 -22
- package/src/lang/index.js +25 -25
- package/src/lang/it.d.ts +4 -4
- package/src/lang/it.js +188 -188
- package/src/lang/ja.d.ts +4 -4
- package/src/lang/ja.js +187 -187
- package/src/lang/ko.d.ts +4 -4
- package/src/lang/ko.js +187 -187
- package/src/lang/lv.d.ts +4 -4
- package/src/lang/lv.js +187 -187
- package/src/lang/nl.d.ts +4 -4
- package/src/lang/nl.js +187 -187
- package/src/lang/pl.d.ts +4 -4
- package/src/lang/pl.js +187 -187
- package/src/lang/pt_br.d.ts +4 -4
- package/src/lang/pt_br.js +189 -189
- package/src/lang/ro.d.ts +4 -4
- package/src/lang/ro.js +187 -187
- package/src/lang/ru.d.ts +4 -4
- package/src/lang/ru.js +187 -187
- package/src/lang/se.d.ts +4 -4
- package/src/lang/se.js +191 -191
- package/src/lang/ua.d.ts +5 -5
- package/src/lang/ua.js +188 -188
- package/src/lang/ur.d.ts +4 -4
- package/src/lang/ur.js +187 -187
- package/src/lang/zh_cn.d.ts +4 -4
- package/src/lang/zh_cn.js +187 -187
- package/src/lib/constructor.js +0 -0
- package/src/lib/context.d.ts +42 -42
- package/src/lib/context.js +0 -0
- package/src/lib/core.d.ts +1101 -1101
- package/src/lib/core.js +12 -22
- package/src/lib/history.d.ts +48 -48
- package/src/lib/history.js +218 -218
- package/src/lib/util.d.ts +677 -677
- package/src/lib/util.js +19 -0
- package/src/options.d.ts +608 -608
- package/src/plugins/CommandPlugin.d.ts +7 -7
- package/src/plugins/DialogPlugin.d.ts +19 -19
- package/src/plugins/FileBrowserPlugin.d.ts +29 -29
- package/src/plugins/Module.d.ts +14 -14
- package/src/plugins/Plugin.d.ts +41 -41
- package/src/plugins/SubmenuPlugin.d.ts +7 -7
- package/src/plugins/command/blockquote.d.ts +4 -4
- package/src/plugins/command/blockquote.js +46 -46
- package/src/plugins/dialog/audio.d.ts +4 -4
- package/src/plugins/dialog/audio.js +556 -556
- package/src/plugins/dialog/image.d.ts +4 -4
- package/src/plugins/dialog/image.js +1122 -1122
- package/src/plugins/dialog/link.d.ts +4 -4
- package/src/plugins/dialog/link.js +223 -223
- package/src/plugins/dialog/math.d.ts +4 -4
- package/src/plugins/dialog/math.js +294 -294
- package/src/plugins/dialog/mention.d.ts +5 -5
- package/src/plugins/dialog/mention.js +242 -242
- package/src/plugins/dialog/video.d.ts +4 -4
- package/src/plugins/dialog/video.js +983 -983
- package/src/plugins/fileBrowser/imageGallery.d.ts +4 -4
- package/src/plugins/fileBrowser/imageGallery.js +63 -63
- package/src/plugins/index.d.ts +79 -79
- package/src/plugins/index.js +32 -32
- package/src/plugins/modules/_anchor.js +461 -461
- package/src/plugins/modules/_colorPicker.d.ts +59 -59
- package/src/plugins/modules/_colorPicker.js +0 -0
- package/src/plugins/modules/_notice.d.ts +20 -20
- package/src/plugins/modules/_notice.js +72 -72
- package/src/plugins/modules/_selectMenu.js +118 -118
- package/src/plugins/modules/component.d.ts +24 -24
- package/src/plugins/modules/component.js +82 -82
- package/src/plugins/modules/dialog.d.ts +27 -27
- package/src/plugins/modules/dialog.js +174 -174
- package/src/plugins/modules/fileBrowser.d.ts +41 -41
- package/src/plugins/modules/fileBrowser.js +373 -373
- package/src/plugins/modules/fileManager.d.ts +66 -66
- package/src/plugins/modules/fileManager.js +325 -325
- package/src/plugins/modules/index.d.ts +10 -10
- package/src/plugins/modules/index.js +8 -8
- package/src/plugins/modules/resizing.d.ts +153 -153
- package/src/plugins/modules/resizing.js +895 -895
- package/src/plugins/submenu/align.d.ts +4 -4
- package/src/plugins/submenu/align.js +160 -160
- package/src/plugins/submenu/font.d.ts +4 -4
- package/src/plugins/submenu/font.js +120 -120
- package/src/plugins/submenu/fontColor.d.ts +4 -4
- package/src/plugins/submenu/fontColor.js +0 -0
- package/src/plugins/submenu/fontSize.d.ts +4 -4
- package/src/plugins/submenu/fontSize.js +112 -112
- package/src/plugins/submenu/formatBlock.d.ts +4 -4
- package/src/plugins/submenu/formatBlock.js +273 -273
- package/src/plugins/submenu/hiliteColor.d.ts +4 -4
- package/src/plugins/submenu/hiliteColor.js +0 -0
- package/src/plugins/submenu/horizontalRule.d.ts +4 -4
- package/src/plugins/submenu/horizontalRule.js +98 -98
- package/src/plugins/submenu/lineHeight.d.ts +4 -4
- package/src/plugins/submenu/lineHeight.js +104 -104
- package/src/plugins/submenu/list.d.ts +4 -4
- package/src/plugins/submenu/list.js +456 -456
- package/src/plugins/submenu/paragraphStyle.d.ts +4 -4
- package/src/plugins/submenu/paragraphStyle.js +135 -135
- package/src/plugins/submenu/table.d.ts +4 -4
- package/src/plugins/submenu/template.d.ts +4 -4
- package/src/plugins/submenu/template.js +71 -71
- package/src/plugins/submenu/textStyle.d.ts +4 -4
- package/src/plugins/submenu/textStyle.js +167 -167
- package/src/suneditor.d.ts +9 -9
- package/src/suneditor.js +75 -75
- package/src/suneditor_build.js +17 -17
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
-
|
|
3
|
-
declare const align: SubmenuPlugin;
|
|
4
|
-
|
|
1
|
+
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
+
|
|
3
|
+
declare const align: SubmenuPlugin;
|
|
4
|
+
|
|
5
5
|
export default align;
|
|
@@ -1,160 +1,160 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* wysiwyg web editor
|
|
3
|
-
*
|
|
4
|
-
* suneditor.js
|
|
5
|
-
* Copyright 2017 JiHong Lee.
|
|
6
|
-
* MIT license.
|
|
7
|
-
*/
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
name: 'align',
|
|
12
|
-
display: 'submenu',
|
|
13
|
-
add: function (core, targetElement) {
|
|
14
|
-
const icons = core.icons;
|
|
15
|
-
const context = core.context;
|
|
16
|
-
context.align = {
|
|
17
|
-
targetButton: targetElement,
|
|
18
|
-
_itemMenu: null,
|
|
19
|
-
_alignList: null,
|
|
20
|
-
currentAlign: '',
|
|
21
|
-
defaultDir: core.options.rtl ? 'right' : 'left',
|
|
22
|
-
icons: {
|
|
23
|
-
justify: icons.align_justify,
|
|
24
|
-
left: icons.align_left,
|
|
25
|
-
right: icons.align_right,
|
|
26
|
-
center: icons.align_center
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
/** set submenu */
|
|
31
|
-
let listDiv = this.setSubmenu(core);
|
|
32
|
-
let listUl = context.align._itemMenu = listDiv.querySelector('ul');
|
|
33
|
-
|
|
34
|
-
/** add event listeners */
|
|
35
|
-
listUl.addEventListener('click', this.pickup.bind(core));
|
|
36
|
-
context.align._alignList = listUl.querySelectorAll('li button');
|
|
37
|
-
|
|
38
|
-
/** append target button menu */
|
|
39
|
-
core.initMenuTarget(this.name, targetElement, listDiv);
|
|
40
|
-
|
|
41
|
-
/** empty memory */
|
|
42
|
-
listDiv = null, listUl = null;
|
|
43
|
-
},
|
|
44
|
-
|
|
45
|
-
setSubmenu: function (core) {
|
|
46
|
-
const lang = core.lang;
|
|
47
|
-
const icons = core.icons;
|
|
48
|
-
const listDiv = core.util.createElement('DIV');
|
|
49
|
-
const alignItems = core.options.alignItems;
|
|
50
|
-
|
|
51
|
-
let html = '';
|
|
52
|
-
for (let i = 0, item, text; i < alignItems.length; i++) {
|
|
53
|
-
item = alignItems[i];
|
|
54
|
-
text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
|
|
55
|
-
html += '<li>' +
|
|
56
|
-
'<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '" aria-label="' + text + '">' +
|
|
57
|
-
'<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
|
|
58
|
-
'</button>' +
|
|
59
|
-
'</li>';
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
listDiv.className = 'se-submenu se-list-layer se-list-align';
|
|
63
|
-
listDiv.innerHTML = '' +
|
|
64
|
-
'<div class="se-list-inner">' +
|
|
65
|
-
'<ul class="se-list-basic">' +
|
|
66
|
-
html +
|
|
67
|
-
'</ul>' +
|
|
68
|
-
'</div>';
|
|
69
|
-
|
|
70
|
-
return listDiv;
|
|
71
|
-
},
|
|
72
|
-
|
|
73
|
-
/**
|
|
74
|
-
* @Override core
|
|
75
|
-
*/
|
|
76
|
-
active: function (element) {
|
|
77
|
-
const alignContext = this.context.align;
|
|
78
|
-
const targetButton = alignContext.targetButton;
|
|
79
|
-
const target = targetButton.firstElementChild;
|
|
80
|
-
|
|
81
|
-
if (!element) {
|
|
82
|
-
this.util.changeElement(target, alignContext.icons[alignContext.defaultDir]);
|
|
83
|
-
targetButton.removeAttribute('data-focus');
|
|
84
|
-
} else if (this.util.isFormatElement(element)) {
|
|
85
|
-
const textAlign = element.style.textAlign;
|
|
86
|
-
if (textAlign) {
|
|
87
|
-
this.util.changeElement(target, alignContext.icons[textAlign] || alignContext.icons[alignContext.defaultDir]);
|
|
88
|
-
targetButton.setAttribute('data-focus', textAlign);
|
|
89
|
-
return true;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
|
-
return false;
|
|
94
|
-
},
|
|
95
|
-
|
|
96
|
-
/**
|
|
97
|
-
* @Override submenu
|
|
98
|
-
*/
|
|
99
|
-
on: function () {
|
|
100
|
-
const alignContext = this.context.align;
|
|
101
|
-
const alignList = alignContext._alignList;
|
|
102
|
-
const currentAlign = alignContext.targetButton.getAttribute('data-focus') || alignContext.defaultDir;
|
|
103
|
-
|
|
104
|
-
if (currentAlign !== alignContext.currentAlign) {
|
|
105
|
-
for (let i = 0, len = alignList.length; i < len; i++) {
|
|
106
|
-
if (currentAlign === alignList[i].getAttribute('data-value')) {
|
|
107
|
-
this.util.addClass(alignList[i], 'active');
|
|
108
|
-
} else {
|
|
109
|
-
this.util.removeClass(alignList[i], 'active');
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
|
|
113
|
-
alignContext.currentAlign = currentAlign;
|
|
114
|
-
}
|
|
115
|
-
},
|
|
116
|
-
|
|
117
|
-
exchangeDir: function () {
|
|
118
|
-
const dir = this.options.rtl ? 'right' : 'left';
|
|
119
|
-
if (!this.context.align || this.context.align.defaultDir === dir) return;
|
|
120
|
-
|
|
121
|
-
this.context.align.defaultDir = dir;
|
|
122
|
-
let menu = this.context.align._itemMenu;
|
|
123
|
-
let leftBtn = menu.querySelector('[data-value="left"]');
|
|
124
|
-
let rightBtn = menu.querySelector('[data-value="right"]');
|
|
125
|
-
if (leftBtn && rightBtn) {
|
|
126
|
-
const lp = leftBtn.parentElement;
|
|
127
|
-
const rp = rightBtn.parentElement;
|
|
128
|
-
lp.appendChild(rightBtn);
|
|
129
|
-
rp.appendChild(leftBtn);
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
|
|
133
|
-
pickup: function (e) {
|
|
134
|
-
e.preventDefault();
|
|
135
|
-
e.stopPropagation();
|
|
136
|
-
|
|
137
|
-
let target = e.target;
|
|
138
|
-
let value = null;
|
|
139
|
-
|
|
140
|
-
while (!value && !/UL/i.test(target.tagName)) {
|
|
141
|
-
value = target.getAttribute('data-value');
|
|
142
|
-
target = target.parentNode;
|
|
143
|
-
}
|
|
144
|
-
|
|
145
|
-
if (!value) return;
|
|
146
|
-
|
|
147
|
-
const defaultDir = this.context.align.defaultDir;
|
|
148
|
-
const selectedFormsts = this.getSelectedElements();
|
|
149
|
-
for (let i = 0, len = selectedFormsts.length; i < len; i++) {
|
|
150
|
-
this.util.setStyle(selectedFormsts[i], 'textAlign', (value === defaultDir ? '' : value));
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
this.effectNode = null;
|
|
154
|
-
this.submenuOff();
|
|
155
|
-
this.focus();
|
|
156
|
-
|
|
157
|
-
// history stack
|
|
158
|
-
this.history.push(false);
|
|
159
|
-
}
|
|
160
|
-
};
|
|
1
|
+
/*
|
|
2
|
+
* wysiwyg web editor
|
|
3
|
+
*
|
|
4
|
+
* suneditor.js
|
|
5
|
+
* Copyright 2017 JiHong Lee.
|
|
6
|
+
* MIT license.
|
|
7
|
+
*/
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
name: 'align',
|
|
12
|
+
display: 'submenu',
|
|
13
|
+
add: function (core, targetElement) {
|
|
14
|
+
const icons = core.icons;
|
|
15
|
+
const context = core.context;
|
|
16
|
+
context.align = {
|
|
17
|
+
targetButton: targetElement,
|
|
18
|
+
_itemMenu: null,
|
|
19
|
+
_alignList: null,
|
|
20
|
+
currentAlign: '',
|
|
21
|
+
defaultDir: core.options.rtl ? 'right' : 'left',
|
|
22
|
+
icons: {
|
|
23
|
+
justify: icons.align_justify,
|
|
24
|
+
left: icons.align_left,
|
|
25
|
+
right: icons.align_right,
|
|
26
|
+
center: icons.align_center
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
/** set submenu */
|
|
31
|
+
let listDiv = this.setSubmenu(core);
|
|
32
|
+
let listUl = context.align._itemMenu = listDiv.querySelector('ul');
|
|
33
|
+
|
|
34
|
+
/** add event listeners */
|
|
35
|
+
listUl.addEventListener('click', this.pickup.bind(core));
|
|
36
|
+
context.align._alignList = listUl.querySelectorAll('li button');
|
|
37
|
+
|
|
38
|
+
/** append target button menu */
|
|
39
|
+
core.initMenuTarget(this.name, targetElement, listDiv);
|
|
40
|
+
|
|
41
|
+
/** empty memory */
|
|
42
|
+
listDiv = null, listUl = null;
|
|
43
|
+
},
|
|
44
|
+
|
|
45
|
+
setSubmenu: function (core) {
|
|
46
|
+
const lang = core.lang;
|
|
47
|
+
const icons = core.icons;
|
|
48
|
+
const listDiv = core.util.createElement('DIV');
|
|
49
|
+
const alignItems = core.options.alignItems;
|
|
50
|
+
|
|
51
|
+
let html = '';
|
|
52
|
+
for (let i = 0, item, text; i < alignItems.length; i++) {
|
|
53
|
+
item = alignItems[i];
|
|
54
|
+
text = lang.toolbar['align' + item.charAt(0).toUpperCase() + item.slice(1)];
|
|
55
|
+
html += '<li>' +
|
|
56
|
+
'<button type="button" class="se-btn-list se-btn-align" data-value="' + item + '" title="' + text + '" aria-label="' + text + '">' +
|
|
57
|
+
'<span class="se-list-icon">' + icons['align_' + item] + '</span>' + text +
|
|
58
|
+
'</button>' +
|
|
59
|
+
'</li>';
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
listDiv.className = 'se-submenu se-list-layer se-list-align';
|
|
63
|
+
listDiv.innerHTML = '' +
|
|
64
|
+
'<div class="se-list-inner">' +
|
|
65
|
+
'<ul class="se-list-basic">' +
|
|
66
|
+
html +
|
|
67
|
+
'</ul>' +
|
|
68
|
+
'</div>';
|
|
69
|
+
|
|
70
|
+
return listDiv;
|
|
71
|
+
},
|
|
72
|
+
|
|
73
|
+
/**
|
|
74
|
+
* @Override core
|
|
75
|
+
*/
|
|
76
|
+
active: function (element) {
|
|
77
|
+
const alignContext = this.context.align;
|
|
78
|
+
const targetButton = alignContext.targetButton;
|
|
79
|
+
const target = targetButton.firstElementChild;
|
|
80
|
+
|
|
81
|
+
if (!element) {
|
|
82
|
+
this.util.changeElement(target, alignContext.icons[alignContext.defaultDir]);
|
|
83
|
+
targetButton.removeAttribute('data-focus');
|
|
84
|
+
} else if (this.util.isFormatElement(element)) {
|
|
85
|
+
const textAlign = element.style.textAlign;
|
|
86
|
+
if (textAlign) {
|
|
87
|
+
this.util.changeElement(target, alignContext.icons[textAlign] || alignContext.icons[alignContext.defaultDir]);
|
|
88
|
+
targetButton.setAttribute('data-focus', textAlign);
|
|
89
|
+
return true;
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
return false;
|
|
94
|
+
},
|
|
95
|
+
|
|
96
|
+
/**
|
|
97
|
+
* @Override submenu
|
|
98
|
+
*/
|
|
99
|
+
on: function () {
|
|
100
|
+
const alignContext = this.context.align;
|
|
101
|
+
const alignList = alignContext._alignList;
|
|
102
|
+
const currentAlign = alignContext.targetButton.getAttribute('data-focus') || alignContext.defaultDir;
|
|
103
|
+
|
|
104
|
+
if (currentAlign !== alignContext.currentAlign) {
|
|
105
|
+
for (let i = 0, len = alignList.length; i < len; i++) {
|
|
106
|
+
if (currentAlign === alignList[i].getAttribute('data-value')) {
|
|
107
|
+
this.util.addClass(alignList[i], 'active');
|
|
108
|
+
} else {
|
|
109
|
+
this.util.removeClass(alignList[i], 'active');
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
alignContext.currentAlign = currentAlign;
|
|
114
|
+
}
|
|
115
|
+
},
|
|
116
|
+
|
|
117
|
+
exchangeDir: function () {
|
|
118
|
+
const dir = this.options.rtl ? 'right' : 'left';
|
|
119
|
+
if (!this.context.align || this.context.align.defaultDir === dir) return;
|
|
120
|
+
|
|
121
|
+
this.context.align.defaultDir = dir;
|
|
122
|
+
let menu = this.context.align._itemMenu;
|
|
123
|
+
let leftBtn = menu.querySelector('[data-value="left"]');
|
|
124
|
+
let rightBtn = menu.querySelector('[data-value="right"]');
|
|
125
|
+
if (leftBtn && rightBtn) {
|
|
126
|
+
const lp = leftBtn.parentElement;
|
|
127
|
+
const rp = rightBtn.parentElement;
|
|
128
|
+
lp.appendChild(rightBtn);
|
|
129
|
+
rp.appendChild(leftBtn);
|
|
130
|
+
}
|
|
131
|
+
},
|
|
132
|
+
|
|
133
|
+
pickup: function (e) {
|
|
134
|
+
e.preventDefault();
|
|
135
|
+
e.stopPropagation();
|
|
136
|
+
|
|
137
|
+
let target = e.target;
|
|
138
|
+
let value = null;
|
|
139
|
+
|
|
140
|
+
while (!value && !/UL/i.test(target.tagName)) {
|
|
141
|
+
value = target.getAttribute('data-value');
|
|
142
|
+
target = target.parentNode;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
if (!value) return;
|
|
146
|
+
|
|
147
|
+
const defaultDir = this.context.align.defaultDir;
|
|
148
|
+
const selectedFormsts = this.getSelectedElements();
|
|
149
|
+
for (let i = 0, len = selectedFormsts.length; i < len; i++) {
|
|
150
|
+
this.util.setStyle(selectedFormsts[i], 'textAlign', (value === defaultDir ? '' : value));
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
this.effectNode = null;
|
|
154
|
+
this.submenuOff();
|
|
155
|
+
this.focus();
|
|
156
|
+
|
|
157
|
+
// history stack
|
|
158
|
+
this.history.push(false);
|
|
159
|
+
}
|
|
160
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
-
|
|
3
|
-
declare const font: SubmenuPlugin;
|
|
4
|
-
|
|
1
|
+
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
+
|
|
3
|
+
declare const font: SubmenuPlugin;
|
|
4
|
+
|
|
5
5
|
export default font;
|
|
@@ -1,120 +1,120 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* wysiwyg web editor
|
|
3
|
-
*
|
|
4
|
-
* suneditor.js
|
|
5
|
-
* Copyright 2017 JiHong Lee.
|
|
6
|
-
* MIT license.
|
|
7
|
-
*/
|
|
8
|
-
'use strict';
|
|
9
|
-
|
|
10
|
-
export default {
|
|
11
|
-
name: 'font',
|
|
12
|
-
display: 'submenu',
|
|
13
|
-
add: function (core, targetElement) {
|
|
14
|
-
const context = core.context;
|
|
15
|
-
context.font = {
|
|
16
|
-
targetText: targetElement.querySelector('.txt'),
|
|
17
|
-
targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
|
|
18
|
-
_fontList: null,
|
|
19
|
-
currentFont: ''
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
/** set submenu */
|
|
23
|
-
let listDiv = this.setSubmenu(core);
|
|
24
|
-
|
|
25
|
-
/** add event listeners */
|
|
26
|
-
listDiv.querySelector('.se-list-inner').addEventListener('click', this.pickup.bind(core));
|
|
27
|
-
|
|
28
|
-
context.font._fontList = listDiv.querySelectorAll('ul li button');
|
|
29
|
-
|
|
30
|
-
/** append target button menu */
|
|
31
|
-
core.initMenuTarget(this.name, targetElement, listDiv);
|
|
32
|
-
|
|
33
|
-
/** empty memory */
|
|
34
|
-
listDiv = null;
|
|
35
|
-
},
|
|
36
|
-
|
|
37
|
-
setSubmenu: function (core) {
|
|
38
|
-
const lang = core.lang;
|
|
39
|
-
const listDiv = core.util.createElement('DIV');
|
|
40
|
-
|
|
41
|
-
listDiv.className = 'se-submenu se-list-layer se-list-font-family';
|
|
42
|
-
|
|
43
|
-
let font, text, i, len;
|
|
44
|
-
let fontList = core.options.font;
|
|
45
|
-
|
|
46
|
-
let list = '<div class="se-list-inner">' +
|
|
47
|
-
'<ul class="se-list-basic">' +
|
|
48
|
-
'<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
|
|
49
|
-
for (i = 0, len = fontList.length; i < len; i++) {
|
|
50
|
-
font = fontList[i];
|
|
51
|
-
text = font.split(',')[0];
|
|
52
|
-
list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
|
|
53
|
-
}
|
|
54
|
-
list += '</ul></div>';
|
|
55
|
-
listDiv.innerHTML = list;
|
|
56
|
-
|
|
57
|
-
return listDiv;
|
|
58
|
-
},
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* @Override core
|
|
62
|
-
*/
|
|
63
|
-
active: function (element) {
|
|
64
|
-
const target = this.context.font.targetText;
|
|
65
|
-
const tooltip = this.context.font.targetTooltip;
|
|
66
|
-
|
|
67
|
-
if (!element) {
|
|
68
|
-
const font = this.hasFocus ? this.wwComputedStyle.fontFamily : this.lang.toolbar.font;
|
|
69
|
-
this.util.changeTxt(target, font);
|
|
70
|
-
this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + (font ? ' (' + font + ')' : '') : font);
|
|
71
|
-
} else if (element.style && element.style.fontFamily.length > 0) {
|
|
72
|
-
const selectFont = element.style.fontFamily.replace(/["']/g,'');
|
|
73
|
-
this.util.changeTxt(target, selectFont);
|
|
74
|
-
this.util.changeTxt(tooltip, this.lang.toolbar.font + ' (' + selectFont + ')');
|
|
75
|
-
return true;
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
return false;
|
|
79
|
-
},
|
|
80
|
-
|
|
81
|
-
/**
|
|
82
|
-
* @Override submenu
|
|
83
|
-
*/
|
|
84
|
-
on: function () {
|
|
85
|
-
const fontContext = this.context.font;
|
|
86
|
-
const fontList = fontContext._fontList;
|
|
87
|
-
const currentFont = fontContext.targetText.textContent;
|
|
88
|
-
|
|
89
|
-
if (currentFont !== fontContext.currentFont) {
|
|
90
|
-
for (let i = 0, len = fontList.length; i < len; i++) {
|
|
91
|
-
if (currentFont === fontList[i].getAttribute('data-value')) {
|
|
92
|
-
this.util.addClass(fontList[i], 'active');
|
|
93
|
-
} else {
|
|
94
|
-
this.util.removeClass(fontList[i], 'active');
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
fontContext.currentFont = currentFont;
|
|
99
|
-
}
|
|
100
|
-
},
|
|
101
|
-
|
|
102
|
-
pickup: function (e) {
|
|
103
|
-
if (!/^BUTTON$/i.test(e.target.tagName)) return false;
|
|
104
|
-
|
|
105
|
-
e.preventDefault();
|
|
106
|
-
e.stopPropagation();
|
|
107
|
-
|
|
108
|
-
const value = e.target.getAttribute('data-value');
|
|
109
|
-
|
|
110
|
-
if (value) {
|
|
111
|
-
const newNode = this.util.createElement('SPAN');
|
|
112
|
-
newNode.style.fontFamily = value;
|
|
113
|
-
this.nodeChange(newNode, ['font-family'], null, null);
|
|
114
|
-
} else {
|
|
115
|
-
this.nodeChange(null, ['font-family'], ['span'], true);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
this.submenuOff();
|
|
119
|
-
}
|
|
120
|
-
};
|
|
1
|
+
/*
|
|
2
|
+
* wysiwyg web editor
|
|
3
|
+
*
|
|
4
|
+
* suneditor.js
|
|
5
|
+
* Copyright 2017 JiHong Lee.
|
|
6
|
+
* MIT license.
|
|
7
|
+
*/
|
|
8
|
+
'use strict';
|
|
9
|
+
|
|
10
|
+
export default {
|
|
11
|
+
name: 'font',
|
|
12
|
+
display: 'submenu',
|
|
13
|
+
add: function (core, targetElement) {
|
|
14
|
+
const context = core.context;
|
|
15
|
+
context.font = {
|
|
16
|
+
targetText: targetElement.querySelector('.txt'),
|
|
17
|
+
targetTooltip: targetElement.parentNode.querySelector('.se-tooltip-text'),
|
|
18
|
+
_fontList: null,
|
|
19
|
+
currentFont: ''
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
/** set submenu */
|
|
23
|
+
let listDiv = this.setSubmenu(core);
|
|
24
|
+
|
|
25
|
+
/** add event listeners */
|
|
26
|
+
listDiv.querySelector('.se-list-inner').addEventListener('click', this.pickup.bind(core));
|
|
27
|
+
|
|
28
|
+
context.font._fontList = listDiv.querySelectorAll('ul li button');
|
|
29
|
+
|
|
30
|
+
/** append target button menu */
|
|
31
|
+
core.initMenuTarget(this.name, targetElement, listDiv);
|
|
32
|
+
|
|
33
|
+
/** empty memory */
|
|
34
|
+
listDiv = null;
|
|
35
|
+
},
|
|
36
|
+
|
|
37
|
+
setSubmenu: function (core) {
|
|
38
|
+
const lang = core.lang;
|
|
39
|
+
const listDiv = core.util.createElement('DIV');
|
|
40
|
+
|
|
41
|
+
listDiv.className = 'se-submenu se-list-layer se-list-font-family';
|
|
42
|
+
|
|
43
|
+
let font, text, i, len;
|
|
44
|
+
let fontList = core.options.font;
|
|
45
|
+
|
|
46
|
+
let list = '<div class="se-list-inner">' +
|
|
47
|
+
'<ul class="se-list-basic">' +
|
|
48
|
+
'<li><button type="button" class="default_value se-btn-list" title="' + lang.toolbar.default + '" aria-label="' + lang.toolbar.default + '">(' + lang.toolbar.default + ')</button></li>';
|
|
49
|
+
for (i = 0, len = fontList.length; i < len; i++) {
|
|
50
|
+
font = fontList[i];
|
|
51
|
+
text = font.split(',')[0];
|
|
52
|
+
list += '<li><button type="button" class="se-btn-list" data-value="' + font + '" data-txt="' + text + '" title="' + text + '" aria-label="' + text + '" style="font-family:' + font + ';">' + text + '</button></li>';
|
|
53
|
+
}
|
|
54
|
+
list += '</ul></div>';
|
|
55
|
+
listDiv.innerHTML = list;
|
|
56
|
+
|
|
57
|
+
return listDiv;
|
|
58
|
+
},
|
|
59
|
+
|
|
60
|
+
/**
|
|
61
|
+
* @Override core
|
|
62
|
+
*/
|
|
63
|
+
active: function (element) {
|
|
64
|
+
const target = this.context.font.targetText;
|
|
65
|
+
const tooltip = this.context.font.targetTooltip;
|
|
66
|
+
|
|
67
|
+
if (!element) {
|
|
68
|
+
const font = this.hasFocus ? this.wwComputedStyle.fontFamily : this.lang.toolbar.font;
|
|
69
|
+
this.util.changeTxt(target, font);
|
|
70
|
+
this.util.changeTxt(tooltip, this.hasFocus ? this.lang.toolbar.font + (font ? ' (' + font + ')' : '') : font);
|
|
71
|
+
} else if (element.style && element.style.fontFamily.length > 0) {
|
|
72
|
+
const selectFont = element.style.fontFamily.replace(/["']/g,'');
|
|
73
|
+
this.util.changeTxt(target, selectFont);
|
|
74
|
+
this.util.changeTxt(tooltip, this.lang.toolbar.font + ' (' + selectFont + ')');
|
|
75
|
+
return true;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
return false;
|
|
79
|
+
},
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* @Override submenu
|
|
83
|
+
*/
|
|
84
|
+
on: function () {
|
|
85
|
+
const fontContext = this.context.font;
|
|
86
|
+
const fontList = fontContext._fontList;
|
|
87
|
+
const currentFont = fontContext.targetText.textContent;
|
|
88
|
+
|
|
89
|
+
if (currentFont !== fontContext.currentFont) {
|
|
90
|
+
for (let i = 0, len = fontList.length; i < len; i++) {
|
|
91
|
+
if (currentFont === fontList[i].getAttribute('data-value')) {
|
|
92
|
+
this.util.addClass(fontList[i], 'active');
|
|
93
|
+
} else {
|
|
94
|
+
this.util.removeClass(fontList[i], 'active');
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
fontContext.currentFont = currentFont;
|
|
99
|
+
}
|
|
100
|
+
},
|
|
101
|
+
|
|
102
|
+
pickup: function (e) {
|
|
103
|
+
if (!/^BUTTON$/i.test(e.target.tagName)) return false;
|
|
104
|
+
|
|
105
|
+
e.preventDefault();
|
|
106
|
+
e.stopPropagation();
|
|
107
|
+
|
|
108
|
+
const value = e.target.getAttribute('data-value');
|
|
109
|
+
|
|
110
|
+
if (value) {
|
|
111
|
+
const newNode = this.util.createElement('SPAN');
|
|
112
|
+
newNode.style.fontFamily = value;
|
|
113
|
+
this.nodeChange(newNode, ['font-family'], null, null);
|
|
114
|
+
} else {
|
|
115
|
+
this.nodeChange(null, ['font-family'], ['span'], true);
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
this.submenuOff();
|
|
119
|
+
}
|
|
120
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
-
|
|
3
|
-
declare const fontColor: SubmenuPlugin;
|
|
4
|
-
|
|
1
|
+
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
+
|
|
3
|
+
declare const fontColor: SubmenuPlugin;
|
|
4
|
+
|
|
5
5
|
export default fontColor;
|
|
File without changes
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
-
|
|
3
|
-
declare const fontSize: SubmenuPlugin;
|
|
4
|
-
|
|
1
|
+
import { SubmenuPlugin } from '../SubmenuPlugin';
|
|
2
|
+
|
|
3
|
+
declare const fontSize: SubmenuPlugin;
|
|
4
|
+
|
|
5
5
|
export default fontSize;
|