Javascript formatting toolbar for perlmonks

Some people have asked for a javascript formatting toolbar above the post textarea. Here is my variant. Just copy the below text to your free nodelet settings.

<script type="text/javascript" defer><!--
function edittoolbar_help(){window.alert('Separate paragraphs with "<p
+>", put "<c>".."<\x2fc>" around code or data (linebreaks inside it ar
+e taken literally) and you\x27ll be okay.  Don\x27t forget to check i
+f the preview looks right.');}
(function(){
var d=document,c="createElement",i="appendChild";
var t=d.getElementsByTagName("textarea")[0];
function b(x){ t.parentNode.insertBefore(x,t) };
if(t){
var l=d[c]("a"),m=d[c]("img");
m.src="http://www.math.bme.hu/~ambrus/pu/edittoolbar";
m.border=0;
l.href="javascript:edittoolbar_help()";
l[i](m);b(l);b(d[c]("br"));
}
})();
//--></script>
[download]

If people like this, it could even be made an official perlmonks patch to aid some new monks which you can then disable by a setting. Of course in that case the image has to be copied to the perlmonks server.

Comment on Javascript formatting toolbar for perlmonks Download Code

Replies are listed 'Best First'.
Re: Javascript formatting toolbar for perlmonks by Gavin (Archbishop) on Aug 20, 2009 at 10:38 UTC
ambrus I really liked this idea and gave it a try in both Firefox and IE8 While I can get the interface to display correctly any attempt to use the formatting buttons results in The following warning Separate paragraphs with "<p>", put "<c>".."</c>" around code or data (linebreaks inside it are taken literally) and you'll be okay. Don't forget to check if the preview looks right.	[reply]
Re: Javascript formatting toolbar for perlmonks by ambrus (Abbot) on Nov 25, 2009 at 15:34 UTC
The code above had a bug which I somehow didn't notice since now. It forgot to insert the paragraph tag to put the toolbar in a separate page, so sometimes (in wide pages) the toolbar shows to the left of the textarea, which is ugly. The fix would be trivial: change `t.parentNode.insertBefore(l,t);` [download] to `t.parentNode.insertBefore(p,t);` [download] However, this is a bit ugly, because the paragraph tag adds some vertical space between the toolbar and the image, so I'll soon fix the code to add a `br` tag instead of a `p` tag. The original node will contain the fixed code (it does now), so here's a backup copy of the old code. Read more... (1219 Bytes)	[reply] [d/l] [select]
Re: Javascript formatting toolbar for perlmonks by Gavin (Archbishop) on Aug 22, 2009 at 08:59 UTC
Anybody managed to get this toolbar to work on any system? Perhaps they could give some pointers for Windows systems	[reply]
Re^2: Javascript formatting toolbar for perlmonks by Anonymous Monk on Aug 22, 2009 at 09:38 UTC
It inserts an image above textarea, and when you click on it it alerts with `Separate paragraphs with "<p>", put "<c>".."</c>" around code or data +(linebreaks inside it are taken literally) and you'll be okay. Don't + forget to check if the preview looks right.` [download] That is all it does.	[reply] [d/l]
Re: Javascript formatting toolbar for perlmonks by Argel (Prior) on Aug 19, 2009 at 19:58 UTC
Any chance of getting this hosted here on PerlMonks? Elda Taluta; Sarks Sark; Ark Arks	[reply]

Back to Perl Monks Discussion