CODEX
Getting Started with TinyMCE
Developers far and wide use TinyMCE to add WYSIWYG text editing to their websites and solutions. If you’re looking to add an HTML editor to a site or just want to experiment with one of the world's most popular JavaScript rich text editors let's jump right in!
3 ways to quickly get started with TinyMCE
Scenario 1: Online Editor
Scenario 2: Content Delivery Network (CDN)
Scenario 3: Self-hosted
A small amount of JavaScript and HTML is helpful in these scenarios, but the most useful prerequisite will be reviewing the TinyMCE Documentation to see all the features that are available for TinyMCE.
Although TinyMCE Plans do include several pay-for cloud-based solutions, we will be focusing on the “Free Forever” open source version that is licensed under LGPL 2.1.
Let’s get Started
Scenario 1: Online Editor
Pros: easy to bookmark and share solutions
Cons: requires online connectivity
One of the easiest ways to begin experimenting with TinyMCE is to use an online editor like TinyMCE Fiddle or CodePen.
In this scenario, we will use TinyMCE Fiddle to update the TinyMCE to add the Word Count plugin. With the Word Count plugin installed, the editor will display the word count in the footer of the editor.
Begin by opening the URL https://fiddle.tiny.cloud/ in your browser.
Step 1: add the text wordcount to the plugins options
Step 2: add the text wordcount to the toolbar options
Step 3: click the “Run” button to execute the changes
You should now see the Word Count plugin as shown in Figure 1 in the bottom footer. In addition to Word Count TinyMCE has a robust offering of both premium and open source plugins as well as a full-featured API for developing your own plugins.
FYI: The “POWERED BY TINY” branding shown in Figure 1 can be turned off in the user interface options. This branding is not required for paid customers but is the recommended way to include attribution notice for free and open source use.
Scenario 2: Content Delivery Network (CDN)
Pros: uses CDN for fast delivery of TinyMCE code
Cons: slightly more difficult to share than the online version
Unlike Scenario 1 where we used an online editor to modify TinyMCE code, in this scenario we will work with a local file that we create.
Begin by opening your favorite text editor or code editor.
Step 1: create a new file called index.html
Step 2: copy/paste the HTML below into the newly created index.html file
Step 3: save the index.html file and open the file in a web browser
You can now make the same changes as in Scenario 1 to add the Word Count plugin or make any other changes you like. Don’t forget to visit the open source plugin list to see all the plugins automatically included with TinyMCE.
Scenario 3: Self-hosted
Pros: completely self-hosted solution
Cons: more involved to set up and share
In this third and final scenario instead of linking to the TinyMCE code from a CDN we will download it and serve it locally.
Begin by downloading a self-hosted TinyMCE Package from this link:
https://www.tiny.cloud/get-tiny/self-hosted/
On the download page you will have the option of downloading the most recent Community or Dev Package as well as previous releases. The Community version is ready for production use while the Dev Package is useful for viewing the full source code. Either version will work for this scenario, but we will be using the Dev Package.
Step 1: create a new folder called scenario-3
Step 2: unzip the contents of the above downloaded TinyMCE Package to the scenario-3 folder
Step 3: at the top level of the scenario-3 folder, create an empty file called index.html
At this point the contents of the scenario-3 folder should look like the image in Figure 4.
Step 4: copy/paste the HTML below into the newly created index.html file
Step 5: save the index.html file and open it in a browser
At this point we haven’t scratched the surface of what is possible with TinyMCE, but we have shown 3 different scenarios how to rapidly begin prototyping with TinyMCE.
Happy coding and enjoy the remainder of your TinyMCE journey!
