Extending WordPress'

WYSIWYG EditorHristo 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 printing6. 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 plugintinymce.create

tinymce.PluginManager.requireLangPack

tinymce.PluginManager.add

● register custom TinyMCE commandeditor_instance.addCommand

● register toolbar buttoneditor_instance.addButton

● manage the dialog windoweditor_instance.windowManager.open

editor_instance.windowManager.close

● observes editable area for selection changeeditor_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

ShortcodeIn Content Area On Page

PlaceholderIn Content Area On Page

Save Callback

On-Page printing - plugin.php

● plugin.php takes care for data visualization on Page

● we hook to add_filteradd_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 CSSon 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 DOMhttp://simplehtmldom.sourceforge.net

Thank You!

mail@ickata.net

blog.ickata.net

facebook.com/ickatanet

github.com/ickata/