Extending
WordPress'
WYSIWYG Editor
Hristo Chakarov
Senior JavaScript developer @ Netclime Inc.

About me
● I'm in the web since 2002
○ professionally since 2007
● Currently working as a
Senior JavaScript developer @ Netclime Inc.
○ the product is SiteKreator - website builder
http://sitekreator.com
● Love WordPress
○ 2 plugins on the official plugins page
○ several commercial projects on top of the platform
○ co-founder of WordPress Bulgarian User Group
(WPBGUG)
http://wpbgug.org/

Table of Content
1. Content Management Systems (CMS) - what
are they?
2. What stands for WYSIWYG, what it is good
for and how it works
3. MceHelloWorld plugin for WordPress
○ features
○ file structure
○ how it works (Admin Area)
4. Shortcodes vs Placeholders in content area
- why I think the latter is better
5. Data saving & on-page printing
6. Demo

Quick Questions
● How many of you have heard about
WordPress?
● And do you use WordPress?
● How many of you have written a plugin for
WordPress?
● How many people have written at least 10
lines of pure JavaScript in his/her life? (NB -
jQuery code does not count :) )

Overview of a CMS
The ideal CMS should:
● keep only content in Database (text, files,
data) - no markup!
● use HTML + CSS for content presentation
However, that is hardly possible :)

Why we need Rich Text Editor in a
CMS
● makes our life easier when updating the site
content (better than writing HTML on our
own)
● customers (non-IT people) are able to
update their own site
● it is a WYSIWYG - you (or better - your
client) sees instantly what s/he will get on
Page

Anatomy of a RTE
● any HTML element can be editable
<div contenteditable="true"></div>
○ but it's better to use <iframe/> for the editable area as
browsers can have multiple window selections (IE
doesn't, surprised?)
● uses browsers' API
○ execCommand
○ WindowSelection
○ SelectionRange
● the fun starts here: browsers' API is different
○ better use existing RTE and not reinvent the wheel

WordPress & TinyMCE
● since v2.0 (not sure) WP uses TinyMCE for its
default WYSIWYG editor
● TinyMCE can be extended via plug-ins
● WordPress can be extended via plug-ins
● ..this means that we can extend WordPress'
TinyMCE!

MceHelloWorld plug-in for WP
Features:
● registers toolbar button

MceHelloWorld plug-in for WP
Features:
● inserts placeholder in content area

MceHelloWorld plug-in for WP
Features:
● prints "Hello, <name>" on Page in a box

File Structure
● /wp-content/plugins/mcehelloworld/
○ plugin.php (hooks to WordPress actions & filters)
○ css/
■ style.css (CSS for on-page rendering)
○ tinymce/plugins/mcehelloworld/
■ dialog.htm (property form of the plugin)
■ plugin.js (our TinyMCE plugin)
■ img/
● button.png
● placeholder.gif
● space.gif
■ lang/
● en.js

Admin Area - plugin.php
● register the toolbar button
● require the main plugin JS file

Admin Area - plugin.js
● register & init the TinyMCE plugin
tinymce.create
tinymce.PluginManager.requireLangPack
tinymce.PluginManager.add
● register custom TinyMCE command
editor_instance.addCommand
● register toolbar button
editor_instance.addButton
● manage the dialog window
editor_instance.windowManager.open
editor_instance.windowManager.close
● observes editable area for selection change
editor_instance.onNodeChange

● we start with a Closure
Admin Area - plugin.js

Init the TinyMCE Plugin

Translation
// langs/en.js
// define translatable strings as key:value hash
tinyMCE.addI18n("en.mcehelloworld", {
desc : 'Hello, TinyMCE!'
});
// plugin.js
// Load plugin specific language pack
tinymce.PluginManager.requireLangPack('mcehelloworld');

The Dialog Window
● manages the plugin properties
○ name
○ width
○ height
● on Save, executes a callback function in the
parent window and passes the properties as
JSON string
● the Dialog Window should get the
environment (properties, callback function)
○ we pass them as URL params

Get Query Parameters from URL HTML Form
f Executing the Save Callback
and populate Form Fields

Save Callback
● save the properties
○ data will be received as JSON string
○ JSON.parse it
○ create query string (?name=Hristo&width=100...)
○ insert a placeholder <img> in content area
○ store the data (query string) in placeholder's url
● close the dialog window

Shortcode vs Placeholder
● most TinyMCE plugins insert shortcode in
the content area
[shortcode property="value"]
● this does not give real idea of what we will
get on page (especially if our content will be bigger
than 1 line (95% of cases))
● placeholders have dimensions
○ and easily resized in most browsers
● placeholders can be drag-n-dropped easily
○ (quick demo)

Shortcode vs Placeholder
Shortcode
In Content Area On Page
Placeholder
In Content Area On Page

Save Callback

On-Page printing - plugin.php
● plugin.php takes care for data visualization
on Page
● we hook to add_filter
add_filter('the_content', 'mcehelloworld_the_content');
function mcehelloworld_the_content( $content ) {
// parse the content and replace all placeholders
return $content;
}
● we get the content as a string - better parse
it and work on DOM level
○ Simple HTML DOM (php) helps us
include 'simple_html_dom.php';

Finally - Some Styling
Require the CSS
on Page
The CSS

Demo

Questions?

Resources
● WordPress Codex: TinyMCE Overview http://codex.
wordpress.org/TinyMCE
● WordPress Codex: TinyMCE Custom Buttons http:
//codex.wordpress.org/TinyMCE_Custom_Buttons
● TinyMCE: Create a Plug-in http://www.tinymce.com/wiki.
php/Creating_a_plugin
● API:
http://www.tinymce.com/wiki.php/API3:tinymce.api.3.x
● Simple HTML DOM
http://simplehtmldom.sourceforge.net

Thank You!
mail@ickata.net
blog.ickata.net
facebook.com/ickatanet
github.com/ickata/