This is my first post using my new tagging tool within the Radio Userland
blogging application, using Mozilla. It really has been quite an
adventure in learning Javascript at a much deeper level … for
me. Radio has a WYSIWYG editor within it’s web interface that can
be used for writing posts, and there are two flavors (of course):
one for IE and one for Mozilla.
What I wanted to do is add a new toolbar button in the WYSIWYG editor
to allow me to enter a list of comma-delimited words, and have those
words converted to the proper HTML for tags … like the tags at the
bottom of this post. What an adventure!
I was actually able to get the code written and working for IE first
… but not exactly what I wanted. I wanted to have the tags
‘inserted’ at the cursor position, but could only get ‘append’
working. So the tags would always end up at the end of the
post. I then worked on the Mozilla version of this, and got
everything working perfectly! There was already some sample code
on how to do an ‘insert’ in Mozilla. Well … if I could do it in
Mozilla, then I had to find how to get the same functionality in
IE. The problem is that the Mozilla code (of course) would not work
with IE. In the end, it was three simple lines of Javascript!
win = document.getElementById(“idEdit”);
var sel = win.document.selection.createRange();
sel.pasteHTML(insertNode);
First, get the iFrame object that the user is typing in, then get the
selection range, then simply paste the HTML/text into that
selection. Simple! In fact much easier than the Mozilla
code that I was looking at. Of course, finding those three lines
was a real pain … until I found this great article at WebReference.
WebReference has always been an incredible site for reading and
learning about HTML, CSS, and Javascript. They came though again
with this article which finally gave me the details to resolve this
issue. Now I’m on to adding toolbar buttons to ease the way that
I insert images into a post. We’ll see how quick that goes …