plandem / lwrte

Export from Google Code. Lightweight Rich Text Editor (RTE / WYSIWYG) for jQuery
https://code.google.com/p/lwrte/
0 stars 0 forks source link

External editor controls #17

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago
I'm using lwrte with custom external controls-buttons (which use lwrte 
object methods to manipulate content), which are located outside iframe, 
and with completely hidden default toolbar.

There was a number of issues I faced, when implementing, so I want to 
share my solutions, may be someone will find them usefull =)

===== First issue =====

When such button was clicked, iframe lost focus so any text selection in 
IE was lost (though worked in other browsers) and styling/elements were 
inserted in the beginning of content, not where I needed/wanted them. So I 
could not actually make some text bold, only if I chose bold first and 
then typed in the text.

Fix was:
step 1: adding

$(self.iframe_doc).blur(function(event){ 
 if (self.iframe_doc.selection) 
 self.range = self.iframe_doc.selection.createRange();
});

into "lwRTE.prototype.enable_design_mode" function to save selection on 
blur (external button press)

step 2: inserting

if ($.browser.msie && this.range.text != "") 
 this.range.select();

after each "this.iframe.contentWindow.focus();" in 
"lwRTE.prototype.editor_cmd" function.

that restores selection after focusing iframe. Works like a charm for me =)

===== Second issue =====

I needed to override default behaviour on Enter key press to perform 
another action on the event and to insert new line on Ctrl+Enter. Those 
are easily trapped and overridden, but the problem was to insert new line 
itself. I chose the "inserHTML" command with "<br><div/>" parameter to 
perform it, that works perfectly everywhere except IE, which in it's turn 
does not understand the command. So I had to implement an workaround:

if(command == 'insertHTML' && $.browser.msie)
{
 var ec_sel = this.iframe.contentWindow.document.selection;
 if (ec_sel!=null)
 {
  var ec_rng = ec_sel.createRange();
  ec_rng.pasteHTML(args);
 }
}
else
 this.iframe_doc.execCommand(command, false, args);

that allows "inserHTML" in IE.

* Note, that jQuery 1.3+ does not support
$.browser any more, so one has to extend it manualy if need, or use your 
own IE check, $.support is not enough for now as for me.

====================

May be it makes sence to include those fixes to the source.
Comments appreciated.

Original issue reported on code.google.com by Psychode...@gmail.com on 28 Feb 2009 at 11:30

GoogleCodeExporter commented 9 years ago
Hello, thanks for your issues. about $.browser, well it's still working. It's 
not
recommended, but it's still here! :)

Original comment by plandem on 5 Mar 2009 at 9:41