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( ‘content’ ); ?>”>
end class
?>Thanks for this code, Michael.
Leave a Reply