Skip to content

Commit 46ec9be

Browse files
committed
DOC-3309: Update content for various documentation demos.
1 parent 14e2dc2 commit 46ec9be

File tree

6 files changed

+188
-195
lines changed

6 files changed

+188
-195
lines changed
Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,46 @@
11
<textarea id="basic-example">
2-
{{logofordemoshtml}}
3-
<h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
4-
5-
<h2>Got questions or need help?</h2>
6-
2+
<h1 style="text-align: left;">Welcome to the TinyMCE editor demo!</h1>
3+
<p>Meet <strong>TinyMCE, </strong>the Internet's most&nbsp;<span style="background-color: #eccafa;">battle-tested rich text editor</span> with over 60 features including: <em>Advanced formatting, </em><span style="color: #ba372a;"><strong><em>Export to and from Word and PDF, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Accessibility and spelling checkers</span>,&nbsp;Mentions and comments, and <strong><span style="color: #169179;">an AI assistant</span></strong>.</p>
4+
<p><span style="font-family: terminal, monaco, monospace;">TinyMCE is easy to implement and configure</span>. <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Try it out yourself today</a>.</p>
5+
<h2>⭐️ Popular features (including paid subscription plugins)</h2>
76
<ul>
8-
<li>Our <a href="{{site-url}}/tinymce/6/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
9-
<li>Have a specific question? Try the <a href="{{communitysupporturl}}" target="_blank" rel="noopener"><code>{{prodnamecode}}</code> tag at Stack Overflow</a>.</li>
10-
<li>We also offer enterprise grade support as part of <a href="{{pricingpage}}">TinyMCE premium plans</a>.</li>
7+
<li>Collaborate with <a href="https://www.tiny.cloud/docs/tinymce/latest/mentions/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">@Mentions</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">discuss using Comments</a> and review changes using <a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Suggested Edits</a> and keep an audit trail with <a href="https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Revision history</a>.</li>
8+
<li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Paste from MS Word</a> and retain formatting. You can even <a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">import Word documents</a>!&nbsp;</li>
9+
<li>Power your email editor with <a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Merge tags</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Inline CSS output</a>.</li>
10+
<li>Hit the highest standards with <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Spell Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Accessibility Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Advanced Typography</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Link Checker</a>.</li>
1111
</ul>
12-
13-
<h2>A simple table to play with</h2>
14-
15-
<table style="border-collapse: collapse; width: 100%;" border="1">
16-
<thead>
17-
<tr>
18-
<th>Product</th>
19-
<th>Cost</th>
20-
<th>Really?</th>
21-
</tr>
22-
</thead>
23-
<tbody>
24-
<tr>
25-
<td>TinyMCE</td>
26-
<td>Free</td>
27-
<td>YES!</td>
28-
</tr>
29-
<tr>
30-
<td>Plupload</td>
31-
<td>Free</td>
32-
<td>YES!</td>
33-
</tr>
34-
</tbody>
12+
<p><iframe src="https://www.youtube.com/embed/YpcfDYYWmK0" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
13+
<h2>🖖 Get TinyMCE</h2>
14+
<table style="border-collapse: collapse; width: 100%; height: 143.125px;" border="1"><colgroup><col style="width: 33.306581%;"><col style="width: 33.306581%;"><col style="width: 33.306581%;"></colgroup>
15+
<thead>
16+
<tr style="height: 35.78125px; background-color: #ecf0f1; text-align: center;">
17+
<td colspan="3"><strong>TinyMCE meets all your architecture requirements.</strong></td>
18+
</tr>
19+
</thead>
20+
<tbody>
21+
<tr style="height: 35.78125px;">
22+
<td><strong>Cloud</strong></td>
23+
<td><a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Sign-up for free</a></td>
24+
<td>Always up to date, easy to maintain</td>
25+
</tr>
26+
<tr style="height: 35.78125px;">
27+
<td><strong>Self-hosted</strong></td>
28+
<td><a href="https://www.tiny.cloud/pricing/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Let's talk</a></td>
29+
<td>With enterprise level support</td>
30+
</tr>
31+
<tr style="height: 35.78125px;">
32+
<td><strong>Open source</strong></td>
33+
<td><a href="https://github.com/tinymce/tinymce?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Download today</a></td>
34+
<td>Available under the GPLv2+ license</td>
35+
</tr>
36+
</tbody>
3537
</table>
36-
37-
<h2>Found a bug?</h2>
38-
39-
<p>
40-
If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.
41-
</p>
42-
43-
<h2>Finally ...</h2>
44-
45-
<p>
46-
Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.
47-
</p>
48-
<p>
49-
Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.
50-
</p>
38+
<h2>Why TinyMCE 👀</h2>
39+
<ol>
40+
<li><strong>Out-of-the-box features save dev time.</strong> From tables and spell checking to full collaboration and accessibility compliance, TinyMCE offers features you&rsquo;d otherwise spend months building.</li>
41+
<li><strong>Built to scale with you.</strong> TinyMCE powers applications with millions of users. Its performance, reliability, and architecture are built for scale, from early MVPs to global platforms.</li>
42+
<li><strong>Works where you build.</strong> Whether you're using React, Vue, Angular, or vanilla JavaScript&mdash;or embedding it in SaaS platforms or internal tools&mdash;TinyMCE integrates smoothly into your stack.</li>
43+
<li><strong>No one has been doing this longer.</strong> You benefit from 20+ years of stability, security, feature, accessibility, documentation improvements, and enterprise support services.</li>
44+
</ol>
45+
<p style="text-align: center;">❤️ <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Go build something today</a></p>
5146
</textarea>

modules/ROOT/examples/live-demos/basic-example/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ tinymce.init({
44
plugins: [
55
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
66
'anchor', 'searchreplace', 'visualblocks', 'code', 'fullscreen',
7-
'insertdatetime', 'media', 'table', 'help', 'wordcount'
7+
'insertdatetime', 'media', 'table', 'help', 'wordcount', 'mediaembed'
88
],
99
toolbar: 'undo redo | blocks | ' +
1010
'bold italic backcolor | alignleft aligncenter ' +
Lines changed: 45 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,99 +1,49 @@
11
<textarea id="full-featured">
2-
{{logofordemoshtml}}
3-
<h2 style="text-align: center;">Welcome to the TinyMCE Cloud demo!</h2>
4-
5-
<h5 style="text-align: center;">This demo includes <em>enterprise</em>, also known as <em>Premium</em> features.</h5>
6-
7-
<h5 style="text-align: center;">Try out these features as provided in this full featured example.</h5>
8-
9-
<h5 style="text-align: center;">And visit the <a href="{{pricingpage}}">pricing page</a> to learn more about our Premium plugins.</h5>
10-
11-
<h2>Got questions or need help?</h2>
12-
13-
<ul>
14-
<li>Our <a class="mceNonEditable" href="{{site-url}}/tinymce/8/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
15-
<li>Have a specific question? Try the <a href="{{communitysupporturl}}" target="_blank" rel="noopener"><code>{{prodnamecode}}</code> tag at Stack Overflow</a>.</li>
16-
<li>We also offer enterprise grade support as part of <a href="{{pricingpage}}">TinyMCE premium subscriptions</a>.</li>
17-
</ul>
18-
19-
<p>Please try out this demo of our Tiny Comments premium plugin with @mentions support.</p>
20-
<ol>
21-
<li>Highlight the content you want to comment on.</li>
22-
<li>Click the <em>Add Comment</em> icon in the toolbar.</li>
23-
<li>Type your comment into the text field at the bottom of the Comment sidebar, and use <code>@</code> followed by a name to mention a collaborator.</li>
24-
<li>Click <strong>Comment</strong>.</li>
25-
</ol>
26-
<p>Your comment is <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_19679600221621399703915" data-mce-annotation="tinycomments">then</span> attached to the text, <span class="mce-annotation tox-comment" data-mce-annotation-uid="mce-conversation_420304606321716900864126" data-mce-annotation="tinycomments">exactly like this!</span> You can <span class="mymention" style="color: gray;" data-mention-id="mia-andersson" data-mce-mentions-id="mia-andersson">@Mia Andersson</span> directly in your comments to notify them.</p>
27-
28-
<h2>A simple table to play with</h2>
29-
30-
<table style="border-collapse: collapse; width: 100%;" border="1">
31-
<thead>
32-
<tr style="text-align: left;">
33-
<th>Product</th>
34-
<th>Cost</th>
35-
<th>Really?</th>
36-
</tr>
37-
</thead>
38-
<tbody>
39-
<tr>
40-
<td>TinyMCE Cloud</td>
41-
<td>Get started for free</td>
42-
<td><strong>Yes!</strong></td>
43-
</tr>
44-
<tr>
45-
<td>Plupload</td>
46-
<td>Free</td>
47-
<td><strong>Yes!</strong></td>
48-
</tr>
49-
</tbody>
2+
<p>&nbsp;</p>
3+
<h1 style="text-align: left;">Welcome to the TinyMCE editor demo!</h1>
4+
<p>Meet <strong>TinyMCE, </strong>the Internet's most&nbsp;<span style="background-color: #eccafa;">battle-tested rich text editor</span> with over 60 features including: <em>Advanced formatting, </em><span style="color: #ba372a;"><strong><em>Export to and from Word and PDF, </em></strong></span><span style="font-family: 'times new roman', times, serif; font-size: 14pt;">Accessibility and spelling checkers</span>,&nbsp;Mentions and comments, and <strong><span style="color: #169179;">an AI assistant</span></strong>.</p>
5+
<p><span style="font-family: terminal, monaco, monospace;">TinyMCE is easy to implement and configure</span>. <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Try it out yourself today</a>.</p>
6+
<h2>⭐️ Popular features</h2>
7+
<ul>
8+
<li>Collaborate with <a href="https://www.tiny.cloud/docs/tinymce/latest/mentions/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">@Mentions</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-comments/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">discuss using Comments</a> and review changes using <a href="https://www.tiny.cloud/docs/tinymce/latest/suggestededits/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Suggested Edits</a> and keep an audit trail with <a href="https://www.tiny.cloud/docs/tinymce/latest/revisionhistory/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Revision history</a>.</li>
9+
<li><a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-powerpaste/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Paste from MS Word</a> and retain formatting. You can even <a href="https://www.tiny.cloud/docs/tinymce/latest/importword/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">import Word documents</a>!&nbsp;</li>
10+
<li>Power your email editor with <a href="https://www.tiny.cloud/docs/tinymce/latest/mergetags/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Merge tags</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/inline-css/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Inline CSS output</a>.</li>
11+
<li>Hit the highest standards with <a href="https://www.tiny.cloud/docs/tinymce/latest/introduction-to-tiny-spellchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Spell Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/a11ychecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Accessibility Checker</a>, <a href="https://www.tiny.cloud/docs/tinymce/latest/advanced-typography/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Advanced Typography</a> and <a href="https://www.tiny.cloud/docs/tinymce/latest/linkchecker/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Link Checker</a>.</li>
12+
</ul>
13+
<uc-video uuid="f17a5fb2-cdf3-4a95-8b47-be7ce52fa3b5" class="tox-uc-video" controls="true" showlogo="false"></uc-video>
14+
<h2>🖖 Get TinyMCE</h2>
15+
<table style="border-collapse: collapse; width: 100%; height: 143.125px;" border="1"><colgroup><col style="width: 33.306581%;"><col style="width: 33.306581%;"><col style="width: 33.306581%;"></colgroup>
16+
<thead>
17+
<tr style="height: 35.78125px; background-color: #ecf0f1; text-align: center;">
18+
<td colspan="3"><strong>TinyMCE meets all your architecture requirements.</strong></td>
19+
</tr>
20+
</thead>
21+
<tbody>
22+
<tr style="height: 35.78125px;">
23+
<td><strong>Cloud</strong></td>
24+
<td><a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Sign-up for free</a></td>
25+
<td>Always up to date, easy to maintain</td>
26+
</tr>
27+
<tr style="height: 35.78125px;">
28+
<td><strong>Self-hosted</strong></td>
29+
<td><a href="https://www.tiny.cloud/pricing/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Let's talk</a></td>
30+
<td>With enterprise level support</td>
31+
</tr>
32+
<tr style="height: 35.78125px;">
33+
<td><strong>Open source</strong></td>
34+
<td><a href="https://github.com/tinymce/tinymce?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Download today</a></td>
35+
<td>Available under the GPLv2+ license</td>
36+
</tr>
37+
</tbody>
5038
</table>
39+
<h2>Why TinyMCE 👀</h2>
40+
<ol>
41+
<li><strong>Out-of-the-box features save dev time.</strong> From tables and spell checking to full collaboration and accessibility compliance, TinyMCE offers features you&rsquo;d otherwise spend months building.</li>
42+
<li><strong>Built to scale with you.</strong> TinyMCE powers applications with millions of users. Its performance, reliability, and architecture are built for scale, from early MVPs to global platforms.</li>
43+
<li><strong>Works where you build.</strong> Whether you're using React, Vue, Angular, or vanilla JavaScript&mdash;or embedding it in SaaS platforms or internal tools&mdash;TinyMCE integrates smoothly into your stack.</li>
44+
<li><strong>No one has been doing this longer.</strong> You benefit from 20+ years of stability, security, feature, accessibility, documentation improvements, and enterprise support services.</li>
45+
</ol>
46+
<p style="text-align: center;">❤️ <a href="https://www.tiny.cloud/auth/signup/?utm_campaign=tiny_docs&amp;utm_source=site&amp;keyword=docs">Go build something today</a></p>
47+
</textarea>
5148

52-
<h2>Character strings to demonstrate some of the Advanced Typography plugin’s features</h2>
53-
54-
<p>Select the characters in the list below and choose <strong>Tools → Typography → Enhance</strong>.</p>
55-
56-
<ul style="list-style-type: none;">
57-
<li>Not really an arrow glyph: -></li>
58-
<li>"Double tear-drop quotation marks and apostrophes aren't typographically elegant."</li>
59-
<li>But they should be honored in a <code>code-fragment: "true"</code>.</li>
60-
<li>(c) symbol</li>
61-
<li>(tm) symbol</li>
62-
<li>30C is 86F</li>
63-
</ul>
64-
65-
<h2 class="p1"><span class="s1">🤖</span><span class="s2"><strong> Try out AI Assistant!</strong></span></h2>
66-
67-
<p class="p2"><span class="s2">Below are just a few of the ways you can use AI Assistant within your app. Since you can define your own custom prompts, the sky really is the limit!</span></p>
68-
<p class="p2"><span class="s2"><strong>&nbsp;</strong></span><span class="s3">🎭</span><span class="s2"><strong> Changing tone </strong>&ndash;<strong>&nbsp;</strong>Lighten up the sentence below by selecting the text, clicking <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Change tone &gt; Friendly</em>.</span></p>
69-
<blockquote>
70-
<p class="p2"><span class="s2">The 3Q23 financial results followed a predictable trend, reflecting the status quo from previous years.</span></p>
71-
</blockquote>
72-
<p class="p2"><span class="s3">📝</span><span class="s2"><strong> Summarizing&nbsp;</strong>&ndash; Below is a long paragraph that people may not want to read from start to finish. Get a quick summary by selecting the text, clicking <img src="{{imagesdir}}/ai-plugin/wand-icon.svg" width="20" height="20"/>,&nbsp;and choosing <em>Summarize content</em>.</span></p>
73-
<blockquote>
74-
<p class="p2"><span class="s2">Population growth in the 17th century was marked by significant increment in the number of people around the world. Various factors contributed to this demographic trend. Firstly, advancements in agriculture and technology resulted in increased food production and improved living conditions. This led to decreased mortality rates and better overall health, allowing for more individuals to survive and thrive. Additionally, the exploration and expansion of European powers, such as colonization efforts, fostered migration and settlement in new territories.</span></p>
75-
</blockquote>
76-
<p class="p2"><span class="s3">💡</span><span class="s2"><strong> Writing from scratch</strong> &ndash; Ask AI Assistant to generate content from scratch by clicking <img src="{{imagesdir}}/ai-plugin/ai-icon.svg" width="20" height="20"/>, and typing&nbsp;<em>Write a marketing email announcing TinyMCE's new AI Assistant plugin</em>.</span></p>
77-
<p class="p2">&nbsp;</p>
78-
79-
<h2>Note on the included Templates demonstration</h2>
80-
81-
<p>The included Templates demonstration uses the <a class="mceNonEditable" href="{{site-url}}/tinymce/8/advanced-templates/#advtemplate_list"><code>advtemplate_list</code></a> configuration option to return a local promise containing a basic Template structure with self-contained examples.</p>
82-
83-
<p>This example allows for the loading of and interacting with the Template user-interface but cannot be used to create, edit, or save Template items.</p>
84-
85-
<p>See the <a class="mceNonEditable" href="{{site-url}}/tinymce/8/advanced-templates/">Templates</a> documentation for details on how to setup Templates to interact with external data sources.</p>
86-
87-
<h2>Found a bug?</h2>
88-
89-
<p>If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>
90-
91-
<h2>Finally…</h2>
92-
93-
<p>Don’t forget to check out our other product <a href="http://plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.</p>
94-
95-
<p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.</p>
96-
97-
<p>All the best from the TinyMCE team.</p>
9849

99-
</textarea>

0 commit comments

Comments
 (0)