Extending WordPress' TinyMCE

Front-end architect at SiteKreator
Feb. 28, 2013

More Related Content


Extending WordPress' TinyMCE

  1. Extending WordPress' WYSIWYG Editor Hristo Chakarov Senior JavaScript developer @ Netclime Inc.
  2. 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 ● 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)
  3. 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
  4. 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 :) )
  5. 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 :)
  6. 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
  7. 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
  8. 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!
  9. MceHelloWorld plug-in for WP Features: ● registers toolbar button
  10. MceHelloWorld plug-in for WP Features: ● inserts placeholder in content area
  11. MceHelloWorld plug-in for WP Features: ● prints "Hello, <name>" on Page in a box
  12. 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
  13. Admin Area - plugin.php ● register the toolbar button ● require the main plugin JS file
  14. 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.close ● observes editable area for selection change editor_instance.onNodeChange
  15. ● we start with a Closure Admin Area - plugin.js
  16. Init the TinyMCE Plugin
  17. 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');
  18. 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
  19. Get Query Parameters from URL HTML Form f Executing the Save Callback and populate Form Fields
  20. 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
  21. 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)
  22. Shortcode vs Placeholder Shortcode In Content Area On Page Placeholder In Content Area On Page
  23. Save Callback
  24. 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';
  25. Finally - Some Styling Require the CSS on Page The CSS
  26. Demo
  27. Questions?
  28. Resources ● WordPress Codex: TinyMCE Overview http://codex. ● WordPress Codex: TinyMCE Custom Buttons http: // ● TinyMCE: Create a Plug-in php/Creating_a_plugin ● API: ● Simple HTML DOM
  29. Thank You!