Live Comment Previews
Looking to upgrade my blog with live previews I came across several methods, however, since my comments allow for Textile formatting, I wanted to see if that could be processed on the fly.
I googled and was surpised to see that someone had already started working on it. I was quite pleased with the solution I found, but it was missing a few things:
* h tag support
* br tag support
* proper html syntax (a few tags were being closed incorrectly.)
* Various small fixes
So I went and upgraded the JS to include those things and made a demo paged. Check out the Live JS Textile Parsing in action. All of the source code is on there and free for use. I would like credit through, and I am sure Stuart Langridge would appreciate keeping his ;-)
h3. Useage warning
Everything looked great. I had it ready to go, tested it locally and it worked fine…
…until I made the code live of course.
I kept on getting this crazy JS error in FireFox that went something a little like:
@Error: uncaught exception: [Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIDOMNSHTMLElement.innerHTML]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: http://www.creatimation.net/textile.js :: reloadPreviewDiv :: line 67" data: no] @
Anyway, I figured out what the problem is: Apparently Gecko has issues with using the javascript property “innerHTML” when the mime type of the page is “application/xhtml+xml”.
Solution? Turn the site back to “text/html” and it works great. Bummer about having to turn it off – I’ll see if I can find another way to do this while still allowing for the use of the correct mime type for these pages.
Update: This error occurs because there is no innerHTML varaiable in XHTML because it is a proper XML derivitive. This means that any inserted code must be done so with proper dom intserting elements. This, however, would either require an incredibly smart function to take a string and convert all the HTML to dom objects, or a complete rewrite of the function to be DOM friendly in the first place — neither of which is a really happy idea.
So, for the time being, the “turn off mime type” is still the best I’ve got.
Let me know if you find it useful!
of course I didn’t meant -textile generated- but –textile generated– Stupid me :)
damn.. wrong again. well.. you know what I mean
Do you mean you just want the content of a textarea to show up in a div?
That’s generally pretty easy.
@textarea onkeyup=”document.getElementById(‘previewdiv’).innerHTML = this.value;” /textarea
div id=”previewdiv” /div@
(please excuse the lack of proper brackets…cant figure out how to get that to work with textile code :-/ )
That should do the trick for just textarea to div stuff.
With application/xhtml+xml, Firefox requires that you use the “DOM functions”:http://www.mozilla.org/docs/dom/domref/ to insert any elements. Which is a shame, because IE isn’t great on complex DOM.
spiff!
That is teh awesome!
This is great. However, i’ve been searching for a way to do this, but starting with -textile generated- html code in one textarea, to use in a CMS. Do you perhaps know how to do this?
*Sam*: Yeah, he should know now. I sent him an email :D
Excellent changes Jeff – I’ll incorporate your script back into mine. Did you let Stuart know you’ve updated his script? I’m sure he’ll be interested…
*David* – I realized this a little bit later on. I searched for methods that would allow me to emulate the “innerHTML” functionality, however I’ve had very little success. Every option I have tried so far has failed once I put the site back into application/xhtml+xml.
“WebFX Attempt”:http://www.webfx.nu/dhtml/mozInnerHTML/mozInnerHtml.html
and also
“WebFX IE Emu”:http://webfx.eae.net/dhtml/ieemu/htmlmodel.html
Without being able to emulate the innerHTML functionality, it’s pretty much not going to work to put the site back to the proper mime type. Considering that the textile.js just makes an HTML string, as opposed to proper nodes etc.
I have, of course, “tried getting around it”:http://hq.servequake.com/view/inner.php but have had zero luck so far. Despite the fact that the line it is catching an error on “is in the gecko engine”:http://www.mozilla.org/docs/dom/domref/dom_range_ref26.html#1005287.
If you’ve got any leads on how to get around this, I’m all ears.
I think i’ve found a solution. Get a handle on the parent node, delete the child, append a new child.
bcd = document.getElementById( “bcd” );
span_old = document.getElementById( Target );
span_new = document.createElement( “span” );
span_new.setAttribute( “id”, Target );
count_new = document.createTextNode( “now ” + (MaxChars – Length) + ” left” );
span_new.appendChild( count_new );
bcd.replaceChild( span_new, span_old );
So no more Javascript error on Firefox, even with application/xtml+xml, but now it’s broken on Konqueror.
oops my bad, it does work on Konqueror.
*Brian* How does this work in relationship to something as “simple as this”:http://hq.servequake.com/view/inner.php?xml=1?
You see the I believe the dilema is that Gecko does not allow and kind of “inner html” type editing because it is not the proper DOM formatting appending/childing/parenting solution.
However, if you can get this hooked up (as the code you posted seems in no way connect to my script) then please – show me the light! :D
application/html+xml means XML DOM, innerHTML is an (extension) to HTML DOM, which is unavailable in XML mode. It’s the same reason “document.write doesn’t work in XML mode”:http://ln.hixie.ch/?start=1091626816&count=1
Where can i download the Live JS Textile Parsing files if there are free of course
Live *preview* comments? Impressive. I expected not to see punctuation marks but _strong_ or -strike- or such in the live preview though. Is that featured turned off, as I thought that was largely the point?
I’m not sure what you are asking, really.
how to install?
Hey, this is great. Can you include textile to generate class and id for any elements? such as, p(foo). first paragraph = first paragraph? thanks
Not sure if you’re aware or not, but the deleted text is a bit buggy. It works on a newline, but not inline. It just comes out as -deleted-. Any plans for a bug fix?
That’d be [hyphen]deleted[/hyphen]
_Any_ chance of this stuff getting integrated into the live-comment-preview plugin? Or am I missing some sort of non-obviousness there?
Nevermind.. I did it myself. My son woke up early, and we just finally got him back to sleep, leaving me wide awake, with the time to effect the changes. Not exactly fully QA’d, but it seems to work. Basically, I grabbed the superTextile() function out of this javascript and replaced the wptexturize() function’s contents with this, and reset the var parameter appropriately. For all I know, my toaster may now eat cats & rabbits, but it seems to be working.
thx
What is the license for this? I would like to try my hand at a Mambot for the Joomla! CMS
Vis
iting of your site is the real holiday for me.
___________________________
http://www.krabi.go.th/men/
Cool site!!
Very nice. However, rendering of & tags doesn’t work properly in IE.
For example, if my textarea is:
Line 1
Line 2
Line 3
Then my rendered HTML will be:
Line 1
Line 2
Line 3
The didn’t come out right…it deleted my brackets.
Anyway, check it out for yourself. You’ll see what I mean.
How does this work?
Nice Work! Thanks.
And I like your site, by the way.
Greetings by
Johannes
(The backlink to this post in your example is broken. It needs that 343-.)
i have need html code for live comment
very nice, only JS textile implementation i have found, however it doesnt support tables, as described here: http://en.wikipedia.org/wiki/Textile_(markup_language)
I will add table support…