Skip to content

Commit

Permalink
Updated readme for new Flags plugin
Browse files Browse the repository at this point in the history
Signed-off-by: Marty Friedel <1491079+martyf@users.noreply.github.com>
  • Loading branch information
martyf committed Apr 9, 2019
1 parent a818e0f commit 2ed989f
Showing 1 changed file with 20 additions and 10 deletions.
30 changes: 20 additions & 10 deletions README.md
@@ -1,12 +1,7 @@
# TinyMCE 5 Example Plugin
Developed by [Marty Friedel](https://www.martyfriedel.com)

Last updated February 2019

Tested with:
- TinyMCE 5 RC1 (5.0.0-rc-1-build.3)
- TinyMCE 5 RC2 (5.0.0-rc-2-build.2-8)
- TinyMCE 5 Stable
Last updated April 2019

## How to use
Open **index.html** in a web browser and you're good to go.
Expand All @@ -24,19 +19,34 @@ to get the build files, and update the JS file in the index.html file and you'll
## What is where
**index.html** includes the HTML needed to get up and running, including the TinyMCE init code.

**custom-icons.svg** has two SVG icons that we can reference in the plugin.
**custom-icons.svg** has two SVG icons that we can reference in the "helloworld" plugin.

**plugins** contains the source code and minified code for the "helloworld" plugin. The init code for TinyMCE is looking
**plugins** contains the source code and minified code for the "helloworld" and "flags" plugins. The init code for TinyMCE is looking
for the .min.js version of the plugin. If you start tinkering, don't forget to either minify your plugin.js file, or
update the TinyMCE init to look for the un-minified file.

## Step by step
## An introduction to Dialogs
Take a read of [my article](https://www.martyfriedel.com/blog/tinymce-5-creating-a-plugin-with-a-dialog-and-custom-icons)
to show how the plugin got to this stage. This article breaks the process down to:
to show how the plugin got to this stage.

This is for the **helloworld** plugin.

This article breaks the process down to:
1. A basic TinyMCE Plugin structure
2. Extending the Plugin to display a Dialog using TinyMCE 5's UI components
3. Updating the Dialog after instantiation
4. Adding custom SVG icons to TinyMCE for the Plugin to use

## An introduction to AutoCompleter
Take a read of [this article](https://www.martyfriedel.com/blog/tinymce-5-creating-an-autocomplete-plugin) to show how easy it is to get
an AutoCompleter plugin up and running.

This is for the **flags** plugin.

This will help you:
1. Understand the configuration of the AutoCompleter
2. Consider where your data needs to come from
3. Insert your data in to the editor

Don't forget to visit [Tiny's](https://www.tiny.cloud) website to read all of the documentation for TinyMCE. It will be
incredibly useful for you when you start writing your own Plugins.

0 comments on commit 2ed989f

Please sign in to comment.