suneditor 2.47.5 → 2.47.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.
Files changed (141) hide show
  1. package/LICENSE.txt +20 -20
  2. package/README.md +1625 -1613
  3. package/dist/css/suneditor.min.css +1 -1
  4. package/dist/suneditor.min.js +2 -2
  5. package/example.md +586 -586
  6. package/package.json +71 -71
  7. package/src/assets/css/suneditor-contents.css +561 -561
  8. package/src/assets/css/suneditor.css +2 -2
  9. package/src/assets/defaultIcons.js +103 -103
  10. package/src/lang/Lang.d.ts +143 -143
  11. package/src/lang/ckb.d.ts +4 -4
  12. package/src/lang/ckb.js +187 -187
  13. package/src/lang/cs.d.ts +4 -4
  14. package/src/lang/cs.js +187 -187
  15. package/src/lang/da.d.ts +4 -4
  16. package/src/lang/da.js +191 -191
  17. package/src/lang/de.d.ts +4 -4
  18. package/src/lang/de.js +188 -188
  19. package/src/lang/en.d.ts +4 -4
  20. package/src/lang/en.js +187 -187
  21. package/src/lang/es.d.ts +4 -4
  22. package/src/lang/es.js +187 -187
  23. package/src/lang/fa.d.ts +4 -4
  24. package/src/lang/fa.js +187 -187
  25. package/src/lang/fr.d.ts +4 -4
  26. package/src/lang/fr.js +188 -188
  27. package/src/lang/he.d.ts +4 -4
  28. package/src/lang/he.js +188 -188
  29. package/src/lang/hu.d.ts +5 -5
  30. package/src/lang/hu.js +188 -188
  31. package/src/lang/index.d.ts +25 -24
  32. package/src/lang/index.js +30 -27
  33. package/src/lang/it.d.ts +4 -4
  34. package/src/lang/it.js +188 -188
  35. package/src/lang/ja.d.ts +4 -4
  36. package/src/lang/ja.js +187 -187
  37. package/src/lang/km.d.ts +5 -0
  38. package/src/lang/km.js +188 -0
  39. package/src/lang/ko.d.ts +4 -4
  40. package/src/lang/ko.js +187 -187
  41. package/src/lang/lv.d.ts +4 -4
  42. package/src/lang/lv.js +187 -187
  43. package/src/lang/nl.d.ts +4 -4
  44. package/src/lang/nl.js +187 -187
  45. package/src/lang/pl.d.ts +4 -4
  46. package/src/lang/pl.js +187 -187
  47. package/src/lang/pt_br.d.ts +4 -4
  48. package/src/lang/pt_br.js +189 -189
  49. package/src/lang/ro.d.ts +4 -4
  50. package/src/lang/ro.js +187 -187
  51. package/src/lang/ru.d.ts +4 -4
  52. package/src/lang/ru.js +187 -187
  53. package/src/lang/se.d.ts +4 -4
  54. package/src/lang/se.js +191 -191
  55. package/src/lang/tr.d.ts +5 -5
  56. package/src/lang/tr.js +191 -191
  57. package/src/lang/ua.d.ts +5 -5
  58. package/src/lang/ua.js +188 -188
  59. package/src/lang/ur.d.ts +4 -4
  60. package/src/lang/ur.js +187 -187
  61. package/src/lang/zh_cn.d.ts +4 -4
  62. package/src/lang/zh_cn.js +187 -187
  63. package/src/lib/constructor.js +0 -0
  64. package/src/lib/context.d.ts +42 -42
  65. package/src/lib/context.js +0 -0
  66. package/src/lib/core.d.ts +1135 -1135
  67. package/src/lib/core.js +9 -3
  68. package/src/lib/history.d.ts +48 -48
  69. package/src/lib/history.js +218 -218
  70. package/src/lib/util.d.ts +677 -677
  71. package/src/lib/util.js +1 -1
  72. package/src/options.d.ts +621 -620
  73. package/src/plugins/CommandPlugin.d.ts +7 -7
  74. package/src/plugins/DialogPlugin.d.ts +19 -19
  75. package/src/plugins/FileBrowserPlugin.d.ts +29 -29
  76. package/src/plugins/Module.d.ts +14 -14
  77. package/src/plugins/Plugin.d.ts +41 -41
  78. package/src/plugins/SubmenuPlugin.d.ts +7 -7
  79. package/src/plugins/command/blockquote.d.ts +4 -4
  80. package/src/plugins/command/blockquote.js +46 -46
  81. package/src/plugins/dialog/audio.d.ts +4 -4
  82. package/src/plugins/dialog/audio.js +557 -558
  83. package/src/plugins/dialog/image.d.ts +4 -4
  84. package/src/plugins/dialog/image.js +1126 -1127
  85. package/src/plugins/dialog/link.d.ts +4 -4
  86. package/src/plugins/dialog/link.js +223 -223
  87. package/src/plugins/dialog/math.d.ts +4 -4
  88. package/src/plugins/dialog/math.js +300 -300
  89. package/src/plugins/dialog/video.d.ts +4 -4
  90. package/src/plugins/dialog/video.js +989 -989
  91. package/src/plugins/fileBrowser/imageGallery.d.ts +4 -4
  92. package/src/plugins/fileBrowser/imageGallery.js +64 -64
  93. package/src/plugins/index.d.ts +79 -79
  94. package/src/plugins/index.js +32 -32
  95. package/src/plugins/modules/_anchor.js +461 -461
  96. package/src/plugins/modules/_colorPicker.d.ts +59 -59
  97. package/src/plugins/modules/_colorPicker.js +0 -0
  98. package/src/plugins/modules/_notice.d.ts +20 -20
  99. package/src/plugins/modules/_notice.js +72 -72
  100. package/src/plugins/modules/_selectMenu.js +118 -118
  101. package/src/plugins/modules/component.d.ts +24 -24
  102. package/src/plugins/modules/component.js +80 -80
  103. package/src/plugins/modules/dialog.d.ts +27 -27
  104. package/src/plugins/modules/dialog.js +174 -174
  105. package/src/plugins/modules/fileBrowser.d.ts +41 -41
  106. package/src/plugins/modules/fileBrowser.js +377 -377
  107. package/src/plugins/modules/fileManager.d.ts +66 -66
  108. package/src/plugins/modules/fileManager.js +325 -325
  109. package/src/plugins/modules/index.d.ts +10 -10
  110. package/src/plugins/modules/index.js +8 -8
  111. package/src/plugins/modules/resizing.d.ts +153 -153
  112. package/src/plugins/modules/resizing.js +902 -902
  113. package/src/plugins/submenu/align.d.ts +4 -4
  114. package/src/plugins/submenu/align.js +160 -160
  115. package/src/plugins/submenu/font.d.ts +4 -4
  116. package/src/plugins/submenu/font.js +123 -123
  117. package/src/plugins/submenu/fontColor.d.ts +4 -4
  118. package/src/plugins/submenu/fontColor.js +0 -0
  119. package/src/plugins/submenu/fontSize.d.ts +4 -4
  120. package/src/plugins/submenu/fontSize.js +112 -112
  121. package/src/plugins/submenu/formatBlock.d.ts +4 -4
  122. package/src/plugins/submenu/formatBlock.js +273 -273
  123. package/src/plugins/submenu/hiliteColor.d.ts +4 -4
  124. package/src/plugins/submenu/hiliteColor.js +0 -0
  125. package/src/plugins/submenu/horizontalRule.d.ts +4 -4
  126. package/src/plugins/submenu/horizontalRule.js +98 -98
  127. package/src/plugins/submenu/lineHeight.d.ts +4 -4
  128. package/src/plugins/submenu/lineHeight.js +104 -104
  129. package/src/plugins/submenu/list.d.ts +4 -4
  130. package/src/plugins/submenu/list.js +456 -456
  131. package/src/plugins/submenu/paragraphStyle.d.ts +4 -4
  132. package/src/plugins/submenu/paragraphStyle.js +135 -135
  133. package/src/plugins/submenu/table.d.ts +4 -4
  134. package/src/plugins/submenu/template.d.ts +4 -4
  135. package/src/plugins/submenu/template.js +71 -71
  136. package/src/plugins/submenu/textStyle.d.ts +4 -4
  137. package/src/plugins/submenu/textStyle.js +167 -167
  138. package/src/suneditor.d.ts +9 -9
  139. package/src/suneditor.js +75 -75
  140. package/src/suneditor_build.js +20 -17
  141. package/README_V3_TEMP.md +0 -630
@@ -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,123 +1,123 @@
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') || '').replace(/'|"/g, '')) {
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
- let value = e.target.getAttribute('data-value');
109
-
110
- if (value) {
111
- const newNode = this.util.createElement('SPAN');
112
- if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
113
- value = '"' + value + '"';
114
- }
115
- newNode.style.fontFamily = value;
116
- this.nodeChange(newNode, ['font-family'], null, null);
117
- } else {
118
- this.nodeChange(null, ['font-family'], ['span'], true);
119
- }
120
-
121
- this.submenuOff();
122
- }
123
- };
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') || '').replace(/'|"/g, '')) {
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
+ let value = e.target.getAttribute('data-value');
109
+
110
+ if (value) {
111
+ const newNode = this.util.createElement('SPAN');
112
+ if (/[\s\d\W]/.test(value) && !/^['"].*['"]$/.test(value)) {
113
+ value = '"' + value + '"';
114
+ }
115
+ newNode.style.fontFamily = value;
116
+ this.nodeChange(newNode, ['font-family'], null, null);
117
+ } else {
118
+ this.nodeChange(null, ['font-family'], ['span'], true);
119
+ }
120
+
121
+ this.submenuOff();
122
+ }
123
+ };
@@ -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;