It’s rare to find a tool that’s simple, small, versatile, and useful.
It’s even more rare for me to realize that I had been staring at such a tool for years, and never realized it.
Table of Contents
What is TinyMCE?
Go to https://www.tinymce.com/ for more details.
You’ve probably used it, and never realized it.
If you’ve ever used the rich text editor on a website to leave a comment, you were probably using TinyMCE.
If you’ve used WordPress or half a dozen other content management systems, the chances are good that you’ve already used TinyMCE to write a post or article.
It’s a full-featured HTML editor, written in javascript, that runs completely within the browser context. It even supports CSS skins, and plugins.
The beauty of TinyMCE is that it can be used in many other ways.
- At a sleek 1.5 MB, it’s the smallest word processor you’ll ever use, unless you can dig up an old copy of WordStar.
- It easily fits on a memory stick, or even on your phone.
- Since it runs in a simple HTML frame, in any browser, you can run it on your phone.
- Since it runs completely inside the browser context, it also works as an offline editor, so you can peck out your next blog post on your laptop or cell phone, even if you’re miles from a data connection.
- You can copy the files to any website, and have your own private online HTML editor / lightweight word processor that you can use from any device with an internet connection.
Let’s See it in Action
Uh, OK, what am I looking at?
- Type in some text. You can use built-in text processing features, such as cut and paste, undo, redo, find, and search and replace. If your session crashes while you’re typing, don’t worry. It auto-saves every minute, and you can recover your last document with the “restore last draft” button.
- Use paragraph styles for titles and section headers
- Use inline text styles to emphasize text (font, size, color, background color, bold, italic, underline)
- Small images can be pasted directly in to the editor, or use the “image” and “media” buttons to embed images or video from an external link.
- Create tables to organize information
- If you need to save this as a true HTML document, modify the HTML document properties, or edit the HTML code.
- Use other advanced features. For example, insert special characters, horizontal lines, smileys, or even source code samples with syntax highlighting! You can also format text as superscript or subscript using the format menu, or change the paragraph alignment to left, right, or center-justified.
- When you’re done, click “Output HTML” at the bottom. This opens your document in a new browser window. Right-click, and select “Save Page as…”, to save as an HTML file.
Once you’ve got your document saved, you can:
- Open it in your browser, for example, to print it, or give a presentation.
- Upload it to your website. Remember to upload any linked images that aren’t embedded in the document.
- In TinyMCE, if you click the “Source code” button, you can copy the raw source code (or parts of it) to another file or to another TinyMCE session
Frequently-Asked Questions
Why would I use this, over MS Word or LibreOffice Writer?
- Both Word and Writer (and any other word processor) can export HTML, but it also exports a bloated and complex document framework. Meaning, you always have to go back to the source, and re-export the document if you want to make changes. Editing the HTML directly becomes tricky.
- Despite their best efforts, an HTML document exported from Word or Writer never looks quite exactly like its true document counterpart. Using TinyMCE gives you 100% WYSIWYG (What You See Is What You Get) editing.
- TinyMCE is not a replacement for a full-featured word processor. However, it’s quick, portable, and useful for lightweight uses.
Does it support CSS (Cascading StyleSheets)?
- TinyMCE integrates with CSS. With some customization, you can create TinyMCE styles based on CSS. There is also an import function, but I haven’t tinkered with it.
I use TinyMCE in WordPress or XYZ CMS (Content Management System). Why do you have some buttons that I don’t have?
- TinyMCE uses an extensive system of plugins, that you have to specify using the javascript wrapper that initializes TinyMCE. It takes HOURS of researching the TinyMCE documentation to figure out how to enable all of the features. Fortunately for you, I’ve done that!
- TinyMCE itself, and some of the plugins are open source, while others are only available to “subscription” users. The wrapper that I’ve cobbled together uses almost all of the “free” plugins.
- TinyMCE uses parameters for everything. You specify which toolbars and toolbar buttons, what menu options, which plugins are active, etc… using parameters when you initialize TinyMCE. Using my javascript wrapper, you can completely customize all of the “free” options for TinyMCE.
Why don’t you have it configured to select, edit, and save local files?
- On a website, this could be completely dangerous. You don’t want someone to be able to edit your server files.
- Although the javascript wrapper could be configured to allow you to select, edit, and save local files, this version suites my needs.
Awesome! How do I get it?
Method 1:
- Go to tinymce.com
- Download TinyMCE with all “free” plugins enabled
- Spend hours going through the documentation for each plugin, and write a javascript wrapper that sends the appropriate parameters to TinyMCE during initialization.
Method 2:
- Download this file: mce_474.tgz
- The file is in tar+gzip (“tarball”) format. Use 7-zip or if you’re on a GNU / Linux system, use the command: tar xvzf mce_474.tgz to extract the files.
- Modify the javascript in index.html to suit your preferences
Once you have it downloaded and configured:
Run from your website:
- Copy the “tinymce” folder to your website
- Open your browser, then go to the URL, “http://yourwebsite/tinymce” (or wherever you uploaded the tinymce folder)
Run locally:
- Go to the “tinymce” folder, and double-click on “index.html”. This will open TinyMCE in your browser.