The document discusses a webinar on working with images in TinyMCE. The agenda includes getting images into the editor, sending images to the server, and working with images in the editor. It outlines ways to import images such as uploading a local image or pasting from another source. It also discusses configuring an upload handler to send images to the server and using the Image Tools plugin to edit images within TinyMCE.

1. tiny.cloud
An introduction to TinyMCE
Session 6: Working with images

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 images into the editor
2. Sending images to the server
3. Working with images in the editor
4. 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
SERVERIMPORT IMAGES
TINYMCE OPTIONS
Save the content in the editor
and get content to the server
SAVE YOUR IMAGES
The Image Tools Plugin
provides robust functionality
IMAGE OPTIONS
Get content from other
sources into TinyMCE
IMAGES INTO TINY
6

7. tiny.cloud
GETTING IMAGES INTO TINYMCE
7
1 You can use the image dialogue to link
external content
USING A LINK IN THE DIALOGUE
2 You can add a filepicker to find images on
your machine and add them into Tiny.
https://www.tiny.cloud/docs/demo/file-picker/
UPLOAD A LOCAL IMAGE
3 If you have PowerPaste, you can copy and
paste images from Word into the editor
PASTE IN YOUR IMAGE
TinyMCE provides options for getting
images into the editor
IMPORT

8. tiny.cloud

9. tiny.cloud
GET CONTENT TO YOUR SERVER
9
2 You can choose to automatically trigger the upload
handler or use the uploadImages method. These
options provide flexibility to suit your needs
TRIGGER THE HANDLER
3 Once the image is saved to your server, Tiny will
automatically add the new source for the image for
you!
TINY UPDATES THE IMAGE SOURCE
Get images from TinyMCE to your
server
SERVER
1 In order to get local images to your server, you will need
to configure an upload handler. A PHP example:
https://www.tiny.cloud/docs/advanced/php-upload-handler
CONFIGURE AN UPLOAD HANDLER

10. tiny.cloud

11. tiny.cloud
WORKING WITH IMAGES
11
1 The Plugin allows you to select an image to bring up a
suite of tools to modify and edit it within the editor.
https://www.tiny.cloud/docs/plugins/imagetools/
EDIT IMAGES IN THE EDITOR
2 The Image Tools Plugin is meant to work with your
upload handler to save an edited image to your server.
Even if you are using a linked image as a starting point
SAVE THE IMAGE
3 For cloud installs, all we need to do is enable the plugin,
and make sure we have the Image Plugin enabled as
well, and then start editing
INSTALL FROM THE CLOUD
The Image Tools Plugin provides a
robust set of image editing solutions
IMAGES

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. An overview of TinyMCE’s wrappers for various frameworks
2. In-depth: Adding TinyMCE to a React project
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