Extending WordPress' TinyMCE


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Extending WordPress' TinyMCE

  1. 1. ExtendingWordPressWYSIWYG EditorHristo ChakarovSenior JavaScript developer @ Netclime Inc.
  2. 2. About me● Im in the web since 2002○ professionally since 2007● Currently working as aSenior JavaScript developer @ Netclime Inc.○ the product is SiteKreator - website builderhttp://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/
  3. 3. Table of Content1. Content Management Systems (CMS) - whatare they?2. What stands for WYSIWYG, what it is goodfor and how it works3. 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 better5. Data saving & on-page printing6. Demo
  4. 4. Quick Questions● How many of you have heard aboutWordPress?● And do you use WordPress?● How many of you have written a plugin forWordPress?● How many people have written at least 10lines of pure JavaScript in his/her life? (NB -jQuery code does not count :) )
  5. 5. Overview of a CMSThe ideal CMS should:● keep only content in Database (text, files,data) - no markup!● use HTML + CSS for content presentationHowever, that is hardly possible :)
  6. 6. Why we need Rich Text Editor in aCMS● makes our life easier when updating the sitecontent (better than writing HTML on ourown)● customers (non-IT people) are able toupdate their own site● it is a WYSIWYG - you (or better - yourclient) sees instantly what s/he will get onPage
  7. 7. Anatomy of a RTE● any HTML element can be editable<div contenteditable="true"></div>○ but its better to use <iframe/> for the editable area asbrowsers can have multiple window selections (IEdoesnt, 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. 8. WordPress & TinyMCE● since v2.0 (not sure) WP uses TinyMCE for itsdefault WYSIWYG editor● TinyMCE can be extended via plug-ins● WordPress can be extended via plug-ins● ..this means that we can extend WordPressTinyMCE!
  9. 9. MceHelloWorld plug-in for WPFeatures:● registers toolbar button
  10. 10. MceHelloWorld plug-in for WPFeatures:● inserts placeholder in content area
  11. 11. MceHelloWorld plug-in for WPFeatures:● prints "Hello, <name>" on Page in a box
  12. 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. 13. Admin Area - plugin.php● register the toolbar button● require the main plugin JS file
  14. 14. Admin Area - plugin.js● register & init the TinyMCE plugintinymce.createtinymce.PluginManager.requireLangPacktinymce.PluginManager.add● register custom TinyMCE commandeditor_instance.addCommand● register toolbar buttoneditor_instance.addButton● manage the dialog windoweditor_instance.windowManager.openeditor_instance.windowManager.close● observes editable area for selection changeeditor_instance.onNodeChange
  15. 15. ● we start with a ClosureAdmin Area - plugin.js
  16. 16. Init the TinyMCE Plugin
  17. 17. Translation// langs/en.js// define translatable strings as key:value hashtinyMCE.addI18n("en.mcehelloworld", {desc : Hello, TinyMCE!});// plugin.js// Load plugin specific language packtinymce.PluginManager.requireLangPack(mcehelloworld);
  18. 18. The Dialog Window● manages the plugin properties○ name○ width○ height● on Save, executes a callback function in theparent window and passes the properties asJSON string● the Dialog Window should get theenvironment (properties, callback function)○ we pass them as URL params
  19. 19. Get Query Parameters from URL HTML Formf Executing the Save Callbackand populate Form Fields
  20. 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 placeholders url● close the dialog window
  21. 21. Shortcode vs Placeholder● most TinyMCE plugins insert shortcode inthe content area[shortcode property="value"]● this does not give real idea of what we willget on page (especially if our content will be biggerthan 1 line (95% of cases))● placeholders have dimensions○ and easily resized in most browsers● placeholders can be drag-n-dropped easily○ (quick demo)
  22. 22. Shortcode vs PlaceholderShortcodeIn Content Area On PagePlaceholderIn Content Area On Page
  23. 23. Save Callback
  24. 24. On-Page printing - plugin.php● plugin.php takes care for data visualizationon Page● we hook to add_filteradd_filter(the_content, mcehelloworld_the_content);function mcehelloworld_the_content( $content ) {// parse the content and replace all placeholdersreturn $content;}● we get the content as a string - better parseit and work on DOM level○ Simple HTML DOM (php) helps usinclude simple_html_dom.php;
  25. 25. Finally - Some StylingRequire the CSSon PageThe CSS
  26. 26. Demo
  27. 27. Questions?
  28. 28. 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
  29. 29. Thank You!mail@ickata.netblog.ickata.netfacebook.com/ickatanetgithub.com/ickata/