/
index.html
309 lines (274 loc) · 13.3 KB
/
index.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
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<title>Froala Editor Examples</title>
<style>
body {
line-height: 1.5;
font-family: sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
section {
width: 90%;
margin: auto;
padding-top: 30px;
}
#data-list {
-webkit-column-gap: 30px;
/* Chrome, Safari, Opera */
-moz-column-gap: 30px;
/* Firefox */
column-gap: 30px;
-webkit-column-count: 4;
/* Chrome, Safari, Opera */
-moz-column-count: 4;
/* Firefox */
column-count: 4;
}
#data-list>div {
page-break-inside: avoid;
}
#data-list>div:after {
content: "";
display: block;
height: 20px;
}
h1 {
font-size: 36px;
font-weight: 300;
text-align: center;
}
h2 {
margin: 0;
color: #252525;
border-left: 3px solid #0098f7;
padding-left: 10px;
font-weight: 400;
}
ul {
padding-left: 5px;
}
ul li {
list-style: none;
font-size: 16px;
}
ul li a {
text-decoration: none;
color: #515151;
}
</style>
</head>
<body>
<section>
<h1>Froala Editor Examples</h1>
<br/>
<div id="data-list">
<div>
<h2>Popular</h2>
<ul>
<li><a href="./html/popular/full.html" title="Full Featured">Full Featured</a></li>
<li><a href="./html/popular/toolbar_inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="./html/popular/two_instances.html" title="Multiple Editor Instances">Multiple Editor Instances</a></li>
<li><a href="./html/popular/textarea.html" title="Textarea Editor">Textarea Editor</a></li>
<li><a href="./html/popular/full_page.html" title="Full Page">Full Page</a></li>
<li><a href="./html/popular/iframe.html" title="Iframe">Iframe</a></li>
<li><a href="./html/popular/disable_edit.html" title="Non-editable Zones">Non-editable Zones</a></li>
<li><a href="./html/popular/z_index.html" title="Z-index">Z-index</a></li>
<li><a href="./html/popular/init_on_click.html" title="Init on Click">Init on Click</a></li>
<li><a href="./html/popular/toolbar_buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="./html/popular/disable_paragraphs.html" title="Disable Paragraphs">Disable Paragraphs</a></li>
</ul>
</div>
<div>
<h2>3rd Party Integration</h2>
<ul>
<li><a href="./html/3rd-party/bootstrap/grid.html" title="Bootstrap Grid">Bootstrap Grid</a></li>
<li><a href="./html/3rd-party/bootstrap/lists.html" title="Bootstrap List Group">Bootstrap List Group</a></li>
<li><a href="./html/3rd-party/bootstrap/modal.html" title="Bootstrap Modal">Bootstrap Modal</a></li>
<li><a href="./html/3rd-party/jquery/mobile.html" title="jQuery Mobile">jQuery Mobile</a></li>
<li><a href="./html/3rd-party/jquery/ui_modal.html" title="jQuery UI Modal">jQuery UI Modal</a></li>
<li><a href="./html/3rd-party/code-mirror.html" title="Code Mirror">Code Mirror</a></li>
<li><a href="./html/3rd-party/spell-checker/spell-checker.html" title="Spell Checker">Spell Checker</a></li>
</ul>
</div>
<div>
<h2>API</h2>
<ul>
<li><a href="./html/api/init_destroy.html" title="Init / Destroy Editor">Init / Destroy Editor</a></li>
<li><a href="./html/api/get_html.html" title="Get HTML">Get Edited HTML</a></li>
<li><a href="./html/api/insert_html.html" title="Insert HTML">Insert HTML</a></li>
<li><a href="./html/api/selection.html" title="Save / Restore Selection">Save / Restore Selection</a></li>
<li><a href="./html/api/live_content_preview.html" title="Live Content Preview">Live Content Preview</a></li>
<li><a href="./html/api/live_code_preview.html" title="Live Code Preview">Live Code Preview</a></li>
</ul>
</div>
<div>
<h2>International</h2>
<ul>
<li><a href="./html/international/direction_rtl.html" title="Editor Direction RTL">Editor Direction RTL</a></li>
<li><a href="./html/international/language.html" title="Change Language">Change Language</a></li>
<li><a href="./html/international/rtl_ltr_buttons.html" title="RTL / LTR Buttons">RTL / LTR Buttons</a></li>
</ul>
</div>
<div>
<h2>Buttons</h2>
<ul>
<li><a href="./html/buttons/custom_buttons.html" title="Custom Buttons">Custom Buttons</a></li>
<li><a href="./html/buttons/custom_dropdown.html" title="Custom Dropdown">Custom Dropdown</a></li>
<li><a href="./html/buttons/external_button.html" title="External Button">External Button</a></li>
<li><a href="./html/buttons/subscript_superscript.html" title="Subscript and Superscript">Subscript and Superscript</a></li>
</ul>
</div>
<div>
<h2>Events</h2>
<ul>
<li><a href="./html/events/blur_focus.html" title="Blur / Focus">Blur / Focus</a></li>
<li><a href="./html/events/content_changed.html" title="Content Changed">Content Changed</a></li>
<li><a href="./html/events/drop.html" title="Drop">Drop</a></li>
<li><a href="./html/events/image_removed.html" title="Image Removed">Image Removed</a></li>
<li><a href="./html/events/initialized_destroy.html" title="Initialized / Destroy">Initialized / Destroy</a></li>
</ul>
</div>
<div>
<h2>Images</h2>
<ul>
<li><a href="./html/image/custom_button.html" title="Custom Image Button">Custom Image Button</a></li>
<li><a href="./html/image/image_styles.html" title="Image Styles">Image Styles</a></li>
<li><a href="./html/image/default_width.html" title="Default Width">Default Width</a></li>
<li><a href="./html/image/insert_base64.html" title="Insert as Base64">Insert as Base64</a></li>
</ul>
</div>
<div>
<h2>Init inside iframe</h2>
<ul>
<li><a href="./html/init_inside_iframe/basic.html" title="Basic Editor inside iframe">Basic Editor</a></li>
<li><a href="./html/init_inside_iframe/inline.html" title="Inline Editor inside iframe">Inline Editor</a></li>
</ul>
</div>
<div>
<h2>Init on click</h2>
<ul>
<li><a href="./html/init_on_click/basic.html" title="Basic Editor">Basic Editor</a></li>
<li><a href="./html/init_on_click/inline.html" title="Inline Editor">Inline Editor</a></li>
<li><a href="./html/init_on_click/two_editors.html" title="2 Editors">2 Editors</a></li>
</ul>
</div>
<div>
<h2>Initialization</h2>
<ul>
<li><a href="./html/initialization/init_on_click.html" title="Init on click">Init on Click</a></li>
<li><a href="./html/initialization/init_on_button.html" title="Init on Button">Init on Button</a></li>
<li><a href="./html/initialization/init_on_link.html" title="Init on Link">Init on Link</a></li>
<li><a href="./html/initialization/init_on_image.html" title="Init on Image">Init on Image</a></li>
<li><a href="./html/initialization/init_on_h1.html" title="Init on H1">Init on H1</a></li>
<li><a href="./html/initialization/initialized_event.html" title="Initialized Event">Initialized Event</a></li>
<li><a href="./html/initialization/edit_in_popup.html" title="Edit in Popup">Edit in Popup</a></li>
</ul>
</div>
<div>
<h2>Links</h2>
<ul>
<li><a href="./html/link/link_styles.html" title="Link Styles">Link Styles</a></li>
<li><a href="./html/link/predefined_links.html" title="Predefined Links">Predefined Links</a></li>
<li><a href="./html/link/custom_validation.html" title="Custom Link Validation">Custom Link Validation</a></li>
</ul>
</div>
<div>
<h2>Plugins</h2>
<ul>
<li><a href="./html/plugins/line_breaker.html" title="Line Breaker">Line Breaker</a></li>
<li><a href="./html/plugins/quick_insert.html" title="Quick Insert">Quick Insert</a></li>
<li><a href="./html/plugins/char_counter.html" title="Char Counter">Char Counter</a></li>
<li><a href="./html/plugins/full_screen.html" title="Full Screen">Full Screen</a></li>
</ul>
</div>
<div>
<h2>Popups</h2>
<ul>
<li><a href="./html/popups/colors.html" title="Custom Color Picker">Custom Color Picker</a></li>
<li><a href="./html/popups/emoticons.html" title="Custom Emoticons">Custom Emoticons</a></li>
<li><a href="./html/popups/custom.html" title="Custom Popup">Custom Popup</a></li>
</ul>
</div>
<div>
<h2>Styling</h2>
<ul>
<li><a href="./html/styling/font_family.html" title="Font Family">Font Family</a></li>
<li><a href="./html/styling/inline.html" title="Inline Styling">Inline Styling</a></li>
<li><a href="./html/styling/paragraph.html" title="Paragraph Styling">Paragraph Styling</a></li>
<li><a href="./html/styling/placeholder.html" title="Placeholder">Placeholder</a></li>
<li><a href="./html/styling/height.html" title="Predefined Height">Predefined Height</a></li>
<li><a href="./html/styling/adjustable_height.html" title="Auto-Adjustable Height">Auto-Adjustable Height</a></li>
<li><a href="./html/styling/width.html" title="Predefined Width">Predefined Width</a></li>
</ul>
</div>
<div>
<h2>Themes</h2>
<ul>
<li><a href="./html/themes/dark.html" title="Dark Theme">Dark Theme</a></li>
<li><a href="./html/themes/gray.html" title="Gray Theme">Gray Theme</a></li>
<li><a href="./html/themes/royal.html" title="Royal Theme">Royal Theme</a></li>
</ul>
</div>
<div>
<h2>Table</h2>
<ul>
<li><a href="./html/table/nested.html" title="Nested Tables">Nested Tables</a></li>
<li><a href="./html/table/resize.html" title="Resize Table">Resize Table</a></li>
<li><a href="./html/table/insert_helper.html" title="Table Insert Helper">Table Insert Helper</a></li>
<li><a href="./html/table/style.html" title="Table Style">Table Style</a></li>
<li><a href="./html/table/cell_style.html" title="Table Cell Style">Table Cell Style</a></li>
</ul>
</div>
<div>
<h2>Toolbar</h2>
<ul>
<li><a href="./html/toolbar/inline.html" title="Inline Toolbar">Inline Toolbar</a></li>
<li><a href="./html/toolbar/sticky.html" title="Sticky Toolbar">Sticky Toolbar</a></li>
<li><a href="./html/toolbar/buttons.html" title="Change Toolbar Buttons">Change Toolbar Buttons</a></li>
<li><a href="./html/toolbar/external.html" title="External Shared Toolbar">External Shared Toolbar</a></li>
<li><a href="./html/toolbar/external_inline.html" title="External Shared Inline Toolbar">External Shared Inline Toolbar</a></li>
<li><a href="./html/toolbar/bottom.html" title="Toolbar Bottom">Toolbar Bottom</a></li>
<li><a href="./html/toolbar/offset.html" title="Toolbar with Offset">Toolbar with Offset</a></li>
<li><a href="./html/toolbar/bottom_offset.html" title="Toolbar Bottom">Toolbar Bottom with Offset</a></li>
<li><a href="./html/toolbar/show_selection.html" title="Show Selection Details">Show Selection Details</a></li>
<li><a href="./html/toolbar/inline_selection.html" title="Inline Toolbar without Selection">Inline Toolbar without Selection</a></li>
</ul>
</div>
<div>
<h2>Paragraph Modes</h2>
<ul>
<li><a href="./html/paragraph_modes/enter_br.html" title="Enter BR">Enter BR</a></li>
<li><a href="./html/paragraph_modes/enter_div.html" title="Enter DIV">Enter DIV</a></li>
<li><a href="./html/paragraph_modes/enter_p.html" title="Enter P">Enter P</a></li>
</ul>
</div>
<div>
<h2>Misc</h2>
<ul>
<li><a href="./html/misc/scrollable_container.html" title="Scrollable Container">Scrollable Container</a></li>
<li><a href="./html/misc/scrollable_container_inline.html" title="Scrollable Container Inline Editor">Scrollable Container Inline</a></li>
</ul>
</div>
<div>
<h2>Typing</h2>
<ul>
<li><a href="./html/typing/tab.html" title="TAB Key">TAB Key</a></li>
<li><a href="./html/typing/shortcuts.html" title="Shortcuts">Shortcuts</a></li>
<li><a href="./html/typing/keep_format.html" title="Keep Format on Delete">Keep Format on Delete</a></li>
</ul>
</div>
<div>
<h2>Paste</h2>
<ul>
<li><a href="./html/paste/plain.html" title="Plain Paste">Plain Paste</a></li>
<li><a href="./html/paste/attrs.html" title="Allowed / Denied Attributes">Allowed / Denied Attributes</a></li>
<li><a href="./html/paste/tags.html" title="Allowed / Denied Tags">Allowed / Denied Tags</a></li>
</ul>
</div>
</div>
</section>
</body>