I suspect there is some key fact that I'm unaware of despite reading through forums, FAQs, and readmes. I'm using Drupal 6.4 and TinyMCE 3.0.8. I get the same results whether using the TinyMCE module or the TinyTinyMCE module.

I'm writing a custom module that performs a fairly simple function with some unrelated bells and whistles--allow the user to edit a textarea (using TinyMCE) and then save the textarea value to a node body.

My problem is that when the user clicks "Save" and control is given to my custom_module_form_submit function and I look at $form_state['values'] I find the old contents of the textarea, not the newly edited contents I want to save. I think this is because TinyMCE sets up its own area to contain text and it's not in the normal Drupal form, and the last-minute action to copy the TinyMCE data back to the form's textarea doesn't happen.

I know there's a mechanism to deal with this, because obviously when you use TinyMCE on a normal node, all works well. I've looked at possible workarounds, like calling tinyMCE.triggerSave() but my Submit button action is handled by PHP and Drupal, and I don't get the opportunity to make a javascript call.

Can someone point out what I'm missing here?

John

Comments

eorbe’s picture

eorbe commented

Hi, i had the same problem, and i found a solution. I'm not sure if it's the best or most elegant solution, but it works for me, and i hope it works for you or at least point you out in the right direction. Here it goes:


    $form['buttons']['preview']['#ahah']=array(
                                'path' => 'node/preview/js',
                                'wrapper' => 'preview-wrapper',
                                'method' => 'replace',
                                'effect' => 'fade',
                                'event'=>'change',
                                );

drupal_add_js( '$(document).ready(function(){$("#edit-preview").bind("mousedown", 
function(){tinyMCE.triggerSave();$("#edit-preview").change();});});','inline');

the key here it's to control when the ajaxSubmit call is going to be made, in order to, first, update the contents of the form element with the editors content.
So, to achive that, i bind the ahah call to an event that it's not supossed to be fired by the user, in this case, i bind the ahah call to the change event of the preview button.


    $form['buttons']['preview']['#ahah']=array(
                                'path' => 'node/preview/js',
                                'wrapper' => 'preview-wrapper',
                                'method' => 'replace',
                                'effect' => 'fade',
                                'event'=>'change',
                                );

Then, i register a callback for the mousedown event of the preview button, and in that callback i update the form values using inyMCE.triggerSave(), and then i fire the change event ($("#edit-preview").change()), which in turns execute the ahah method.

Hope it helps.

---Ezequiel

jestith’s picture

jestith commented

Thanks very much, Ezequiel! That is wonderfully helpful. I had considered a much less elegant solution of trying to issue the update on mouseover on the submit button, but your solution seems to guarantee things happen in the right order.

I'm surprised this doesn't come up as an issue for more people, and I'm still uncertain how the native Drupal modules handle this, but your solution makes much sense, and I will try it out very soon.

Thank you again for taking the time to share your expertise!

John

scotthenning’s picture

scotthenning commented

Ok question. Maybe either of you guys can help me out as you seem to know Drupal generally better than I.

I am using the module AJAX Forms (http://drupal.org/project/ajax) as well as TinyMCE.

I am using the AJAX Forms module to do an "in-line validation" of the comment form (so that no refresh is necessary) when a user tries to post a comment.

The problem I am running into is this: Since TinyMCE creates a separate textarea, the default Drupal textarea registers as blank. So in other words when the AJAX Forms module checks to see if there is a value in the "comment body" textarea, it registers as empty.

Now I know that triggerSave() might help me out, but I have no idea where or how to implement it. I found this site: http://maestric.com/en/doc/javascript/tinymce_jquery_ajax_form which seems to address the problem, but not sure.

I think I have narrowed it down to needing to sync the 2 textareas (the TinyMCE and Drupal default) before the form is submitted but I have no idea how to do that. Any help would be greatly appreciated. Thanks!

jestith’s picture

jestith commented

Ezequiel, again I really appreciate your contribution. For some reason I had trouble making it work for me, but I learned more in the process, and you've helped me fill in a gap in my skills.

After I did even more exploring, I now have a custom module that doesn't need to call triggerSave. (I was puzzled that it wasn't needed for regular contributed modules.) My exploring I found that when the form_submit function is called, although the old textarea contents are passed along in the form values, the $form_state does include the text altered under TinyMCE control. Basically I just examined $form_state['clicked_button']['#post']['my_textarea_name'].

Here are the relevant excerpts.

 function my_proposal_form() {
...
$form[$sample_chapter_content] = array (
 '#type'            => 'textarea',
 '#name'            => 'template_text',
 ,,,

function my_proposal_form_submit($form, &$form_state) {
$altered_text = $form_state['clicked_button']['#post']['template_text'];
 ...

Scott, I thought some about your Ajax issue, but I'm not familiar with that module. But if you're using normal javaScript for the event handler for the submit button, I would think adding tinyMCE.triggerSave(); at the start of your handler would do it.

John

eorbe’s picture

eorbe commented

jestith, excellent tip! I'm sure that this will help me in the near future. thank you very much!

Ezequiel

mupsi’s picture

mupsi
she/her
commented
Issue summary: View changes
Status: Active » Closed (outdated)