extending wordpress' tinymce
TRANSCRIPT
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