HOWTO: Use TinyMCE in a Panel Pane Popup
The magic of Panels 2 is just the sort of thing you might expect from a wizard. Users can create pages with flexible and customizable layouts, they can populate those pages through an extensible block system, and they can configure and drag-and-drop those blocks around the page. Check out the demo page.
Sadly, the panels system does not allow its textareas to be used as TinyMCE WYSIWYG areas because of the way javascript and javascript events are handled. The basic problem is that TinyMCE runs on page load and is not set up to be activated on the Panel pane textareas that are created after the fact. This is a problem that hopefully the Drupal 6 version of Panels can resolve, but for Drupal 5.x the following hook_form_alter solution is possible.
First you need to set up a hook_form_alter callback as part of a new custom module or as part of an existing module you are modifying.
function my_module_form_alter($form_id, &$form) {
switch($form_id) {Second you need to render a hidden TinyMCE field on each panels editing page. This is not a particular clean way to proceed, but it will ensure that all of the appropriate TinyMCE .js is loaded on each page.
case 'panels_edit_display':
$form['tinymce_hidden'] = array(
'#type' => 'fieldset',
'#attributes' => array('style' => 'display: none'),
);
$form['tinymce_hidden']['tinymce_prerender'] = array(
'#type' => 'textarea',
);
break;
Third you need to assign a special submit handler javascript call to convert all TinyMCE content back into its normal textarea content so it can be appropriately saved when the Panel pane is submitted.
case 'panels_content_config_form':
$form['next']['#attributes'] = array('onclick' => 'tinyMCE.triggerSave(true,true);');Finally each of the textareas that are being rendered on the panel pane page need to have a special enable/disable TinyMCE link assigned to them. This allows users to turn on the TinyMCE functionality if they want. The code belows assumes your default TinyMCE state is off. I am sure there is a better and more generalized way to add these links, but this is a first step.
// Load a disable or enable link below each textarea
global $user;
$enable = t('enable rich-text');
$disable = t('disable rich-text');
$user = user_load(array('uid' => $user->uid));
$profile = tinymce_user_get_profile($user);
$status = tinymce_user_get_status($user, $profile);
$link_text = $status == 'true' ? $disable : $enable;
foreach($form['configuration'] as $index_raw => $value) {
$index = str_replace('_','-', $index_raw);
if ($value['#type'] == 'textarea') {
$form['configuration'][$index_raw]['#description'] .= "<div><a href=
\"javascript:mceToggle('edit-configuration-$index', 'wysiwyg4-configuration-$index');\" class=\"wysiwyg-editor\" title=\"edit-configuration-\"" . $index . "\" id=\"wysiwyg4-configuration-$index\">$link_text</a></div>";
} else {
if (is_array($value)) {
foreach($form['configuration'][$index_raw] as $index2_raw => $value2) {
$index2 = str_replace('_', '-', $index2_raw);
if ($value2['#type'] == 'textarea') {
$form['configuration'][$index_raw][$index2_raw]['#description'] .= "<div><a href=\"javascript:mceToggle('edit-configuration-$index-$index2', 'wysiwyg4-configuration-$index-$index2'); \" class=\"wysiwyg-editor\" title=\"edit-configuration-\"" . $index . '-' . $index2 . "\" id=\"wysiwyg4-configuration-$index-$index2\">$link_text</a></div>";
}
}
}
}
}
break;And you should be good to go.
}
}
Drupal 6 version
This problem unfortunately isn’t resolved for Drupal 6 version. Do you know how to fix it in D6. Thanks for reply.
NİCE WORKİNG
Wow - I haven’t been looking this forward to installing a module for a long time - good idea, good work!
Can't get it to work.
I’m not even sure what file you need edit and add this code to.
I tried adding it to the panels.module itself, but I gotta be doing something wrong.
Any help would be greatly appreciated.
I am an idiot. I forgot to
I am an idiot.
I forgot to change “my_module_form_alter” to the module I was insert the code into, i.e. “panels_form_alter”.
It’s working just fine, now. :)
Does not work for me
Hi!
It simply does work for me… I used the firebug and I saw that it created the hidden fields and the “disable”, “enable” link, but the textarea field stays without the tinymce format. The page is seeing the tinymce js too.
Any suggestions?
Check Version + Link Behavior
What version of TinyMCE are you using? This was built for TinyMCE 2.* and there may be issues with the way 3.* handles it. Additionally, you need to click on the “enable” link to get the magic to happen. Does it give you an error when you click on it?
TinyMCE is the devil's own
Using it in any way or form is discouraged. If you must have a WYSIWYG then at least use htmlbox.
I totally agree - TinyMCE is evil!
I recently discovered the YUI Editor (http://drupal.org/project/yui_editor) and used Dave Hall’s code to integrate with IMCE (http://davehall.com.au/blog/dave/2008/10/22/yui-editor-imce-drupal-6)
It’s working great! The absolute best content creation solution for D6!
Post new comment