Skip to content

Commit 7d8441f

Browse files
wangfupeng1988wangfupeng1988
committed
增加菜单 italic redo undo strikethrough underline
1 parent 4b3b199 commit 7d8441f

10 files changed

Lines changed: 503 additions & 4 deletions

File tree

‎release/wangEditor.js‎

Lines changed: 226 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -352,7 +352,7 @@ function $(selector) {
352352
*/
353353

354354
var config = {
355-
menus: ['bold', 'head', 'link']
355+
menus: ['bold', 'italic', 'underline', 'strikeThrough', 'head', 'link', 'undo', 'redo']
356356
};
357357

358358
/*
@@ -868,6 +868,221 @@ Link.prototype = {
868868
}
869869
};
870870

871+
/*
872+
italic-menu
873+
*/
874+
// 构造函数
875+
function Italic(editor) {
876+
this.editor = editor;
877+
this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-italic"><i/>\n </div>');
878+
this.type = 'click';
879+
880+
// 当前是否 active 状态
881+
this._active = false;
882+
}
883+
884+
// 原型
885+
Italic.prototype = {
886+
constructor: Italic,
887+
888+
// 点击事件
889+
onClick: function onClick(e) {
890+
// 点击菜单将触发这里
891+
892+
var editor = this.editor;
893+
var isSeleEmpty = editor.selection.isSelectionEmpty();
894+
895+
if (isSeleEmpty) {
896+
// 选区是空的，插入并选中一个“空白”
897+
editor.selection.createEmptyRange();
898+
}
899+
900+
// 执行 italic 命令
901+
editor.cmd.do('italic');
902+
903+
if (isSeleEmpty) {
904+
// 需要将选取折叠起来
905+
editor.selection.collapseRange();
906+
editor.selection.restoreSelection();
907+
}
908+
},
909+
910+
// 试图改变 active 状态
911+
tryChangeActive: function tryChangeActive(e) {
912+
var editor = this.editor;
913+
var $elem = this.$elem;
914+
if (editor.cmd.queryCommandState('italic')) {
915+
this._active = true;
916+
$elem.addClass('w-e-active');
917+
} else {
918+
this._active = false;
919+
$elem.removeClass('w-e-active');
920+
}
921+
}
922+
};
923+
924+
/*
925+
redo-menu
926+
*/
927+
// 构造函数
928+
function Redo(editor) {
929+
this.editor = editor;
930+
this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-redo"><i/>\n </div>');
931+
this.type = 'click';
932+
933+
// 当前是否 active 状态
934+
this._active = false;
935+
}
936+
937+
// 原型
938+
Redo.prototype = {
939+
constructor: Redo,
940+
941+
// 点击事件
942+
onClick: function onClick(e) {
943+
// 点击菜单将触发这里
944+
945+
var editor = this.editor;
946+
947+
// 执行 redo 命令
948+
editor.cmd.do('redo');
949+
}
950+
};
951+
952+
/*
953+
strikeThrough-menu
954+
*/
955+
// 构造函数
956+
function StrikeThrough(editor) {
957+
this.editor = editor;
958+
this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-strikethrough"><i/>\n </div>');
959+
this.type = 'click';
960+
961+
// 当前是否 active 状态
962+
this._active = false;
963+
}
964+
965+
// 原型
966+
StrikeThrough.prototype = {
967+
constructor: StrikeThrough,
968+
969+
// 点击事件
970+
onClick: function onClick(e) {
971+
// 点击菜单将触发这里
972+
973+
var editor = this.editor;
974+
var isSeleEmpty = editor.selection.isSelectionEmpty();
975+
976+
if (isSeleEmpty) {
977+
// 选区是空的，插入并选中一个“空白”
978+
editor.selection.createEmptyRange();
979+
}
980+
981+
// 执行 strikeThrough 命令
982+
editor.cmd.do('strikeThrough');
983+
984+
if (isSeleEmpty) {
985+
// 需要将选取折叠起来
986+
editor.selection.collapseRange();
987+
editor.selection.restoreSelection();
988+
}
989+
},
990+
991+
// 试图改变 active 状态
992+
tryChangeActive: function tryChangeActive(e) {
993+
var editor = this.editor;
994+
var $elem = this.$elem;
995+
if (editor.cmd.queryCommandState('strikeThrough')) {
996+
this._active = true;
997+
$elem.addClass('w-e-active');
998+
} else {
999+
this._active = false;
1000+
$elem.removeClass('w-e-active');
1001+
}
1002+
}
1003+
};
1004+
1005+
/*
1006+
underline-menu
1007+
*/
1008+
// 构造函数
1009+
function Underline(editor) {
1010+
this.editor = editor;
1011+
this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-underline"><i/>\n </div>');
1012+
this.type = 'click';
1013+
1014+
// 当前是否 active 状态
1015+
this._active = false;
1016+
}
1017+
1018+
// 原型
1019+
Underline.prototype = {
1020+
constructor: Underline,
1021+
1022+
// 点击事件
1023+
onClick: function onClick(e) {
1024+
// 点击菜单将触发这里
1025+
1026+
var editor = this.editor;
1027+
var isSeleEmpty = editor.selection.isSelectionEmpty();
1028+
1029+
if (isSeleEmpty) {
1030+
// 选区是空的，插入并选中一个“空白”
1031+
editor.selection.createEmptyRange();
1032+
}
1033+
1034+
// 执行 underline 命令
1035+
editor.cmd.do('underline');
1036+
1037+
if (isSeleEmpty) {
1038+
// 需要将选取折叠起来
1039+
editor.selection.collapseRange();
1040+
editor.selection.restoreSelection();
1041+
}
1042+
},
1043+
1044+
// 试图改变 active 状态
1045+
tryChangeActive: function tryChangeActive(e) {
1046+
var editor = this.editor;
1047+
var $elem = this.$elem;
1048+
if (editor.cmd.queryCommandState('underline')) {
1049+
this._active = true;
1050+
$elem.addClass('w-e-active');
1051+
} else {
1052+
this._active = false;
1053+
$elem.removeClass('w-e-active');
1054+
}
1055+
}
1056+
};
1057+
1058+
/*
1059+
undo-menu
1060+
*/
1061+
// 构造函数
1062+
function Undo(editor) {
1063+
this.editor = editor;
1064+
this.$elem = $('<div class="w-e-menu">\n <i class="w-e-icon-undo"><i/>\n </div>');
1065+
this.type = 'click';
1066+
1067+
// 当前是否 active 状态
1068+
this._active = false;
1069+
}
1070+
1071+
// 原型
1072+
Undo.prototype = {
1073+
constructor: Undo,
1074+
1075+
// 点击事件
1076+
onClick: function onClick(e) {
1077+
// 点击菜单将触发这里
1078+
1079+
var editor = this.editor;
1080+
1081+
// 执行 undo 命令
1082+
editor.cmd.do('undo');
1083+
}
1084+
};
1085+
8711086
/*
8721087
所有菜单的汇总
8731088
*/
@@ -881,6 +1096,16 @@ MenuConstructors.head = Head;
8811096

8821097
MenuConstructors.link = Link;
8831098

1099+
MenuConstructors.italic = Italic;
1100+
1101+
MenuConstructors.redo = Redo;
1102+
1103+
MenuConstructors.strikeThrough = StrikeThrough;
1104+
1105+
MenuConstructors.underline = Underline;
1106+
1107+
MenuConstructors.undo = Undo;
1108+
8841109
/*
8851110
菜单集合
8861111
*/

‎release/wangEditor.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎release/wangEditor.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/js/config.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,16 @@
33
*/
44

55
const config = {
6-
menus: ['bold', 'head', 'link']
6+
menus: [
7+
'bold',
8+
'italic',
9+
'underline',
10+
'strikeThrough',
11+
'head',
12+
'link',
13+
'undo',
14+
'redo'
15+
]
716
}
817

918
export default config

‎src/js/menus/italic/index.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
/*
2+
italic-menu
3+
*/
4+
import $ from '../../util/dom-core.js'
5+
6+
// 构造函数
7+
function Italic(editor) {
8+
this.editor = editor
9+
this.$elem = $(
10+
`<div class="w-e-menu">
11+
<i class="w-e-icon-italic"><i/>
12+
</div>`
13+
)
14+
this.type = 'click'
15+
16+
// 当前是否 active 状态
17+
this._active = false
18+
}
19+
20+
// 原型
21+
Italic.prototype = {
22+
constructor: Italic,
23+
24+
// 点击事件
25+
onClick: function (e) {
26+
// 点击菜单将触发这里
27+
28+
const editor = this.editor
29+
const isSeleEmpty = editor.selection.isSelectionEmpty()
30+
31+
if (isSeleEmpty) {
32+
// 选区是空的，插入并选中一个“空白”
33+
editor.selection.createEmptyRange()
34+
}
35+
36+
// 执行 italic 命令
37+
editor.cmd.do('italic')
38+
39+
if (isSeleEmpty) {
40+
// 需要将选取折叠起来
41+
editor.selection.collapseRange()
42+
editor.selection.restoreSelection()
43+
}
44+
},
45+
46+
// 试图改变 active 状态
47+
tryChangeActive: function (e) {
48+
const editor = this.editor
49+
const $elem = this.$elem
50+
if (editor.cmd.queryCommandState('italic')) {
51+
this._active = true
52+
$elem.addClass('w-e-active')
53+
} else {
54+
this._active = false
55+
$elem.removeClass('w-e-active')
56+
}
57+
}
58+
}
59+
60+
export default Italic

‎src/js/menus/menu-list.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,20 @@ MenuConstructors.head = Head
1414
import Link from './link/index.js'
1515
MenuConstructors.link = Link
1616

17+
import Italic from './italic/index.js'
18+
MenuConstructors.italic = Italic
19+
20+
import Redo from './redo/index.js'
21+
MenuConstructors.redo = Redo
22+
23+
import StrikeThrough from './strikethrough/index.js'
24+
MenuConstructors.strikeThrough = StrikeThrough
25+
26+
import Underline from './underline/index.js'
27+
MenuConstructors.underline = Underline
28+
29+
import Undo from './undo/index.js'
30+
MenuConstructors.undo = Undo
31+
1732
// 吐出所有菜单集合
1833
export default MenuConstructors

‎src/js/menus/redo/index.js‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/*
2+
redo-menu
3+
*/
4+
import $ from '../../util/dom-core.js'
5+
6+
// 构造函数
7+
function Redo(editor) {
8+
this.editor = editor
9+
this.$elem = $(
10+
`<div class="w-e-menu">
11+
<i class="w-e-icon-redo"><i/>
12+
</div>`
13+
)
14+
this.type = 'click'
15+
16+
// 当前是否 active 状态
17+
this._active = false
18+
}
19+
20+
// 原型
21+
Redo.prototype = {
22+
constructor: Redo,
23+
24+
// 点击事件
25+
onClick: function (e) {
26+
// 点击菜单将触发这里
27+
28+
const editor = this.editor
29+
30+
// 执行 redo 命令
31+
editor.cmd.do('redo')
32+
}
33+
}
34+
35+
export default Redo

0 commit comments

Comments
 (0)