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
TINY 101: An introduction to TinyMCE
Session 2: Customizing TinyMCE

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

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. A look at some configuration options
1. Adding and configuring plugins
1. Customizing toolbars and menus
1. 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
8
Learn 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
CONFIGURE PLUGINS TOOLBARS
MENUBAR
TINYMCE OPTIONS
Options to affect the user
interface of TinyMCE
EDITOR OPTIONS
Get the tools your users need for
your editing solution
CONFIGURE TOOLS
Plugins extend functionality and
can also affect the UI
EXTEND TINYMCE
6

7. tiny.cloud
CUSTOMIZE THE EDITOR
7
1 If no height is set on the HTML element TinyMCE
replaces, TinyMCE has a default height, or you can pass
it a height
ADJUST THE HEIGHT
2 If no width is set on the HTML element TinyMCE
replaces, TinyMCE has a default width of 100% of the
parent container, or you can pass it a width
ADJUST THE WIDTH
3 The skin changes the appearance of the editor. If you
want the look to match your application you can go in
and do that. Find the skin creator at:
http://skin.tinymce.com/
CHANGE THE SKIN
A few ways to customize how the
editor appears on the page

8. tiny.cloud

9. tiny.cloud
CONFIGURATION OPTIONS
9
1 You can download over 60 language packs from our
web site
DOWNLOAD YOUR LANGUAGE PACK
2 Place the downloaded folder in a location that is
accessible to a user’s browser
ADD THE FOLDER
3 From the TinyMCE configuration, use the language_url
option to point to the folder location
POINT TO THE FOLDER
Localizing TinyMCE’s user interface
with language packs

10. tiny.cloud

11. tiny.cloud
EXTENDING THE EDITOR
11
1 The community edition of TinyMCE comes bundled
with 40+ plugins
40+ PLUGINS
2 Plugins extend TinyMCE’s functionality and some
plugins, such as tables, affect the menus or toolbars
PLUGINS CAN EXTEND FUNCTIONALITY
3 When we initialize TinyMCE we choose the plugins we
want and add them to the configuration
SETTING UP SOME PLUGINS
TinyMCE provides plugins to build
an editing solution to fit your needs

12. tiny.cloud

13. tiny.cloud
CONFIGURE TOOLBARS AND MENU OPTIONS
13
1 You can customize TinyMCE’s toolbars in order to get
the editing experience you need. If you customize your
toolbars, that replaces defaults
CUSTOMIZE THE TOOLBAR
2 You can arrange where buttons on the Toolbar and
group buttons in ways that make sense to your users
GROUP SETS OF BUTTONS ON THE TOOLBAR
3 We can also customize the menubar. As with toolbars,
when we customize the menubar we replace the
default. We can also remove the toolbar, menubar and
statusbar
CUSTOMIZE MENUS, REMOVE BOTH
Customize TinyMCE with the
options your users need

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

15. 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

16. tiny.cloud
Next Session
In next week’s session you’ll learn about:
1. Learn how to create a WYSIWYG editing experience
2. Learn how to pass custom CSS to the editor
3. Add custom formats and fonts
www.tiny.cloud

17. 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