So, the native WordPress text widget is great, right? It allows users to insert virtually any form of content into a widget, provided they either want plain text or know a bit of HTML. The fact that this widget can be used in multiple instances is also awesome. Recently, I’ve needed to provide a bit more control though. Hence, my integration of tinyMCE.
Before I start, this tutorial assumes that you have a widget up and running (multi-instance or a conventional single instance widget) that has a text area which will be replaced with a tinyMCE editor. This tutorial is only about the integration.ย In my research on this topic, I came across a support query where a user was experiencing the same issue I was having: the content of the tinyMCE replaced text area was not saving. After a bit of testing, I found the solution.
1. Make sure you have a folder of tinyMCE in your theme or wherever your widget code is located. The location isn’t important, it just helps to keep everything pertaining to the widget in the same place.
2. Write a PHP function to initialise tinyMCE. This function will include the tinyMCE Javascript file, as well as run the tinyMCE.init() function to setup our editor blocks.
3. Add an action to the admin_print_scripts on the widgets.php page. This action will run the function declared in step 2.
4. Customise the editor instance (which theme, which buttons, etc) to suit your widget’s requirements. Support on this comes bundled with tinyMCE in the form of example files, and is also available via the support documents on the tinyMCE website.
And that’s it, folks. ๐ I can post up snippets of the code for each step in a bit, if it would help. ๐ The above process also replaces all textareas on the widgets page, with a tinyMCE editor.
Updated
This is what the code structure looks like:
function NAME_OF_INIT_FUNCTION()
{
echo 'INSERT YOUR tinyMCE JAVASCRIPT HERE... CALL THE FILE AND RUN THE init FUNCTION';
}
add_action(‘admin_print_scripts-widgets.php’, ‘NAME_OF_INIT_FUNCTION’);
Other resources on the topic
Use TinyMCE in your WordPress 2.8 Plugin > Brolly
Update- This code was posted in the comments by Michael. It has been moved to the post for consistency.
File Paths
define('TMWD_FILE_PATH', dirname(__FILE__), true);
define('TMWD_DIR_NAME', basename(TMWD_FILE_PATH), true);
define('SITE_URL', get_option('siteurl'), true);
#> Plugin Folder and URL to folder
define('TMWD_FOLDER', dirname(plugin_basename(__FILE__)), true);
define('TMWD_URL', SITE_URL.'/wp-content/plugins/' . TMWD_FOLDER, true);
#> hooks
add_action( 'widgets_init', 'tmwd_init' );
add_action('admin_head-widgets.php', 'tinymce');
#> add tinyMCE javas cript to header
func tion tinymce() {
echo โ<script type=โtext/javascriptโ src=โ/jscripts/tiny_mce/tiny_mce.jsโ>โ;
}
#> register wid get
func tion tmwd_โinit() {
register_โwidget( โHTMLContent_โWidgetโ );
}
#> Widget Class
class HTMLContent_โWidget extends WP_โWidget {
#> con struct
func tion HTMLContent_โWidget() {
#> set tings
$widget_โops = array( โclass nameโ => โhtm l con tentโ, โdescrip tionโ => __(โWidget to add HTML con tent to Widget Area.โ, โhtm l con tentโ) );
$control_โops = array( โwidthโ => 600, โheightโ => 350, โid_โbaseโ => โhtmlcontent-โโwidgetโ );
#> cre ate wid get
$this->WP_Widget( โhtmlcontent-โโwidgetโ, __(โHTML Content Widgetโ, โhtm l con tentโ), $widget_โops, $control_โops );
}
#> tem plate dis play
func tion wid get( $args, $instance ) {
extract( $args );
#> html con tent
$con tent = $instance[โcontentโ];
echo $before_โwidget;
if ( $con tent ) { printf( โ%1$sโ, $con tent ); }
echo $after_โwidget;
}
#> save wid get con tents
func tion update( $new_โinstance, $old_โinstance ) {
$instance = $old_โinstance;
$instance[โcontentโ] = $new_instance[โcontentโ];
return $instance;
}
#> dis play wid get in wid gets screen
func tion form( $instance ) {
#> Defaults
$defaults = array( โcon tentโ => __(โTODO :: ADD Your HTML here.โ, โhtm l con tentโ));
$instance = wp_โparse_โargs( (array) $instance, $defaults );
#> TinyMCE Setup Instances
?>
tinyMCE.init({
mode : โtex tareasโ,
theme : โadvancedโ,
editor_selector:โget_field_id( โcon tentโ ); ?>โ,
plu gins : โsafari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, templateโ,
/โ/โ Theme options
theme_โadvanced_โbuttons1 : โsave,newdocument, | ,bold, italic, underline, strikethrough, |, justifyleft, justifycenter, justifyright, justifyfull, styleselect, formatselect, fontselect, fontsizeselectโ,
theme_โadvanced_โbuttons2 : โcut, copy, paste, pastetext, pasteword, |, search, replace, |, bullist, numlist, |, outdent, indent, blockquote, |, undo, redo, |, link, unlink, anchor, image, cleanup, help, code, |, insertdate, inserttime, preview, |, forecolor, backcolorโ,
theme_โadvanced_โbuttons3 : โtablecontrols, |, hr, removeformat, visualaid, |, sub, sup, |, charmap, emotions, iespell, media, advhr, |, print, |, ltr, rtl, |, fullscreenโ,
theme_โadvanced_โbuttons4 : โinsertlayer, moveforward, movebackward, absolute, |, styleprops, |, cite, abbr, acronym, del, ins, attribs, |, visualchars, nonbreaking, template, pagebreakโ,
theme_โadvanced_โtoolbar_โlocation : โtopโ,
theme_โadvanced_โtoolbar_โalign : โleftโ,
theme_โadvanced_โstatusbar_โlocation : โbot tomโ,
theme_โadvanced_โresizing : true,
setup : function(ed) {
ed.onChange.add(function(ed) {
tinyMCE.triggerSave();
});
}
});
<tex tarea name=โget_field_name( โcon tentโ ); ?>โ class=โget_field_id( โcon tentโ ); ?>โ id=โget_field_id( โconยญtentโ ); ?>โ>
endย class
?>
Thanks for this code, Michael.
Leave a Reply