New to TinyMCE? Not sure how to get started? These slides are from our Intro to TinyMCE “unboxing” webinar series. Attendees learned the most common setup options, advanced config, plus getting content and images to and from the database. Every session included live code samples, demos, and Q&A. We even show you how to build a plugin using TinyMCE’s extensive API. If this sounds interesting, sign up for our Intro to TinyMCE webinars: http://go.tiny.cloud/events/

1. tiny.cloud
An introduction to TinyMCE
Session 5: Plugins

2. tiny.cloud
TODAY’S PRESENTERS
ROB QUAN
Product Support Engineer
(Instructor)
ROBERT COLLINGS
Director, Marketing
2
MICHAEL FROMIN
VP, Customer Success

3. tiny.cloud
How to ask a question with Zoom
3
Click the Q&A icon to open the question dialog. We’ll answer
as many questions as possible during the time allocated.

4. tiny.cloud
Today’s agenda
1. How plugins help you extend the editor
2. Overview of a selection of plugins
3. Q&A

5. tiny.cloud
WEBINAR SCHEDULE
1
Get the editor and learn how to have it up
and running by the end
UNBOXING TINYMCE
2
We will go over some configuration options
for TinyMCE such as adding to the toolbar
CUSTOMIZING TINYMCE
3 We will cover how to customize TinyMCE’s
appearance by adding fonts and CSS
CUSTOMIZING STYLES
4
5
6
7
8Learn how to get your content into TinyMCE
and options for submitting your content
WORKING WITH CONTENT
We will take a look at some of our plugins and
how they add functionality to TinyMCE
LOOKING AT PLUGINS
We’ll learn how to get images into TinyMCE
and then onto your server
WORKING WITH
IMAGES
Get TinyMCE up and running in popular
frameworks such as React, Vue and Angular
WEB FRAMEWORKS
Learn how to build custom plugins and work
with the TinyMCE API
EXTENDING TINYMCE
5

6. tiny.cloud
TINYMCE PLUGINS
6
EXTEND FUNCTIONALITY
Take the base editor
and turn it up to 11
CUSTOMIZE THE EDITOR
Get exactly what you need
for your editing solution
OPTIONS
You can access over
40 community plugins

7. tiny.cloud
ADD CUSTOM HTML TEMPLATES
7
1 Your users can access templates through the menubar
or toolbar and insert custom predefined content into
the editable area
HOW IT WORKS
2
CONFIGURATION AND EXAMPLES
Use the configuration options to point to HTML
templates and add a toolbar button
3 https://www.tiny.cloud/docs/plugins/template/
DOCUMENTATION
The Templates plugin allows you to
include a list of HTML templates

8. tiny.cloud
CREATE NONEDITABLE BLOCKS
8
1 You can set up noneditable blocks by assigning a tag
the mceNonEditable class. This will treat the content
between the tags as a single character
HOW IT WORKS
2 Configuration options allow you to customize the type
and styles of lists that your users can access
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/noneditable/
DOCUMENTATION
The Noneditable plugin allows you to
create blocks with static content

9. tiny.cloud
GET ACCESS TO HTML TABLES
9
1 Users can access a visual table menu to create valid
HTML tables in their content
HOW IT WORKS
2 Options provide flexibility and let you modify the
default table styles and behaviours
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/table/
DOCUMENTATION
The Table Plugin adds table
management functionality

10. tiny.cloud
CREATE SIMPLE AND ADVANCE LISTS
10
1 Users can use word-processor-like keystrokes to
incorporate both simple and advanced valid HTML
lists in the editor
HOW IT WORKS
2 Configuration options allow you to customize the type
and styles of lists that your users can access
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/advlist/
DOCUMENTATION
The List and Advance List Plugins
enable users to create HTML lists

11. tiny.cloud
CODE VIEW
11
1 Both plugins allow users to see and edit the HTML
content in TinyMCE’s editable area through a menubar
or toolbar item
HOW IT WORKS
2 Both plugins can be accessed through a toolbar button
or menubar item.
CONFIGURATION AND EXAMPLES
3 Advanced Code Editor:
https://www.tiny.cloud/docs/plugins/advcode/
Code: https://www.tiny.cloud/docs/plugins/code/
DOCUMENTATION
Code and the Advanced Code
Editor both show the HTML content

12. tiny.cloud
ADD LINKS TO EXTERNAL SITES
12
1 Provide your users a way to insert robust links to
external content form within the editor
HOW IT WORKS
2 The configuration options allow us to perform
numerous customizations such as tailoring the
behavior of an added link or predfining links
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/link/
DOCUMENTATION
The Link Plugin allows you to add
links to external sites

13. tiny.cloud
PASTE CONTENT FROM WORD
13
1 PowerPaste provides robust support for copying and
pasting from external sources, including Word and
Excel documents
HOW IT WORKS
2 PowerPaste has numerous configuration options that
allow you to tailor the plugin to fit your editing solution
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/powerpaste/
DOCUMENTATION
PowerPaste cleans up Word/Excel
and HTML sources

14. tiny.cloud
SPELL CHECKING IN THE CLOUD
14
1 Provides users with spelling-as-you-type functionality
which also allows users to right-click the word and see
a list of suggestions
HOW IT WORKS
2 For the cloud install of Spell Checker Pro, you simply
need to add the plugin to your configuration and then
declare the language you will work in.
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/tinymcespellche
cker/
DOCUMENTATION
Spell Checker Pro provides check
as you type functionality

15. tiny.cloud

16. tiny.cloud
Q&A
Let’s answer your questions
from today’s session
www.tiny.cloud

17. tiny.cloud
Good to know
● Tiny Cloud signups get a free 30-day trial of our most popular Premium Plugins
● Access to our support team during the trial period
Events & Webinars
Office Hours: Tuesday 10 am PDT
Register: bit.ly/tiny-officehours
www.tiny.cloud

18. tiny.cloud
Next Session
In next week’s session you’ll learn about:
1. How to work with images in TinyMCE
2. Uploading images to the server
3. Explore TinyMCE’s image plugins
www.tiny.cloud

19. tiny.cloud
Thank you!
Follow-up Questions
team@tiny.cloud
Ask questions in the Tiny Community
https://community.tinymce.com
Today’s Slides
https://bit.ly/tiny-slides
www.tiny.cloud