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.
}
}
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!
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?
It does work...
I got it working with a little perseverance, along the lines of:
1. Add the code as per the original post to panels.module
2. Change the first line of the added code to "panels_form_alter" from "my_module_form_alter" as per this comment
3. Change TinyMCE to not bee shown by default
It's a bit quirky, but it works, so thanks for that :-)
I'm sure it would be better to have this as a separate module so when Panels gets updated the change doesn't get over-ridden. But I've never yet created a module, so don't know what's needed for that.
One question, if I want to have the editor active by default and to be shown when first viewing, so how do I need to tweak the code for TinyMCE on?
It is unfortunate this does
It is unfortunate this does not work. It had a lot of potential. - Sue in Sacramento
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. :)
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.
Works in IE, but no Firefox
I was able to get it to load in IE7, but not firefox. In firefox, the popup doesn't function as normal, it just goes to a white page that has "Enable Rich Text" in the top left of the screen. When I click the link, it does nothing.
Here are the steps I performed. I created a new module called "panels_form_alter" and placed in the site/all/modules directory, then enabled the module. Here is the code that I put into the new custom module.
<?php
function panels_form_alter($form_id, &$form) {
switch($form_id) {
case 'panels_edit_display':
// Load a fake version of TinyMCE on the original page to get the javascript added
$form['tinymce_hidden'] = array(
'#type' => 'fieldset',
'#attributes' => array('style' => 'display: none'),
);
$form['tinymce_hidden']['tinymce_prerender'] = array(
'#type' => 'textarea',
);
break;
case 'panels_content_config_form':
// Modify the submit handler to save TinyMCE display to hidden textarea
$form['next']['#attributes'] = array('onclick' => 'tinyMCE.triggerSave(true,true);');
// 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;
}
}
Just a minor annoyance, in IE7. the tinymce toolbar does not stay in place when you scroll on the popup. I am not sure if there is any way to fix this or not. No biggie if there is no way to fix it, I am just glad it loads now. The end users do not have the first clue about html.
Thanks for the help on this feature. IMHO, It is the last thing that "panels" needs before it is core ready.
I have found interesting
I have found interesting sourc and would like to give the benefit of my experience to you.
I am tuning my pc by the best software for free, with the file search engine
DownLeZ
May be you have your own experience and could give some useful sites too. Because this social site help me much.
I have found interesting
I have found interesting sourc and would like to give the benefit of my experience to you.
I am tuning my pc by the best software for free, with the file search engine
DownLeZ
May be you have your own experience and could give some useful sites too. Because this social site help me much.
Almost perfect...
This is fantastic, just what my site editors needed.
Unfortunately, the content doesn't seem to be filtered properly - the full html is being stored, but not presented so I lose hyperlinks etc. Is there a change I need to make to the form fields? I don't have the input format choices as per your screen...
Actually, I did read the
Actually, I did read the file README.TXT -- twice. Nowhere in there does it indicate that the full TinyMCE code at that download page needs to be installed into modules/tinymce/tinymce. Nonetheless, I have now installed the files into that directory, and that took care of the error message. After I created a TinyMCE profile, it started to work.
For anyone else puzzled by the README.TXT instructions, where it currently states "administer > settings > tinymce", replace that with "Administer > Site configuration > TinyMCE".
Thanks for this, I was
Thanks for this, I was wondering why I was having issues. Your solution fixed it for me.
Great work, thanks.
Great work, thanks.
THANKS!!!
I WOULD LIKE TO SAY "THANKS" TO ALL OF YOU
AND PERSONALLY TO BLOG'S AUTHOR AND TO CREATOR OF THE panels_form_alter MODULE!!!
AT LEAST WYSIWYG IN PANELS 2 WORKED FOR ME!!!
Guys you are really great programmers!