SlideShare a Scribd company logo
tiny.cloud
An introduction to TinyMCE
Session 5: Plugins
tiny.cloud
TODAY’S PRESENTERS
ROB QUAN
Product Support Engineer
(Instructor)
ROBERT COLLINGS
Director, Marketing
2
MICHAEL FROMIN
VP, Customer Success
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.
tiny.cloud
Today’s agenda
1. How plugins help you extend the editor
2. Overview of a selection of plugins
3. Q&A
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
tiny.cloud
TINYMCE PLUGINS
6
EXTEND FUNCTIONALITY
Take the base editor
and turn it up to 11
CUSTOMIZE THE EDITOR
Get exactly what you need
for your editing solution
OPTIONS
You can access over
40 community plugins
tiny.cloud
ADD CUSTOM HTML TEMPLATES
7
1 Your users can access templates through the menubar
or toolbar and insert custom predefined content into
the editable area
HOW IT WORKS
2
CONFIGURATION AND EXAMPLES
Use the configuration options to point to HTML
templates and add a toolbar button
3 https://www.tiny.cloud/docs/plugins/template/
DOCUMENTATION
The Templates plugin allows you to
include a list of HTML templates
tiny.cloud
CREATE NONEDITABLE BLOCKS
8
1 You can set up noneditable blocks by assigning a tag
the mceNonEditable class. This will treat the content
between the tags as a single character
HOW IT WORKS
2 Configuration options allow you to customize the type
and styles of lists that your users can access
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/noneditable/
DOCUMENTATION
The Noneditable plugin allows you to
create blocks with static content
tiny.cloud
GET ACCESS TO HTML TABLES
9
1 Users can access a visual table menu to create valid
HTML tables in their content
HOW IT WORKS
2 Options provide flexibility and let you modify the
default table styles and behaviours
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/table/
DOCUMENTATION
The Table Plugin adds table
management functionality
tiny.cloud
CREATE SIMPLE AND ADVANCE LISTS
10
1 Users can use word-processor-like keystrokes to
incorporate both simple and advanced valid HTML
lists in the editor
HOW IT WORKS
2 Configuration options allow you to customize the type
and styles of lists that your users can access
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/advlist/
DOCUMENTATION
The List and Advance List Plugins
enable users to create HTML lists
tiny.cloud
CODE VIEW
11
1 Both plugins allow users to see and edit the HTML
content in TinyMCE’s editable area through a menubar
or toolbar item
HOW IT WORKS
2 Both plugins can be accessed through a toolbar button
or menubar item.
CONFIGURATION AND EXAMPLES
3 Advanced Code Editor:
https://www.tiny.cloud/docs/plugins/advcode/
Code: https://www.tiny.cloud/docs/plugins/code/
DOCUMENTATION
Code and the Advanced Code
Editor both show the HTML content
tiny.cloud
ADD LINKS TO EXTERNAL SITES
12
1 Provide your users a way to insert robust links to
external content form within the editor
HOW IT WORKS
2 The configuration options allow us to perform
numerous customizations such as tailoring the
behavior of an added link or predfining links
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/link/
DOCUMENTATION
The Link Plugin allows you to add
links to external sites
tiny.cloud
PASTE CONTENT FROM WORD
13
1 PowerPaste provides robust support for copying and
pasting from external sources, including Word and
Excel documents
HOW IT WORKS
2 PowerPaste has numerous configuration options that
allow you to tailor the plugin to fit your editing solution
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/powerpaste/
DOCUMENTATION
PowerPaste cleans up Word/Excel
and HTML sources
tiny.cloud
SPELL CHECKING IN THE CLOUD
14
1 Provides users with spelling-as-you-type functionality
which also allows users to right-click the word and see
a list of suggestions
HOW IT WORKS
2 For the cloud install of Spell Checker Pro, you simply
need to add the plugin to your configuration and then
declare the language you will work in.
CONFIGURATION AND EXAMPLES
3 https://www.tiny.cloud/docs/plugins/tinymcespellche
cker/
DOCUMENTATION
Spell Checker Pro provides check
as you type functionality
tiny.cloud
tiny.cloud
Q&A
Let’s answer your questions
from today’s session
www.tiny.cloud
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
tiny.cloud
Next Session
In next week’s session you’ll learn about:
1. How to work with images in TinyMCE
2. Uploading images to the server
3. Explore TinyMCE’s image plugins
www.tiny.cloud
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

More Related Content

PPTX
Introduction to TinyMCE Session #3 Customizing Styles
PDF
PromoJam - Front End Design Guide
DOC
Basic Web Design In Dreamweaver
PDF
Unit 2.10 - Frames
PPTX
Front end web development
PPTX
Submitting Module Assignments in ENC 3241
PPTX
Submitting module assignments in enc 3241
PDF
IBM Notes 9 Social Edition Cheat Sheet
Introduction to TinyMCE Session #3 Customizing Styles
PromoJam - Front End Design Guide
Basic Web Design In Dreamweaver
Unit 2.10 - Frames
Front end web development
Submitting Module Assignments in ENC 3241
Submitting module assignments in enc 3241
IBM Notes 9 Social Edition Cheat Sheet

What's hot (12)

PPT
Future of word press 4.9 and beyond
PDF
How Does A CMS Function
PPTX
Download PowerPoint Project on social programming for engineering students
PDF
How To Use Blogger
PPTX
Using the add multiple users plugin
PPT
Press Release Display Features
PPTX
Integrationmap dw
PPTX
Module 3
DOCX
DOCX
SoclPie: Add Timeline
PPT
Connect with Facebook to Rails Application By Nyros Developer
PPT
Frog vle panitia
Future of word press 4.9 and beyond
How Does A CMS Function
Download PowerPoint Project on social programming for engineering students
How To Use Blogger
Using the add multiple users plugin
Press Release Display Features
Integrationmap dw
Module 3
SoclPie: Add Timeline
Connect with Facebook to Rails Application By Nyros Developer
Frog vle panitia
Ad

Similar to Introduction to TinyMCE Session #5 Popular Plugins (20)

PPTX
Introduction to TinyMCE Session #2 Customizing TinyMCE
PPTX
Introduction to TinyMCE Session #4 Working With Content
PDF
Get Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Editi...
PDF
PDF Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Editi...
PDF
Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Edition J...
PDF
Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Edition J...
PDF
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
PDF
nothing to share right now here. kindly lkeave this section right away thankuu
PPTX
Introduction to TinyMCE Session #1 Unboxing TinyMCE
PPTX
Introduction To Umbraco
DOCX
ASP.NET MVC3 RAD
PDF
Standing up for the content creators: Site building and theming for the admin...
PDF
HTML5 and CSS3 Illustrated Introductory 2nd Edition Vodnik Solutions Manual
PDF
1.3 Process and Information Layout
PDF
PPTX
Dreaweaver cs5
PPTX
Launch Event FrameMaker 10 Overview
PDF
ASP.NET Identity
PPTX
Introduction to TinyMCE Session #6 Working With Images
PPTX
Alcim wp training 26 may
Introduction to TinyMCE Session #2 Customizing TinyMCE
Introduction to TinyMCE Session #4 Working With Content
Get Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Editi...
PDF Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Editi...
Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Edition J...
Flex 3 Cookbook Code Recipes Tips and Tricks for RIA Developers 1st Edition J...
ChircuVictor StefircaMadalin rad_aspmvc3_wcf_vs2010
nothing to share right now here. kindly lkeave this section right away thankuu
Introduction to TinyMCE Session #1 Unboxing TinyMCE
Introduction To Umbraco
ASP.NET MVC3 RAD
Standing up for the content creators: Site building and theming for the admin...
HTML5 and CSS3 Illustrated Introductory 2nd Edition Vodnik Solutions Manual
1.3 Process and Information Layout
Dreaweaver cs5
Launch Event FrameMaker 10 Overview
ASP.NET Identity
Introduction to TinyMCE Session #6 Working With Images
Alcim wp training 26 may
Ad

More from Tiny (11)

PPTX
Is block-based editing the future of web content management systems?
PDF
Engage 2019: Extending the editor in Connections
PDF
Engage 2019: Building a design system to modernize Connections
PDF
Porting 100k Lines of Code to TypeScript
PPTX
Introduction to TinyMCE Session #7 Integrating with frameworks
PDF
Project to Product to Profit - Lessons learned trying to commercialize a majo...
PPTX
Going beyond the 'Bold' button by Jack Mason
PPTX
WebRadar
PPTX
Textbox.io for IBM Connections - IBM Connect 2016
PDF
Webinar: Bring Web Content into the Modern Era with Ephox's EditLive! 9 Rich ...
PPT
Ephox corp's EditLive! rich text editor for IBM Connections to be Unveiled at...
Is block-based editing the future of web content management systems?
Engage 2019: Extending the editor in Connections
Engage 2019: Building a design system to modernize Connections
Porting 100k Lines of Code to TypeScript
Introduction to TinyMCE Session #7 Integrating with frameworks
Project to Product to Profit - Lessons learned trying to commercialize a majo...
Going beyond the 'Bold' button by Jack Mason
WebRadar
Textbox.io for IBM Connections - IBM Connect 2016
Webinar: Bring Web Content into the Modern Era with Ephox's EditLive! 9 Rich ...
Ephox corp's EditLive! rich text editor for IBM Connections to be Unveiled at...

Recently uploaded (20)

PDF
PTS Company Brochure 2025 (1).pdf.......
PDF
Which alternative to Crystal Reports is best for small or large businesses.pdf
PDF
2025 Textile ERP Trends: SAP, Odoo & Oracle
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
PDF
How to Migrate SBCGlobal Email to Yahoo Easily
PDF
System and Network Administraation Chapter 3
PPTX
ai tools demonstartion for schools and inter college
PDF
System and Network Administration Chapter 2
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PDF
top salesforce developer skills in 2025.pdf
PDF
medical staffing services at VALiNTRY
PPTX
L1 - Introduction to python Backend.pptx
PDF
wealthsignaloriginal-com-DS-text-... (1).pdf
PDF
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
PPTX
history of c programming in notes for students .pptx
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PDF
Odoo Companies in India – Driving Business Transformation.pdf
PDF
Softaken Excel to vCard Converter Software.pdf
PDF
AI in Product Development-omnex systems
PDF
Upgrade and Innovation Strategies for SAP ERP Customers
PTS Company Brochure 2025 (1).pdf.......
Which alternative to Crystal Reports is best for small or large businesses.pdf
2025 Textile ERP Trends: SAP, Odoo & Oracle
Internet Downloader Manager (IDM) Crack 6.42 Build 42 Updates Latest 2025
How to Migrate SBCGlobal Email to Yahoo Easily
System and Network Administraation Chapter 3
ai tools demonstartion for schools and inter college
System and Network Administration Chapter 2
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
top salesforce developer skills in 2025.pdf
medical staffing services at VALiNTRY
L1 - Introduction to python Backend.pptx
wealthsignaloriginal-com-DS-text-... (1).pdf
Audit Checklist Design Aligning with ISO, IATF, and Industry Standards — Omne...
history of c programming in notes for students .pptx
Adobe Illustrator 28.6 Crack My Vision of Vector Design
Odoo Companies in India – Driving Business Transformation.pdf
Softaken Excel to vCard Converter Software.pdf
AI in Product Development-omnex systems
Upgrade and Innovation Strategies for SAP ERP Customers

Introduction to TinyMCE Session #5 Popular Plugins

  • 1. tiny.cloud An introduction to TinyMCE Session 5: Plugins
  • 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. How plugins help you extend the editor 2. Overview of a selection of plugins 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 TINYMCE PLUGINS 6 EXTEND FUNCTIONALITY Take the base editor and turn it up to 11 CUSTOMIZE THE EDITOR Get exactly what you need for your editing solution OPTIONS You can access over 40 community plugins
  • 7. tiny.cloud ADD CUSTOM HTML TEMPLATES 7 1 Your users can access templates through the menubar or toolbar and insert custom predefined content into the editable area HOW IT WORKS 2 CONFIGURATION AND EXAMPLES Use the configuration options to point to HTML templates and add a toolbar button 3 https://www.tiny.cloud/docs/plugins/template/ DOCUMENTATION The Templates plugin allows you to include a list of HTML templates
  • 8. tiny.cloud CREATE NONEDITABLE BLOCKS 8 1 You can set up noneditable blocks by assigning a tag the mceNonEditable class. This will treat the content between the tags as a single character HOW IT WORKS 2 Configuration options allow you to customize the type and styles of lists that your users can access CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/noneditable/ DOCUMENTATION The Noneditable plugin allows you to create blocks with static content
  • 9. tiny.cloud GET ACCESS TO HTML TABLES 9 1 Users can access a visual table menu to create valid HTML tables in their content HOW IT WORKS 2 Options provide flexibility and let you modify the default table styles and behaviours CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/table/ DOCUMENTATION The Table Plugin adds table management functionality
  • 10. tiny.cloud CREATE SIMPLE AND ADVANCE LISTS 10 1 Users can use word-processor-like keystrokes to incorporate both simple and advanced valid HTML lists in the editor HOW IT WORKS 2 Configuration options allow you to customize the type and styles of lists that your users can access CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/advlist/ DOCUMENTATION The List and Advance List Plugins enable users to create HTML lists
  • 11. tiny.cloud CODE VIEW 11 1 Both plugins allow users to see and edit the HTML content in TinyMCE’s editable area through a menubar or toolbar item HOW IT WORKS 2 Both plugins can be accessed through a toolbar button or menubar item. CONFIGURATION AND EXAMPLES 3 Advanced Code Editor: https://www.tiny.cloud/docs/plugins/advcode/ Code: https://www.tiny.cloud/docs/plugins/code/ DOCUMENTATION Code and the Advanced Code Editor both show the HTML content
  • 12. tiny.cloud ADD LINKS TO EXTERNAL SITES 12 1 Provide your users a way to insert robust links to external content form within the editor HOW IT WORKS 2 The configuration options allow us to perform numerous customizations such as tailoring the behavior of an added link or predfining links CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/link/ DOCUMENTATION The Link Plugin allows you to add links to external sites
  • 13. tiny.cloud PASTE CONTENT FROM WORD 13 1 PowerPaste provides robust support for copying and pasting from external sources, including Word and Excel documents HOW IT WORKS 2 PowerPaste has numerous configuration options that allow you to tailor the plugin to fit your editing solution CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/powerpaste/ DOCUMENTATION PowerPaste cleans up Word/Excel and HTML sources
  • 14. tiny.cloud SPELL CHECKING IN THE CLOUD 14 1 Provides users with spelling-as-you-type functionality which also allows users to right-click the word and see a list of suggestions HOW IT WORKS 2 For the cloud install of Spell Checker Pro, you simply need to add the plugin to your configuration and then declare the language you will work in. CONFIGURATION AND EXAMPLES 3 https://www.tiny.cloud/docs/plugins/tinymcespellche cker/ DOCUMENTATION Spell Checker Pro provides check as you type functionality
  • 16. tiny.cloud Q&A Let’s answer your questions from today’s session www.tiny.cloud
  • 17. 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
  • 18. tiny.cloud Next Session In next week’s session you’ll learn about: 1. How to work with images in TinyMCE 2. Uploading images to the server 3. Explore TinyMCE’s image plugins www.tiny.cloud
  • 19. 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