Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Extending WordPress' TinyMCE

1,871 views

Published on

  • Be the first to comment

  • Be the first to like this

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/

×