focus.html
4.4 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
<!DOCTYPE html>
<html>
<head>
<title>Focus tests</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<!--
<script type="text/javascript">less = {env: "development", async: false};</script>
<link rel="stylesheet/less" type="text/css" href="../../js/tinymce/skins/lightgray/skin.dev.less">
<script src="../../node_modules/less/dist/less-1.4.2.min.js"></script>
-->
<script src="../../js/tinymce/tinymce.dev.js"></script>
<script src="../../js/tinymce/plugins/table/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/paste/plugin.dev.js"></script>
<script src="../../js/tinymce/plugins/spellchecker/plugin.dev.js"></script>
<script>
tinymce.init({
selector: "textarea.editor",
theme: "modern",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor importcss"
],
add_unload_trigger: false,
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",
setup: function(ed) {
ed.on('focus blur activate deactivate', function(e) {
console.log(e.type + ':' + ed.id);
});
}
});
tinymce.init({
selector: "div.editor",
inline: true,
theme: "modern",
plugins: [
"advlist autolink link image lists charmap print preview hr anchor pagebreak spellchecker",
"searchreplace wordcount visualblocks visualchars code fullscreen insertdatetime media nonbreaking",
"save table contextmenu directionality emoticons template paste textcolor importcss"
],
add_unload_trigger: false,
toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | print preview media fullpage | forecolor backcolor emoticons table",
setup: function(ed) {
ed.on('focus blur activate deactivate', function(e) {
console.log(e.type + ':' + ed.id);
});
}
});
if (!window.console) {
console = {
log: function(text) {
document.body.appendChild(document.createTextNode(text));
document.body.appendChild(document.createElement('br'));
}
};
}
</script>
<style>
.editor {
border: 1px dashed black;
}
</style>
</head>
<body id="root">
<form method="post" action="http://www.tinymce.com/dump.php?example=true">
<div>
<div>
<textarea id="e1" class="editor">
<p>e1</p>
<table>
<tbody>
<tr>
<td>Cell</td>
</tr>
</tbody>
</table>
<p>Text2</p>
<div contenteditable="false">contentEditable:false</div>
<div tabindex="1">Block with tabindex:1</div>
<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
</textarea>
<div>
<button type="button">Button</button>
<a href="#">Link</a>
<button type="button" onclick="tinymce.activeEditor.execCommand('Bold');">Bold:active</button>
<button type="button" onclick="tinymce.get('e1').execCommand('Bold');">Bold:e1</button>
</div>
<textarea id="e2" class="editor">
<p>e2</p>
<table>
<tbody>
<tr>
<td>Cell</td>
</tr>
</tbody>
</table>
<p>Text2</p>
<div contenteditable="false">contentEditable:false</div>
<div tabindex="1">Block with tabindex:1</div>
<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
</textarea>
<div id="e3" class="editor">
<p>e3</p>
<table>
<tbody>
<tr>
<td>Cell</td>
</tr>
</tbody>
</table>
<p>Text2</p>
<div contenteditable="false">contentEditable:false</div>
<div tabindex="1">Block with tabindex:1</div>
<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
</div>
<div id="e4" class="editor">
<p>e4</p>
<table>
<tbody>
<tr>
<td>Cell</td>
</tr>
</tbody>
</table>
<p>Text2</p>
<div contenteditable="false">contentEditable:false</div>
<div tabindex="1">Block with tabindex:1</div>
<p>abc<span tabindex="1">Inline with tabindex:1</span>123</p>
</div>
</div>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</div>
</form>
</body>
</html>