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 7: Integrating with frameworks

2. tiny.cloud
TODAY’S PRESENTERS
ROB QUAN
Product Support Engineer
(Instructor)
ROBERT COLLINGS
Director, Marketing
2
MICHAEL FROMIN
Vice President
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. Overview of wrappers
2. In-depth: Integrate Tiny in a React project
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
OFFICIAL WRAPPERS FOR YOUR INTEGRATION
6
1 We offer official wrappers for Angular 2+, React
and Vue. The wrappers are all available via NPM
as well as on GitHub
OPTIONS FOR YOUR PROJECT
2 You can use the official wrappers and provided
documentation to get TIny in your projects
quickly and easily
QUICKLY HAVE TINY UP AND RUNNING
3 Using Tiny Cloud, all you need to do is add the
API key to the wrapper. Our wrappers also
work with self-hosted installs
GET TINY
TinyMCE provides official wrappers
for 3 popular frameworks

7. tiny.cloud
OFFICIAL WRAPPERS FOR YOUR INTEGRATION
7
1
https://tiny.cloud/docs/integrations/react/
https://github.com/tinymce/tinymce-react
REACT
2
https://www.tiny.cloud/docs/integrations/angular2/
3
https://github.com/tinymce/tinymce-vue#usage
VUE
ANGULAR

8. tiny.cloud

9. tiny.cloud
OFFICIAL REACT COMPONENT
9
For this project, we’ll auto load TinyMCE from the cloud using an API key.
The official TinyMCE wrappers are all “cloud first”.
Get Tiny
Create React App is a simple way to get a React application up and running.
Use Create React App to get started
We will use NPM to install the official TinyMCE React wrapper
$ npm install --save @tinymce/tinymce-react
Install the official wrapper
In today’s intro we will set up a simple
React app with TinyMCE

10. tiny.cloud
OFFICIAL REACT COMPONENT
10
For this example we will be using TinyMCE as a controlled component so we will use state
to control the value of the form
Create a new class component
Set the value of the your API Key in the Editor component and se the value
of the Editor component to the current state.
Add the Editor component
Use the init object to configure the editor to fit your needs.
Initialize and configure TinyMCE
We will now create a new component
in React to hold the editor

11. tiny.cloud
OFFICIAL REACT COMPONENT
11
We’ll create an event handler in React that will update our content and store it in the state object
Create an event handler
Bind editor events
Get the content from state
Handle entering content
into TinyMCE
Now we will use the editor component’s onEditorChange property to bind the
event handler we created in our component
Now we will use the editor component’s onEditorChange property to bind the
event handler we created in our component

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. Working with TinyMCE’s API
2. In-depth: Building a custom plugin
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
http://bit.ly/tiny-slideshare
www.tiny.cloud