neokoenig / jQuery-gridmanager

A way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor
http://neokoenig.github.io/jQuery-gridmanager/
461 stars 129 forks source link

With Rich Text Editors you need to click twice #81

Open ddegil opened 8 years ago

ddegil commented 8 years ago

When using with Rich Text Editors (I use tinymce) you have to click in an editable area two times to get the editor up. It seems the first click creates the needed associations and the second click shows it. Once you have clicked on an area at least one time the editor is made and from that point on it takes only one click to bring it up. How can I make it always be a single click? If a code change is needed, is there a way I can run a jquery code to preclick all the right places ( $('.pointer').toggle('click'))?

Thanks.

David

neokoenig commented 8 years ago

hmm, you might be able to do it in one click; but I think you'd need to then manually 'pop' up the editor via some inbuilt API function for the editor itself.

The reason I didn't 'pre-load' CKeditor/TinyMCE etc onto each region was that I was worried that it wouldn't be very efficient to essentially load potentially 40 - 50 instances of CKeditor/TinyMCE (assuming a complex page); IIRC, I never quite got it working on a single click. Bet it's possible though.

ddegil commented 8 years ago

Okay, what elements in the page takes the click event to initiate gridmaster? I thought it may be .gm-editing but if I run $('.gm-editing').toggle('click') when your test page loads, it clears all areas. :/

neokoenig commented 8 years ago

I think you'd have to edit the source for this: gm.rteControl() is where RTE editors are attached on click; the click event is attached to .gm-editable-region > .gm-content IIRC.

Basically, on init, there's a initControls() function which has:

// Make region editable
            }).on("click", "." + gm.options.gmEditRegion + ' .'+gm.options.gmContentRegion, function(){
              //gm.log("clicked editable");
                if(!$(this).attr("contenteditable")){
                    $(this).attr("contenteditable", true);
                    gm.rteControl("attach", $(this) );
                }

The rteControl attaches or destroys RTEs ; so I think what you want to do is put something after line 1165

case 'tinymce':
                    if(!(element).hasClass("mce-content-body")){
                      element.tinymce(gm.options.tinymce.config);
                    }
// here
break;
ddegil commented 8 years ago

I have tried that exact spot, but was not able to get the tinymce to open. :( Sadly I do not fully understand the RTE code.