-
Notifications
You must be signed in to change notification settings - Fork 31
/
Copy pathindex.html
534 lines (467 loc) · 25.6 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
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>TinyMCE Demos</title>
<style>
body {
color: #17224f;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.35;
margin: 0;
padding: 10vh 1rem;
}
body > header,
body > main {
margin: auto;
}
@media screen and (min-width: 700px) {
body > header,
body > main {
max-width: 620px;
padding-left: 200px;
}
}
body > header {
font-size: 1.25rem;
}
body > main {
}
section {
margin-top: 4rem;
}
section > header {
font-size: 1.25rem;
}
article {
box-sizing: border-box;
font-size: .875rem;
margin-top: 2rem;
}
@media screen and (min-width: 700px) {
aside {
position: fixed;
left: 2rem;
margin: auto;
top: calc(10vh + 3.5rem - 1.25rem);
width: 160px;
}
}
@media screen and (min-width: 852px) {
aside {
left: calc(50vw - (410px - 1rem));
}
}
aside > footer {
margin-top: 2rem;
}
nav {
margin-top: 2rem;
}
@media screen and (max-width: 699px) {
aside > footer {
display: none;
}
nav {
display: none;
}
}
nav a,
nav a:link,
nav a:visited {
color: #a0aac5;
font-size: 1.25rem;
line-height: 2rem;
}
@media screen and (min-width: 700px) {
nav a {
display: block;
}
}
h1 {
font-size: 2.5rem;
line-height: 3.5rem;
font-weight: 800;
letter-spacing: -.0125em;
margin: 3rem 0 1.5rem;
}
h2 {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 .5rem;
}
h3 {
font-size: 1.25rem;
margin: 0 0 .5rem;
}
a,
a:link,
a:visited {
color: #335DFF;
text-decoration: none;
}
a:hover {
color: #335DFF;
text-decoration: underline;
}
a:active {
color: #335DFF;
}
p {
margin: 0 0 .5rem 0;
}
span.tag {
background-color: #dfe3ec;
border-radius: 10em;
display: inline-block;
font-size: .6875rem;
font-weight: 600;
margin: .5rem .5rem 0 0;
padding: .25em 1em;
}
span.tag-plugin {
background-color: #4d71ff;
color: #eff1f5;
}
span.tag-buttons-and-menus {
background-color: #80ffd9;
color: #17224f;
}
span.tag-content-styling {
background-color: #ff6666;
color: #fff;
}
span.tag-formats {
background-color: #ffe4cc;
color: #ff6666;
}
span.tag-toolbar {
background-color: #DCEDC8;
color: #1553B6;
}
span.tag-dialogs {
background-color: #00bc84;
color: #fff;
}
span.tag-skinning {
background-color: #c1cdfa;
color: #0025b3;
}
span.tag-custom-elements {
background-color: #8B572A;
color: #FFF5DA;
}
span.tag-inline-mode {
background-color: #FF6A00;
color: #FEEC6F;
}
.github-badge {
display: block;
font-size: .75rem;
font-weight: 500;
background-color: #eff1f5;
padding: .5rem;
border-radius: 20px;
display: flex;
align-items: center;
max-width: 120px;
}
.github-badge:hover {
text-decoration: none;
}
.github-badge span {
display: block;
flex: 1 1 auto;
color: #17224f;
}
.github-badge svg {
margin-right: .5rem;
display: block;
flex: 0 0 28px;
fill: #17224f;
}
</style>
</head>
<body>
<aside>
<svg width="80" height="81" xmlns="http://www.w3.org/2000/svg"><path d="M52.87 0c13.597.08 27.035 11.299 27.035 27.65 0 0 .4 19.772-.44 25.263-1.88 12.492-11.278 21.125-24.235 23.313-11.678 2.268-18.597 3.58-20.837 4.018-.96.199-5.199.756-7.038.756C13.118 81 .2 70.417 0 53.35c0 0 0-18.22.16-23.035.48-12.452 9.158-22.517 25.675-25.74 0 0 20.196-3.899 21.036-4.058C48.791.16 50.911 0 52.87 0zm9.518 14.521l-31.994 6.167V33.1l-12.797 2.467v30.952l31.994-6.167V47.94l12.797-2.467V14.521zm-12.797 14.88V47.94l-19.197 3.7V33.1l19.197-3.7z" fill="#0C132C"/></svg>
<nav>
<a href="#tinymce-basics">TinyMCE Basics</a>
<a href="#images">Images</a>
<a href="#tables">Tables</a>
<a href="#tokens">Tokens</a>
<a href="#templates">Templates</a>
<a href="#email">Email</a>
<a href="#cool-demos">Cool Demos</a>
</nav>
<footer>
<a href="https://github.com/tinymce/tinymce-demos" class="github-badge">
<svg width="28" height="28" xmlns="http://www.w3.org/2000/svg"><path d="M16.337 20.882c.57.392 1.26 1.113 1.26 2.471v2.849a12.664 12.664 0 0 1-3.597.525 12.676 12.676 0 0 1-3.598-.525v-2.847c0-1.36.69-2.081 1.26-2.472-3.089-.318-6.4-1.432-6.4-6.76 0-1.496.529-2.72 1.405-3.662-.14-.36-.599-1.747.14-3.623 0 0 1.154-.373 3.77 1.4 1.086-.304 2.269-.406 3.423-.406 1.168 0 2.337.102 3.436.406 2.219-1.434 3.759-1.434 3.759-1.434.75 1.876.276 3.296.138 3.657.875.943 1.406 2.166 1.406 3.661 0 5.33-3.313 6.441-6.402 6.76M14 0C6.28 0 0 6.28 0 14s6.28 14 14 14 14-6.28 14-14S21.72 0 14 0"/></svg>
<span>View source on Github!</span>
</a>
</footer>
</aside>
<header>
<h1>TinyMCE Demos</h1>
<p>TinyMCE is a versatile tool that can be used for a wide variety of text editing tasks. This repository aims to inspire you and demonstrate different approaches to common use cases.</p>
<p>Every demo has a thorougly documented html file explaining the TinyMCE config as well as links to relevant documentation to make it easy to use these demos as basis for your own projects.</p>
<p>Make sure you visit the <a href="https://github.com/tinymce/tinymce-demos">Github repository and look through the HTML files</a>. Each demo is carefully documented to help you get the most out of TinyMCE.
<p>These demos are released under a MIT license. TinyMCE is licensed under a LGPL or commercial license</p>
</header>
<main>
<section>
<header id="tinymce-basics">
<h2>TinyMCE Basics</h2>
<p>The following demos showcase common how-tos like creating toolbar buttons, menu items, formattingS etc.</p>
</header>
<article>
<h3><a href="tinymce-basics/useful_styles_for_content_css.html">Useful styles to include in your content css</a></h3>
<p>The default content css is very barebone for maximum flexibility. Here are some tips on styles you can include in your content css to improve the writing experience.</p>
<span class="tag">Beginner</span>
<span class="tag tag-content-styling">Content Styling</span>
</article>
<article>
<h3><a href="tinymce-basics/badges.html">Badges with custom text and colors</a></h3>
<p>Badges are a common ui component in web apps to indicate statuses. Here is one of many ways to implement them in TinyMCE. This demo allows the user to choose their own text and colors through a dialog and demonstrating how to use formats to create a badge but use the selection api for editing it to make sure the whole badge gets the changes and not just the selected text within it.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-dialogs">Dialogs</span>
<span class="tag tag-formats">Formats</span>
</article>
<article>
<h3><a href="tinymce-basics/custom-toolbar-button-menu-and-context-toolbar.html">Creating custom toolbar buttons, menus and context toolbars.</a></h3>
<p>This demo uses a custom callout block to demonstrate how to create toolbar buttons, customizing the menu and showing a context toolbar when selecting the callout. It also shows how to add a custom icon pack for our custom toolbar button.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
</article>
<article>
<h3><a href="tinymce-basics/webapp-description-comment-reply-editor.html">Webapp description/comment/reply editor</a></h3>
<p>Here is a demo of an editor suitable for description fields, comment and replys found in webapps like Jira, Zendesk, Asana among others. This demo also includes how to use the text_pattern plugin to achieve automatic conversion of stars into proper lists etc.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-plugin">Plugin:Textpattern</span>
</article>
<article>
<h3><a href="tinymce-basics/bootstrap-rich-text-form.html">Implementing TinyMCE into Bootstrap</a></h3>
<p>Here is a guide on how to visually integrate TinyMCE into Bootstrap using our Bootstrap skin</p>
<span class="tag">Beginner</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-skinning">Skinning</span>
</article>
<article>
<h3><a href="tinymce-basics/right-aligned-toolbar-button.html">Right aligned toolbar buttons</a></h3>
<p>Normally we <strong>strongly advice against overriding the TinyMCE CSS</strong> to tweak the editor. The proper way to change the visual appearance is to make a skin. That said, there is always exceptions to a good rule and moving a couple of toolbar buttons to the right side of the toolbar is one example of such an exeception.</p>
<span class="tag">Beginner</span>
<span class="tag tag-toolbar">Toolbar</span>
</article>
<article>
<h3><a href="tinymce-basics/format-link-as-button.html">Format links to look like buttons</a></h3>
<p>This demo shows how to format a link into a call-to-action button by creating a custom format that applies a class to a link turning it into a button.</p>
<span class="tag">Beginner</span>
<span class="tag tag-formats">Formats</span>
</article>
<article>
<h3><a href="tinymce-basics/fonts.html">Using fonts</a></h3>
<p>Learn how to configure tinyMCE to use different fonts</p>
<span class="tag">Beginner</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-formats">Formats</span>
</article>
</section>
<section>
<header id="images">
<h2>Images</h2>
<p>Image related demos</p>
</header>
<article>
<h3><a href="images/toggle-image-size-context-toolbar.html">Toggle between image sizes and layouts using a context toolbar</a></h3>
<p>A popular pattern among blog and cmses is to allow the author to switch between different preset image sizes like small, wide and full as well as aligning the image left or right. It also showcases the quickbars plugin that uses medium style context toolbars when selecting content.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-formats">Formats</span>
</article>
<article>
<h3><a href="images/image-alt-text-context-form.html">Setting image alt text using context forms</a></h3>
<p>This demo shows how to use an inline context form to set the alt text on an image without having to use dialogs.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
</article>
</section>
<section>
<header id="tables">
<h2>Tables</h2>
<p>Demos showcasing diffrent ideas and concepts around tables</p>
</header>
<article>
<h3><a href="tables/customizing-the-table-toolbar.html">An alternate table context toolbar</a></h3>
<p>TinyMCE 5.4 introduced a couple of new table APIs we can use to construct an alternative table context toolbar. In this demo showcases a table header row/column toggle, a menu for choosing cell background color menu among other things.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-plugin">Plugin:Tables</span>
</article>
<article>
<h3><a href="tables/table-row-templates.html">Table row templates</a></h3>
<p>This demo illustrates inserting templated table rows. This could be useful when dealing with document automation or reporting type apps.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-plugin">Plugin:Tables</span>
</article>
</section>
<section>
<header id="tokens">
<h2>Tokens</h2>
<p>Tokens – or mail merge variables such as {{name.first}} – are often found in document automation and email editors. Here are three ways you can implement them in TinyMCE</p>
</header>
<article>
<h3><a href="tokens/text-based-token.html">Text-based tokens</a></h3>
<p>Transform any text based tokens such as {{name.first}} into spans that we can style and make noneditable – and transform back to pure text when storing the content. Perfect for existing systems as this approach is non-destructive to your content.</p>
<span class="tag">Beginner</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-plugin">Plugin:Noneditable</span>
</article>
<article>
<h3><a href="tokens/web-component-token.html">Web component tokens</a></h3>
<p>With the january 2020 release of Microsoft Edge, all major browsers now supports web components. Here we create a custom element called <code><inline-token></code> that becomes our token. Tip: You can render the custom element using vue/angular/react in your front-end</p>
<span class="tag">Master</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-custom-elements">Custom Elements</span>
</article>
<article>
<h3><a href="tokens/span-based-token.html">Span-based tokens</a></h3>
<p>Here we use a span with a class to wrap our token. A simple but powerful approach.</p>
<span class="tag">Beginner</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-content-styling">Content Styling</span>
</article>
</section>
<section>
<header id="templates">
<h2>Templates</h2>
<p>Examples and ideas how to implement templates and layouts with TinyMCE. For example how to only enable editing on select parts of a document or to enable multiple column support in TinyMCE</p>
</header>
<article>
<h3><a href="templates-and-layout/advanced-placeholder.html">Advanced Placeholders – pick a template from a blank document</a></h3>
<p>This demo shows how to implement an empty page placeholder UI containing complex HTML and buttons to insert templates. This feature is found in popular apps like Notion and Atlassian Confluence among others.</p>
<span class="tag">Master</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-plugin">Plugin:Templates</span>
</article>
<article>
<h3><a href="templates-and-layout/multiple-columns-using-css-columns.html">Create a multiple column format using CSS Columns</a></h3>
<p>Demo of how to implement columns using CSS Columns and a toolbar button to toggle columns on/off</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-formats">Formats</span>
</article>
<article>
<h3><a href="templates-and-layout/locked-down-template-inline-default.html">Locked down template example 1: using the default inline mode</a></h3>
<p>A popular question we get is how to lock down the editor in different ways to force a specific order of elements or prevent formatting. The way to do this is by using the inline mode which will give you more flexibility over the TinyMCE UI. Here is a basic example using the regular inline mode.</p>
<span class="tag">Intermediate</span>
<span class="tag tag-inline-mode">Inline Mode</span>
</article>
<article>
<h3><a href="templates-and-layout/locked-down-template-inline-context-toolbars.html">Locked down template example 2: using context toolbars</a></h3>
<p>Another visual approach is to use the quickbars plugin which enables "Medium" styled context toolbars. This provides a more seamless and integrated solution</p>
<span class="tag">Intermediate</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-inline-mode">Inline Mode</span>
</article>
<article>
<h3><a href="templates-and-layout/locked-down-template-inline-fixed-toolbar.html">Locked down template example 3: using a fixed toolbar</a></h3>
<p>A third example is using the <code>fixed_toolbar_container</code> option that allows you to render the toolbars anywhere on the page for maximum flexibility. This approach is very suitable for web apps.</p>
<span class="tag">Master</span>
<span class="tag tag-inline-mode">Inline Mode</span>
</article>
<article>
<h3><a href="templates-and-layout/locked-down-template-inline-bordered.html">Locked down template example 4: emulating a bordered editor </a></h3>
<p>All the previous locked down examples have shown a borderless editing experience. Here is an example on how to frame the inline editor to closer match the iframe version of TinyMCE.</p>
<span class="tag">Master</span>
<span class="tag tag-inline-mode">Inline Mode</span>
</article>
</section>
<section>
<header id="email">
<h2>Email</h2>
<p>Examples and ideas how to create HTML email editors with TinyMCE, from a rich text webmail editor to the recommended approach for creating visually rich marketing email editor implementations.</p>
</header>
<article>
<h3><a href="email/webmail-rich-text-editor.html">Webmail rich text editor</a></h3>
<p>Demo of a simple rich text webmail editor including how to set inline CSS styles on the default paragraphs</p>
<span class="tag">Beginner</span>
<span class="tag tag-formats">Formats</span>
</article>
<article>
<h3><a href="email/marketing-email-inline-mode.html">Marketing email editor using inline mode</a></h3>
<p>The recommended approach to do marketing emails containing layouts is to move the table layout outside of TinyMCE and enable TinyMCE inline mode on the text blocks only.</p>
<span class="tag">Master</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-inline-mode">Inline Mode</span>
</article>
<article>
<h3><a href="email/marketing-email-inline-mode-fixed-toolbar.html">Marketing email editor using inline mode and a fixed toolbar</a></h3>
<p>Same example as the previous one but with a fixed toolbar.</p>
<span class="tag">Master</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-inline-mode">Inline Mode</span>
<span class="tag tag-toolbar">Toolbar</span>
</article>
<article>
<h3><a href="email/marketing-email.html">Another marketing email demo using inline mode</a></h3>
<p>This demo covers some additional config options and incorporates the token example</p>
<span class="tag">Master</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-inline-mode">Inline Mode</span>
<span class="tag tag-toolbar">Toolbar</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
</article>
</section>
<section>
<header>
<h2 id="cool-demos">Cool demos</h2>
<p>Sometimes you just want to show off right? Here are a couple of demos showcasing just how versatile TinyMCE is</p>
</header>
<article>
<h3><a href="cool-demos/expand-editor-and-show-toolbar.html">Expand and show toolbar</a></h3>
<p>A truly minimal and elegant example of an editor that starts out like a unintrusive textarea and grows into a rich text editor upon focus. Demonstrates an interesting use of the inline mode and features like inline placeholder, toolbar groups as well as our new premium thin icon pack.</p>
<span class="tag">Master</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-content-styling">Content Styling</span>
<span class="tag tag-inline-mode">Inline Mode</span>
<span class="tag tag-toolbar">Toolbar</span>
<span class="tag tag-skinning">Skinning</span>
</article>
<article>
<h3><a href="cool-demos/conditional-blocks.html">Document automation styled conditional blocks using Web Components</a></h3>
<p>This demo shows how to use Web Components to create conditional blocks
often found in document and marketing automation apps. The power with Web Components is that they allow us to create complex
HTML stuctures and abstract away that into a single custom element,
in this case the <code><conditional-block>...</conditional-block></code></p>
<span class="tag">Master</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-custom-elements">Custom Elements</span>
<span class="tag tag-dialogs">Dialogs</span>
<span class="tag tag-skinning">Skinning</span>
</article>
<article>
<h3><a href="cool-demos/slash-commands.html">Create a slash commands plugin</a></h3>
<p>Learn how to make a slash commands plugin using the auto completer API to quickly insert different content types</p>
<span class="tag">Master</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
</article>
<article>
<h3><a href="cool-demos/wordprocessor.html">Make a wordprocessor</a></h3>
<p>Create a wordprocessor-like implementation with TinyMCE</p>
<span class="tag">Beginner</span>
<span class="tag tag-buttons-and-menus">Buttons & Menus</span>
<span class="tag tag-toolbar">Toolbar</span>
<span class="tag tag-skinning">Skinning</span>
<span class="tag tag-content-styling">Content Styling</span>
</article>
</section>
</main>
</body>
</html>