Introduction to TinyMCE Session #6 Working With Images
Download as PPTX, PDF0 likes50 views
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.
Introduction to TinyMCE Session #6 Working With Images
- 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