Skip to content

Update demos to TinyMCE 8 #38

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lostkeys merged 6 commits into from
Nov 19, 2025
Merged

Update demos to TinyMCE 8 #38

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
42be84a
TINY: Update demos to TinyMCE 8
MitchC1999 Nov 14, 2025
30a6722
Fix slash commands demo
MitchC1999 Nov 14, 2025
6c6c4a3
* Updated license
lostkeys Nov 18, 2025
d90f7f2
Updated spelling, wording and fixed minor errors
lostkeys Nov 19, 2025
ebbf27f
Fixed clipboard for table-row-templates
lostkeys Nov 19, 2025
608cf6d
Removed copy/paste rows and columns because the low-level API replaci…
lostkeys Nov 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cool-demos/conditional-blocks.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<meta charset="utf-8">
<title>Conditional blocks</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<script>
tinymce.init({
Expand Down
6 changes: 3 additions & 3 deletions cool-demos/expand-editor-and-show-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,12 @@
<meta charset="utf-8">
<title>Expand and show toolbar demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<script>
tinymce.init({
selector: "#editor-content",
plugins: "emoticons hr image link lists charmap table",
plugins: "emoticons image link lists charmap table",
toolbar: "formatgroup paragraphgroup insertgroup",
placeholder: "Ask a question or post an update...",
menubar: false,
Expand Down Expand Up @@ -206,7 +206,7 @@
font-weight: strong;
}

hr {
{
margin: 1.5rem 0;
padding: .5rem 0;
border: 0;
Expand Down
8 changes: 4 additions & 4 deletions cool-demos/slash-commands.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<meta charset="utf-8">
<title>Slash commands plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<script>
// Register a TinyMCE plugin
Expand Down Expand Up @@ -125,7 +125,7 @@
// the number of characters to type before displaying the autocompleter menu and,
// configure the autocompleter to display a menu opposed a row of icons
// https://www.tiny.cloud/docs/ui-components/autocompleter/#configurationoptions
ch: '/',
trigger: '/',
minChars: 0,
columns: 1,

Expand Down Expand Up @@ -157,7 +157,7 @@

// Here the matched autocompleter objects are built
// https://www.tiny.cloud/docs/ui-components/autocompleter/#autocompleteitem
return new tinymce.util.Promise(function (resolve) {
return new Promise(function (resolve) {
var results = matchedActions.map(function (action) {
return {
meta: action,
Expand Down Expand Up @@ -200,7 +200,7 @@
tinymce.init({
selector: "textarea",
// Remember to include all relevant plugins here which you included in your `insertActions` array above
plugins: "commandpalette insertdatetime lists link code table toc hr image codesample media checklist",
plugins: "commandpalette insertdatetime lists link code table image codesample media checklist",
height: 400,
});
</script>
Expand Down
4 changes: 2 additions & 2 deletions email/marketing-email-inline-mode-fixed-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<meta charset="utf-8">
<title>Marketing email editor using inline mode and fixed toolbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector:'.tinymce',
Expand All @@ -34,7 +34,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'undo redo | styleselect | bold italic underline strikethrough | forecolor backcolor | link image emoticons | alignleft aligncenter alignright | bullist numlist | code removeformat',
toolbar: 'undo redo | styles | bold italic underline strikethrough | forecolor backcolor | link image emoticons | alignleft aligncenter alignright | bullist numlist | code removeformat',

// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
Expand Down
4 changes: 2 additions & 2 deletions email/marketing-email-inline-mode.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
<meta charset="utf-8">
<title>Marketing email editor using inline mode</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector:'.tinymce',
Expand All @@ -34,7 +34,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'styleselect | bold italic underline | link image emoticons | align bullist numlist | code removeformat',
toolbar: 'styles | bold italic underline | link image emoticons | align bullist numlist | code removeformat',

// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
Expand Down
12 changes: 6 additions & 6 deletions email/webmail-rich-text-editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta charset="utf-8">
<title>Rich text webmail editor demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector:'#editor',
Expand Down Expand Up @@ -47,7 +47,7 @@
formatgroup: {
icon: 'format',
tooltip: 'Formatting',
items: 'fontselect | formatselect | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
items: 'fontselect | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
Copy link

@metricjs metricjs Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
items: 'fontselect | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'
items: 'fontfamily | styles | bold italic underline strikethrough forecolor | align bullist numlist outdent indent blockquote'

"fontselect" became "fontfamily" in T6

}
},

Expand All @@ -58,9 +58,9 @@
// The formats option is where custom formatting options are defined.
// In this case we define a couple of headings and text formats.
// The p is configured to match against multiple formats to make sure
// the styleselect toolbar menu button shows paragraphs as enabled on
// the styles toolbar menu button shows paragraphs as enabled on
// p tags that lacks style attribute. The first item in the array will
// be the one applied when choosing the format via the styleselect
// be the one applied when choosing the format via the styles
// toolbar button.
// https://www.tiny.cloud/docs/configure/content-formatting/#formats
formats: {
Expand All @@ -73,8 +73,8 @@
small: { block: 'small', styles: { fontSize: '12px', color: '#aaaaaa' } }
},

// An alternative to the styleselect toolbar button is the formatselect button
// which is a simpler version of the styleselect button. It is configured
// An alternative to the styles toolbar button is the styles button
// which is a simpler version of the styles button. It is configured
// using the block_formats option.
// https://www.tiny.cloud/docs/configure/editor-appearance/#block_formats
block_formats: 'Normal=p; Heading=h1; Sub heading=h2; Small=small',
Expand Down
4 changes: 2 additions & 2 deletions images/image-alt-text-context-form.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<meta charset="utf-8">
<title>Set an image alt text using context forms</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<script>
tinymce.init({
Expand All @@ -26,7 +26,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'formatselect | bold italic underline | link image | code',
toolbar: 'styles | bold italic underline | link image | code',

// To make sure the toolbar never scrolls out of view which can happen when
// writing very long texts while using the autoresize plugin. This option
Expand Down
4 changes: 2 additions & 2 deletions images/toggle-image-size-context-toolbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
<meta charset='utf-8'>
<title>Toggle between image sizes and layouts</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script src='https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js' referrerpolicy='origin'></script>
<script src='https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js' referrerpolicy='origin'></script>
<script>
// An iconpack holds our custom button's SVG icons.
// Tip! A custom icon pack does not have to be a separate file
Expand Down Expand Up @@ -54,7 +54,7 @@

// Define the toolbar that shows up when selecting text based content
// https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
quickbars_selection_toolbar: 'formatselect | bold italic underline backcolor | align bullist | quicklink code',
quickbars_selection_toolbar: 'styles | bold italic underline backcolor | align bullist | quicklink code',

// Define the toolbar that shows up when selecting images. Notice the
// custom botton we have put last. See further down how it's set up.
Expand Down
4 changes: 2 additions & 2 deletions tables/customizing-the-table-toolbar.html
View file
Open in desktop
Copy link
Member

@lostkeys lostkeys Nov 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The table row and column toolbar menu buttons do not work, throws an error

TypeError: editor.plugins.table.getClipboardRows is not a function. (In 'editor.plugins.table.getClipboardRows()', 'editor.plugins.table.getClipboardRows' is undefined)

Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<meta charset="utf-8">
<title>An alternate table context toolbar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
// An iconpack holds a custom button SVG icon.
// Tip! A custom icon pack does not have to be a separate file
Expand Down Expand Up @@ -41,7 +41,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'styleselect | bold italic underline | inserttable link image emoticons | align bullist numlist | code removeformat',
toolbar: 'styles | bold italic underline | inserttable link image emoticons | align bullist numlist | code removeformat',

//Set the height of the editor. Tip: Any css value is accepted as a string.
// https://www.tiny.cloud/docs/configure/editor-appearance/#height
Expand Down
4 changes: 2 additions & 2 deletions tables/table-row-templates.html
View file
Open in desktop
Copy link
Member

@lostkeys lostkeys Nov 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Insert a templated row (drone status) do not work and throws an error

TypeError: editor.plugins.table.getClipboardRows is not a function. (In 'editor.plugins.table.getClipboardRows()', 'editor.plugins.table.getClipboardRows' is undefined)

Copy link

@metricjs metricjs Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Would need a dev to advise on if this functionality is even possible with TinyMCE 8 for sure. I can't find a way to do it after looking at the table plugin's commands and APIs for a bit.

Copy link
Member

@TheSpyder TheSpyder Nov 19, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it was an undocumented API, we replaced it with the "fake clipboard" concept (which doesn't have table-specific APIs but the table plugin uses it to store the same data).

Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<meta charset="utf-8">
<title>Table row templates</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector:'#editor',
Expand All @@ -30,7 +30,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'styleselect | bold italic underline forecolor backcolor | table link image emoticons | align bullist numlist | code removeformat',
toolbar: 'styles | bold italic underline forecolor backcolor | table link image emoticons | align bullist numlist | code removeformat',

// The Naked premium skin provides a clean look.
// You can also easily create your own borderless skin too.
Expand Down
6 changes: 3 additions & 3 deletions templates-and-layout/advanced-placeholder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
<meta charset="utf-8">
<title>Advanced placeholder demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>

<script>

Expand Down Expand Up @@ -113,10 +113,10 @@ <h2>Test result</h2>
// to make dynamic templates (though there is many ways to achieve
// dynamic templates.).
// Tip! To make TinyMCE leaner, only include the plugins you actually need
plugins: 'link lists code visualblocks table hr image template',
plugins: 'link lists code visualblocks table image template',

// Nothing special about the toolbar in this demo.
toolbar: 'undo redo | styleselect | bold italic strikethrough backcolor | bullist numlist link image hr | code',
toolbar: 'undo redo | styles | bold italic strikethrough backcolor | bullist numlist link image hr | code',

// Tip! The height option accepts any valid CSS for height
height: 'calc(100vh - 4rem)',
Expand Down
17 changes: 5 additions & 12 deletions templates-and-layout/locked-down-template-inline-bordered.html
View file
Open in desktop
Copy link
Member

@lostkeys lostkeys Nov 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A bug introduced between 5 and 8: Put the cursor in editable element and type something, move it to title and observe editor appears disabled but the toolbar still functions (eg try pressing press bold)

Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<title>Inline bordered demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#tinymce',
Expand All @@ -29,7 +29,7 @@
// This option allows you to specify the buttons and the order that they
// will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'undo redo | formatselect | bold italic strikethrough backcolor | link image | align bullist numlist',
toolbar: 'undo redo | styles | bold italic strikethrough backcolor | link image | align bullist numlist',

// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
Expand All @@ -39,13 +39,6 @@
// https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
placeholder: 'Page body',

// To remove the outside borders of the toolbar we use a premium skin.
// You can also easily create your own borderless skin too.
// https://www.tiny.cloud/docs/enterprise/premium-skins-and-icon-packs/borderless-demo/
// https://www.tiny.cloud/docs/configure/editor-appearance/#skin
// https://www.tiny.cloud/docs/advanced/creating-a-skin/
skin: 'borderless',

// Render the inline toolbar in this element
// https://www.tiny.cloud/docs/configure/editor-appearance/#fixed_toolbar_container
fixed_toolbar_container: '#toolbar',
Expand All @@ -59,21 +52,21 @@
// https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
// https://www.tiny.cloud/docs/advanced/events/
editor.on('SkinLoaded', () => {
editor.ui.disable();
editor.ui.setEnabled(false);
});

// Enable the UI when the editable area gains focus
// TODO: https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
// https://www.tiny.cloud/docs/advanced/events/
editor.on('focus', () => {
editor.ui.enable();
editor.ui.setEnabled(true);
});

// Disable the UI when the editor looses focus
// https://www.tiny.cloud/docs/api/tinymce.editor.ui/tinymce.editor.ui.ui/
// https://www.tiny.cloud/docs/advanced/events/
editor.on('blur', () => {
editor.ui.disable();
editor.ui.setEnabled(false);
});
}
});
Expand Down
4 changes: 2 additions & 2 deletions templates-and-layout/locked-down-template-inline-context-toolbars.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<title>Inline context toolbars demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#tinymce',
Expand All @@ -36,7 +36,7 @@

// Configure the toolbar button shown in the context toolbar
// https://www.tiny.cloud/docs/plugins/quickbars/#quickbars_selection_toolbar
quickbars_selection_toolbar: 'formatselect | bold italic strikethrough backcolor link | align | bullist numlist',
quickbars_selection_toolbar: 'styles | bold italic strikethrough backcolor link | align | bullist numlist',

// Text to show when the editor is empty
// https://www.tiny.cloud/docs/configure/editor-appearance/#placeholder
Expand Down
4 changes: 2 additions & 2 deletions templates-and-layout/locked-down-template-inline-default.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
<title>Default inline mode</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;0,900;1,400;1,700&display=swap" rel="stylesheet">
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/5-dev/tinymce.min.js" referrerpolicy="origin"></script>
<script src="https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/8/tinymce.min.js" referrerpolicy="origin"></script>
<script>
tinymce.init({
selector: '#tinymce',
Expand All @@ -29,7 +29,7 @@
// This option allows you to specify the buttons and the order that
// they will appear on TinyMCE’s toolbar.
// https://www.tiny.cloud/docs/configure/editor-appearance/#toolbar
toolbar: 'formatselect | bold italic strikethrough backcolor link | code',
toolbar: 'styles | bold italic strikethrough backcolor link | code',

// Toggle the menubar off to get a leaner visual experience
// https://www.tiny.cloud/docs/configure/editor-appearance/#menubar
Expand Down
Loading
Loading