Today I moved on to working on working on implementing redaction in WordPress’ visual editor, otherwise known as TinyMCE.

In general, I’m not a huge fan of WYSIWYG editors because what-you-see-is-not-always-what-you-get, and TinyMCE is no exception.  It’s neither the fastest nor the most lightweight editor out there, but it is quite capable and the plugin API is rather robust.  Over time, I have given the visual editor some leeway and have become accustomed to letting it handle my paragraph tags and bolded text.  Honestly, it’s not half bad and I find myself writing in the visual editor more and more often, only switching to the HTML editor when I need to make sure the proper markup is written.

At any rate, since I use WordPress’ visual editor fairly regularly (along with the majority of WordPress users out there, I’d assume), I decided to add redaction support to TinyMCE.  I could do it quick and dirty and just add a button that wraps the redact shortcode around the selected text, but that wouldn’t be fun.  Instead, redacting text in the visual editor will function very similarly to the way you would make text bold or italic.  Basically, click the “Redact text” button on the toolbar and the text styling is changed to indicate that it is redacted.  I think this is one of the benefits of the visual editor as visual cues make navigating through a post’s content far faster for most users than looking at the HTML source.

So far, I’ve:

• Added a button to TinyMCE’s toolbar to activate/deactivate redaction
• Setup CSS to provide visual cues to identify redacted text
• Started work on wrapping selected text in the redact shortcode

The interesting bit about TinyMCE is that you can add additional HTML markup in the post content to help with the visual cues in the visual editor, but when you view the source, you can swap out the presentation markup for the markup you want to be saved with the post content.  This makes it incredibly customizable in terms of presentation and final markup.

The main thing that’s left is to refine how selected text is wrapped with the shortcode.  Some things to consider when manipulating the selected text:

1. Is the selected text part of a larger chunk of chunk of text that has already been redacted?
2. Should the selected text be wrapped or unwrapped with the shortcode?
3. What should happen when no text is selected?

We definitely want to avoid nesting redaction shortcodes within each other so I’m going to take some time on this to make sure it works the way one would expect it to in the different situations.

I’m planning on putting together a tutorial on making a TinyMCE plugin for WordPress once I’ve released this plugin.  Even though I’ve done a fair amount of TinyMCE plugin development specifically for WordPress, I think having a quick step by step reference for creating a plugin for the visual editor would be a nice way to jump start development on the next one.  Hopefully others will find it useful as well.

On a different but related note, I was surprised today when I noticed that WordPress was telling me to update Redactor as a new version has just become available.

I found this perplexing at first because I was sure I hadn’t published an updated version of the plugin that I didn’t know about on my own development version of WordPress.  It appears that the “Updates” section of WordPress merely looks for matching plugin names on WordPress.org (as opposed to checking the plugin URI as well) as it turns out that I was being notified of a new version of a different plugin with the same name.

I checked whether there was already a plugin called “Redactor” on WordPress’ website last week to avoid confusion when I first started writing about my plugin.  I figured this other plugin must be very new.  It is, it was released today.

What’s cool is that it has many of the same features that have or am planning to implement in my plugin (from manual shortcodes to automated text replacement).  It’s always nice to have more than one option.  While Redactor is just a code name for the plugin during development, I was considering the possibility of using it as the official name (since it’s rather descriptive of it’s functionality), but I guess the decision has been made for me.  Thanks!