Download & Extend

Editors disappear while form is submitting

Project:Wysiwyg
Version:7.x-2.x-dev
Component:User interface
Category:feature request
Priority:normal
Assigned:Unassigned
Status:active

Issue Summary

When hitting save or preview on a form which uses Wysiwyg with CKEditor the editor disappears leaving only the HTML textbox and the html for the content entered for the few seconds until the next page loads. This is rather ugly and it would be better if CKEditor stayed in place the entire time. Is there anyway to accomplish this?

Comments

#1

Version:6.x-2.1» 7.x-2.x-dev

This can only be fixed for D7. Not sure whether this is a duplicate, no time to search right now.

#2

Understood. Does anyone know if this is specific to CKEditor or whether all editors are affected? (Don't have the time to check right now but if no one responds by tomorrow I'll run through them all and take a look.)

#3

This affects all editors.

#4

The reason is simply that Wysiwyg currently runs the same code when syncing the editor's contents back to the original textarea on a form submit as it switching between editors (a call to the editor's detach() method). We should perhaps add a save() or sync() method to the implementation layer?

#5

subscribe

#6

Title:CKEditor disappears while form is submitting» Editors disappear while form is submitting

This applies to all editors.

#7

Any update on this?

#8

Nope, #4 still applies.
Note also that some editors may detach like this on purpose, to clean up event handlers and cross references between DOM objects and script objects so they won't cause memory leaks in certain browsers.

#9

Thanks for the down and dirty TwoD

#10

Are there any work-arounds for this in the meantime?

I am applying this patch and I'm wondering if this issue is related to its use.

#11

No, there are no workarounds. We need to differentiate between what happens when switching between editors and when submitting the form for this visual annoyance to go away.

#12

Any updates on this?? The editor disappears when you hit save button and when you try to embed media youtube http://drupal.org/project/media_youtube the raw source code is embedded instead of Video .

Edits

I tried with both tinyMCE and CKEeditor

#13

Version:7.x-2.x-dev» 7.x-2.1
Category:support request» bug report
Priority:minor» critical

#14

Version:7.x-2.1» 7.x-2.x-dev
Category:bug report» feature request
Priority:critical» minor

Editors disappearing is not a bug, the editors are detached/destroyed to sync the generated source code back to the original textarea - or nothing would be saved - and to prevent memory leaks from building up due to circular references between JavaScripts and DOM objects surviving page reloads.
This might not be necessary for all editors but it's the safest way to avoid potential browser crashes. Several of the more popular editors have built in cleanup routines that detect form submissions and destroy themselves for the very same reason.

It _might_ be possible to limit the visual effects of this, and allow editors that don't require full detachment to stay visible, by adding a new method to our editor API that'll just do the syncing part. It's something I've been thinking about adding to #614146: Drupal.wysiwyg.editor.instance needs additional methods but I haven't gotten that far yet. Hence, I'm turning this into a feature request for that just in case it doesn't get into the other issue.

I can't say exactly what happens with media_youtube.module since I haven't tried it, but if the video can actually be played when viewing the node, all is well.

#15

Priority:minor» normal

Whoops.

#16

Thanks for the explanation and update Henrik ..

#17

Not satisfied with that explanation. I've never seen this on any website systems besides drupal. No forum i've ever used had this problem, so its clearly not an impossible task nor a necessary feature.

Looks absolutely unprofessional, which is something I've notice drupal has big issues with prior to D7... It's unfortunate this module has rationalized a reason to maintain that tradition in D7. Get rid of it. No mercy for it. Kill it.

#18

+

#19

I agree 100% with #17... this makes drupal look sloppy.

#20

I guess it comes down to how you define a bug.

From a technical point of view it's clearly not a bug.

However, in my opinion it's a usability problem.

This opinion is based on the phone call I had with a client this morning, who though that the save button had to be clicked twice.

She formed this impression because, in her mind, when the WYSIWYG editors disappeared, she was on a new page.

That is to say, that her interpretation of a "new page", is when there is a significant change in the appearance of the page.

So she clicked save again, and was informed her changes couldn't be saved. Only to discover that her changes had been saved.

Granted, we are working on a slow staging server, so it's likely to be less of a problem when live.

For all of these reasons I think this is a usability issue serious enough to be called a bug.

My current thinking is that I will bind something to the save button that puts a transparent matte over the whole page as it saves.

#21

nzcodarnoc, I'd be interested in the transparent matte solution for the interim. Please keep us informed. You may also want to look at this module, I haven't yet tested the D7 dev release. http://drupal.org/project/hide_submit

#22

Note: the site I'm working on is Drupal 6

I've implemented this leveraging the matte in Lightbox2, so you will need to have Lightbox2 installed for this to work.

First of all I created a custom module and put the following in hook_form

<?php
function modulename_form_alter(&$form, &$form_values, $form_id)
{
 
drupal_add_js(drupal_get_path('module', 'modulename').'/modal-saving.js');
 
// rest of hook_form_alter (if required)
}
?>

Then in the modulename folder I add the file modal-saving.js

Drupal.behaviors.modulename_modal_saving = function(context) {
  $('#edit-submit, #edit-save').click(function() {
    $('body').append('<div id="lightboxAutoModal" style="display: none;" rel="lightmodal[|width:400px; height:50px;]" ><p>Saving...</p></div>');
    Lightbox.initList(context);
    $('#lightboxAutoModal', context).triggerHandler('click');
  });
};
nobody click here