forked from tinymce/tinymce
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
183 lines (177 loc) · 8.93 KB
/
demo.html
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
/* .tox-editor-header,
.tox-mbtn--select {
direction: rtl !important;
} */
.tox-tinymce {
min-height: 100% !important;
}
/* @font-face {
font-family: maaharaa;
src: url(MVMaaharaa.woff2);
}
body,
.body > form > div {
font-family: maaharaa !important;
} */
</style>
<script src="js/tinymce/tinymce.js" referrerpolicy="origin"></script>
<script>
var spellcheckTimeout;
function triggerSpellcheck() {
clearTimeout(spellcheckTimeout);
spellcheckTimeout = setTimeout(function () {
tinymce.activeEditor.execCommand("mceSpellCheck");
}, 1000);
}
tinymce.init({
selector: "textarea#format-custom",
branding: false,
content_css: "document",
height: 500,
plugins: "table wordcount directionality spellchecker code",
skin: "skin-ui-dhivehi",
directionality: "rtl",
language: "dv",
toolbar:
"undo redo styleselect bold italic alignleft aligncenter alignright alignjustify | bullist numlist outdent indent rtl ltr spellchecker code",
spellchecker_callback: function (method, text, success, failure) {
var words = text.match(this.getWordCharPattern());
if (method === "spellcheck") {
var suggestions = {};
for (var i = 0; i < words.length; i++) {
//suggestions[words[i]] = ["First", "Second"];
}
suggestions["luv"] = ["Loabi", "Lobs"];
success({ words: suggestions, dictionary: [] });
} else if (method === "addToDictionary") {
// Add word to dictionary here
success();
}
},
setup: function (editor) {
editor.on("keyup", function (e) {
if (e.keyCode == 32) {
console.log("test");
triggerSpellcheck();
}
});
},
spellchecker_languages: "Divehi=dv,English=en",
// spellchecker_rpc_url: "spell-checker-response.json",
content_style:
".left { text-align: left; } " +
"img.left { float: left; } " +
"table.left { float: left; } " +
".right { text-align: right; } " +
"img.right { float: right; } " +
"table.right { float: right; } " +
".center { text-align: center; } " +
"img.center { display: block; margin: 0 auto; } " +
"table.center { display: block; margin: 0 auto; } " +
".full { text-align: justify; } " +
"img.full { display: block; margin: 0 auto; } " +
"table.full { display: block; margin: 0 auto; } " +
".bold { font-weight: bold; } " +
".italic { font-style: italic; } " +
".underline { text-decoration: underline; } " +
".example1 {} " +
"body { font-family:Helvetica,Arial,sans-serif; font-size:14px }" +
".tablerow1 { background-color: #D3D3D3; }",
formats: {
alignleft: {
selector:
"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video",
classes: "left",
},
aligncenter: {
selector:
"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video",
classes: "center",
},
alignright: {
selector:
"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video",
classes: "right",
},
alignfull: {
selector:
"p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li,table,img,audio,video",
classes: "full",
},
bold: { inline: "span", classes: "bold" },
italic: { inline: "span", classes: "italic" },
underline: { inline: "span", classes: "underline", exact: true },
strikethrough: { inline: "del" },
customformat: {
inline: "span",
styles: { color: "#00ff00", fontSize: "20px" },
attributes: { title: "My custom format" },
classes: "example1",
},
},
style_formats: [
{ title: "Custom format", format: "customformat" },
{ title: "Align left", format: "alignleft" },
{ title: "Align center", format: "aligncenter" },
{ title: "Align right", format: "alignright" },
{ title: "Align full", format: "alignfull" },
{ title: "Bold text", inline: "strong" },
{ title: "Red text", inline: "span", styles: { color: "#ff0000" } },
{ title: "Red header", block: "h1", styles: { color: "#ff0000" } },
{
title: "Badge",
inline: "span",
styles: {
display: "inline-block",
border: "1px solid #2276d2",
"border-radius": "5px",
padding: "2px 5px",
margin: "0 2px",
color: "#2276d2",
},
},
{ title: "Table row 1", selector: "tr", classes: "tablerow1" },
{ title: "Image formats" },
{
title: "Image Left",
selector: "img",
styles: { float: "left", margin: "0 10px 0 10px" },
},
{
title: "Image Right",
selector: "img",
styles: { float: "right", margin: "0 0 10px 10px" },
},
],
});
</script>
</head>
<body>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
<textarea id="format-custom">
<h1>ގާނޫނު އަސާސީގެ ފުރަތަމަ ސަފުހާ</h1>
<p>އެއް ދުވަހެއްގެ ޖަލްސާގައި، ޤާނޫނު އަސާސީގެ ފުރަތަމަ ޞަފުހާގައި ލިޔާނޭ ލިޔުމަކާ މެދު ކުރެވުނު ވަރަށް ވަރުގަދަ ބަހުޘް އެއް އަޅުގަނޑު ހަނދާން އެބަހުއްޓެވެ… އެކި ބޭފުޅުންނަށް ފެނިވަޑައިގަންނަވާ އެކި ޢިބާރާތްތައް މޭޒު މައްޗަށް ހުށަހެޅެމުން ދެއެވެ. އަލްފާޟިލް ޙުސައިން ޙިލްމީ ދީދީގެ ދައުރު އަތުވެއްޖެއެވެ. އޭނާއަށް ފެނިވަޑައިގަތީ ރައިވަރަކުން ނިންމާލުމަށެވެ. ބައެއް މެންބަރުން ދިޔައީ ”އައްޑިހަޔަށް އަރައިގެންނޭ“ ދެންނެވުމުން، އެއީ އެ މެމްބަރުންނަށް ރައްދުކުރެވުނު އިހާނަތްތެރި ބަހެއްކަމުގައި ހިމެނޭނޭ ބާވައެވެ؟ ޙުސައިން ޙިލްމީ ދީދީ ހުށަހެޅުއްވި ރައިވަރަކީ – ”ބޭހާއި ނުކުޅޭތި ބަޑި، ނޭގި ހުއްޓާ އަދާދާނެ، ގޭމަ ކޮޔާ ފިހިދާނެ“</p>
<h1>The Incomparable Yosemite</h1>
<p>The most famous and accessible of these cañon valleys, and also the one that presents their most striking and sublime features on the grandest scale, is the <a title="Link to Wikipedia about Yosemite national park" href="https://en.wikipedia.org/wiki/Yosemite_National_Park">Yosemite</a>, situated in the basin of the <span style="color: #9b59b6;">Merced River at an elevation of 4000 feet above the level of the sea</span>. It is about <span style="background-color: #fffcc7;">seven miles long, half a mile to a mile wide, and nearly a mile deep</span> in the solid granite flank of the range. </p>
<blockquote>
<p>Down through the middle of the Valley flows the crystal Merced, <span style="text-decoration: line-through;">River of Mercy</span>, peacefully quiet, reflecting lilies and trees and the onlooking rocks;</p>
</blockquote>
<p>The walls are made up of rocks, mountains in size, partly separated from each other by side cañons, and they are so sheer in front, and so compactly and harmoniously arranged on a level floor, that the Valley, comprehensively seen, <strong>looks like an immense hall or temple lighted from above</strong>.</p>
<p>Awful in stern, immovable majesty, how softly these rocks are adorned, and how fine and reassuring the company they keep: their feet among beautiful groves and meadows, their brows in the sky, a thousand flowers leaning confidingly against their feet, bathed in floods of water, floods of light, while the snow and waterfalls, the winds and avalanches and clouds shine and sing and wreathe about them as the years go by, and myriads of small winged creatures</p>
<ul>
<li>birds</li>
<li>bees</li>
<li>butterflies</li>
</ul>
<p>give glad animation and help to make all the air into music. Down through the middle of the Valley flows the crystal Merced, River of Mercy, peacefully quiet, reflecting lilies and trees and the onlooking rocks</p>
</textarea>
</form>
</body>
</html>