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 3: Customizing styles

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. Style the content within the editor
1. Add custom fonts and font sizes
1. Create custom formats for TinyMCE
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
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
STYLE FONTS FORMATS
TINYMCE OPTIONS
Options that affect how content
appears in TinyMCE
EDITOR OPTIONS
Create a list of custom styles that
match your application’s look
CUSTOM STYLES
Match the fonts in your
application, customize sizes
CUSTOMIZE TYPE
6

7. tiny.cloud
STYLE CONTENT
7
1 We can use the content_css option in our
configuration to extend external CSS to TinyMCE’s
editable area, allowing us to style content
LINK YOUR STYLESHEET
2 Setting a body class or ID for TinyMCE allows us to use
our CSS that we passed into content_css to add
editor-specific styles
SET A BODY CLASS OR ID
3 Let’s look at how the CSS file can affect the appearance
of content in the editor.
CODE EXAMPLES
A few ways to customize how your
content appears
STYLE

8. tiny.cloud

9. tiny.cloud
ADDING YOUR FONTS
9
1 We can use the toolbar configuration to show a
dropdown list of available fonts. We can also add font
sizes to the toolbar as well
SHOW FONT OPTIONS IN THE TOOLBAR
2 We can specify the fonts that appear in the font select
dropdown menu by using the font_formats option
in our configuration
ADD FONTS TO TINYMCE
3 Using content_css we can import web fonts from
vendors such as Google
USING WEB FONTS
TinyMCE provides options to build an
editing solution to fit your needs
FONTS

10. tiny.cloud

11. tiny.cloud
CREATE CUSTOM FORMATS
11
1 The style_formats feature enables you to add a
robust list of style formats to the editor. This option is
tied to the styleselect option in the toolbar
USING THE STYLE FORMATS OPTION
2 This option allows us to add fairly advanced styles to
the editor and allows us to manipulate bot block and
inline styles
STYLE BLOCK OR INLINE TAGS
3 When we add our list of custom styles to the toolbar,
we have options for grouping our styles
ADD THE LIST TO YOUR TOOLBAR
Customize a list of formats that
appear in the toolbar
FORMATS

12. tiny.cloud

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

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

15. tiny.cloud
Next Session
In next week’s session you’ll learn about:
1. Options for formatting your content in TinyMCE
2. Get content from external source
3. A look at options to send content to your server
www.tiny.cloud

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