Jeff and .NET

The .NET musings of Jeff Putz

Sponsors

News

My Sites

Archives

Inserting text into Firefox rich text editor

I'm trying to build a light-weight rich text editor that works in Firefox. So far so good, as I have the usual bold, URL, image, etc., stuff working. Where I'm stuck is inserting text. For example, if you want to insert "forum tags" for quotes, which we don't put in as HTML, how is that done? In IE, you can do it like this...

var box = document.getElementById(ctrl).contentWindow;
box.document.designMode = "on";
...
function makeQuote(cmd)
{
var edittext = box.document.selection.createRange();
var original = edittext.htmlText;
edittext.pasteHTML('['+cmd+']'+original+'[/'+cmd+']');

So in this case, selecting text in the editor then triggering the event would yield something like:
[quote]this is a quote[/quote]

How is this done in Firefox?
Posted: Apr 28 2005, 11:45 AM by Jeff | with 7 comment(s)
Filed under:

Comments

Damien Guard said:

Check out FCKEditor at http://www.fckeditor.net/

It provides a full set of editing controls that work with both the IE and Mozilla/Firefox edit systems.

Even if it's not suitable you could learn a thing or two from the source, it's LGPL'ed.

[)amien
# April 28, 2005 12:08 PM

Bjarne said:

You can use value.substring along with selectionStart and selectionEnd. Something like this:

function ForumMarkUp(strTb, strType)
{

if (window.getSelection) //true for Firefox, maybe IE too?
{

if (strType == "bold")
{
document.getElementById(strTb).value = document.getElementById(strTb).value.substring(0,document.getElementById(strTb).selectionStart) + "[b]" + document.getElementById(strTb).value.substring(document.getElementById(strTb).selectionStart,document.getElementById(strTb).selectionEnd) + "[/b]" + document.getElementById(strTb).value.substring(document.getElementById(strTb).selectionEnd,document.getElementById(strTb).value.length);
}

}

}
# April 29, 2005 1:26 AM

Marc Hoeppner said:

Check out http://www.freetextbox.com, works for both IE and Firefox!!
# April 29, 2005 3:02 AM

Jeff said:

I'm well aware of FreeTextBox, and it's too bulky. It also doesn't render stuff in non-CSS mode in Firefox even though the latest version says it shoud.
# April 29, 2005 8:13 AM

boombox said:

unrelated, but: http://blogs.wwwcoder.com/jdee/archive/2005/05/09/4068.aspx
# May 9, 2005 11:01 AM

J said:

Hey Jeff,

Did you ever get anywhere with this? I'm in the same boat right now with my website. All I want to do is has very light weight rich text editor for users add and information about products (bullets underlines) color

# July 21, 2008 3:49 PM

Jeff said:

I did... obviously things changed a lot in three years. If you check out my PointBuzz site (http://www.pointbuzz.com/) and go into the forums and register, you can see my current implementation in the script pieces. It's wrapped in the AJAX framework, but the formatting code works something like this...

_formatCustom : function(command) {

if (this._isGecko)

{

var edittext = this._richBox.contentWindow.getSelection().getRangeAt(0);

var original = edittext.toString();

edittext.deleteContents();

edittext.insertNode(document.createTextNode("["+command+"]"+original+"[/"+command+"]"));

}

if (this._isIE)

{

var edittext = this._richBox.contentWindow.document.selection.createRange();

var original = edittext.htmlText;

edittext.pasteHTML("["+command+"]"+original+"[/"+command+"]");

}

},

# July 21, 2008 4:11 PM
Leave a Comment

(required) 

(required) 

(optional)

(required)