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 4: Working with content

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. Getting content into the editor
2. Working with content in the editor
3. Options for sending content to the server
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
CONTENTIMPORT SERVER
TINYMCE OPTIONS
Ways to format content
including using tables and lists
CONTENT OPTIONS
Save the content in the editor
and get content to the server
SEND YOUR CONTENT
Get content from other
sources into TinyMCE
CONTENT INTO TINY
6

7. tiny.cloud
PHASE 1: GETTING CONTENT
7
1 You can use TinyMCE’s API to get content into the
editor. Both of these methods can preload content into
TinyMCE.
LOAD CONTENT USING AN API
2 You can add preloaded text to TinyMCE by entering it
into the HTML tag that the editor will replace. For
example into a textarea in a form.
LOAD CONTENT INTO THE TEXTAREA
3 These are standard ways of getting your content into
TinyMCE.
TYPE, PASTE AND DRAG YOU CONTENT
TinyMCE provides options for getting
content from outside the editor
IMPORT

8. tiny.cloud

9. tiny.cloud
PHASE 2: WORKING WITH CONTENT
9
1 The Character Map is a user-friendly way to add
special characters in TinyMCE that will output valid
HTML entities.
SPECIAL CHARACTERS
2 Lists are a useful way of presenting content, we’ll look
at ways to add lists and the options you have available
ADDING LISTS
3 Tables are another highly useful way of structuring
your content and we’ll look at some of the ways we can
use that plugin to format our content.
USING TABLES
TinyMCE gives you options to work
with your content
CONTENT

10. tiny.cloud

11. tiny.cloud
PHASE 3: GET CONTENT TO YOUR SERVER
11
2 HTML form submission is a simple way of pushing
content to your backend.
HTML FORM SUBMISSION
3 We’ll show you how to get the content from TinyMCE
so that we can do any flavor of AJAX to send it to your
backend.
PERFORMING AN AJAX SUBMISSION
Get the content from TinyMCE to
your server
SERVER
1 TinyMCE provides two options for seeing the HTML in
the editor. The standard Code View Plugin, and the
Premium Advance Code Plugin
VIEWING YOUR HTML

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. How plugins extend TinyMCE’s functionality
2. A look at our how our most popular plugins turn TinyMCE up to 11
3. Explore how to tailor plugins to meet your editing needs
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