One more: Formatting buttons for review page? [tracked]
Moderator: AniDB
One more: Formatting buttons for review page? [tracked]
Instead of entering the formatting tags, wouldn't it be nicer to have buttons to do this for you, just like on the forum?[/code][/i]
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
http://factus.home.sapo.pt/int_news_admin.htmexp wrote:this is a simple javascript exercise, which I am way to lazy to do.
so if anyone feels like providing some copy&paste ready code for the buttons, hell why not.
although I _never_ use the ones on the forum
BYe!
EXP
i've done something like what is sugested for a site i have, the code is on the html, although it works, you are free to optimize it at will.
A very usefull optimization would be to give focus back to the text entry box after pressing a button, but as i seldom use my own script i didn't do that
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
http://factus.home.sapo.pt/input.htmlexp wrote:they don't seem very usefull.
they should take cursor position and selections into account.
BYe!
EXP
a very revised version, taking as base the forum one.
- added cursor position and selections into account;
- access key support just like the forum for easy tag editing
- added both html and pseudo-bbcode support;
- added basic and extended mode, basic mode is just what is needed for reviews.
known bugs:
- selections for quote and code outside of the textarea don't work, i've losted the behaviour somehow between getting the text and put it at work.
- line breaks in the text are aren't converted to br's in the preview.
The [B] and [I] code integrated in the buttons would be a very welcome addition by itself already. I can live with a not-so-functional-quote-button for the moment
You should try to improve Firefox support though, since AniDB/EXP tries not to promote IE, afaik
Still, thanks for the code! Now let`s see if EXP wants to add it ...
You should try to improve Firefox support though, since AniDB/EXP tries not to promote IE, afaik
Still, thanks for the code! Now let`s see if EXP wants to add it ...
more like IE is not officially supported. if it works fine if not well tough luck.Gambit wrote:You should try to improve Firefox support though, since AniDB/EXP tries not to promote IE, afaik
you better get your kicking boots readyStill, thanks for the code! Now let`s see if EXP wants to add it ...
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal
okay, new and very much final version:
http://factus.home.sapo.pt/input.html
example html
inputbox.js
inputbox.css
Example usage:
That's it, just have to comment on one thing, this thing allowing for selection ranges, cursor position and browser support is far from simple
*Edit* Updated script twice since posting this message, made script more generic and corrected some minor bugs
*Edit2* for a bit of an overkill i've added a rich text editor also, works on firefox 0.6+, ie5.0+ and opera 9.0p1+, example here
http://factus.home.sapo.pt/input.html
additions wrote:
- Auto convert breaks in text area to html br's;
- Text outside the textarea can now be quoted using the button;
- Tested and working in: Firefox 1.5.0.1 (Linux), Opera 8.52 (Linux) and IE 6.0sp2 (WinXP);
- If the browser doesn't support javascript no formatig buttons appear, the downside is that i've made the buttons part of the javascript.
files:known bugs wrote:
- Access keys only work ok in firefox, in Opera they don't work and in IE they don't take selection ranges into account.
example html
inputbox.js
inputbox.css
Example usage:
Code: Select all
<!-- Add this to the <head> section of the html -->
<link rel="stylesheet" href="inputbox.css" />
<script language="Javascript" type="text/Javascript" src="inputbox.js"></script>
<!-- Add this to the <body> tag -->
onLoad="init();"
<!-- Add this form and table to the <body> section of the html -->
<form enctype="text/plain" method="post" action="#" name="form_area">
<table style="text-align: left; width: 100%;" border="0" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td><span id=mode_controls></span></td>
</tr>
<tr>
<td><span id=controls></span></td>
</tr>
<tr>
<td><span id=font_controls class="hidden"></span></td>
</tr>
<tr>
<td><span id="help_line" style="font-size: x-small"></span></td>
</tr>
<tr>
<td><textarea tabindex="1" cols="70" rows="10" id="text_area"></textarea></td>
</tr>
<tr>
<td><input type="button" value="Preview" onclick="preview_output()">
<input type="reset" value="Clear" onClick="init();"></td>
</tr>
<tr><td><span id="preview"></span></td></tr>
</tbody>
</table>
</form>
<!-- Edit the myArea variable in the init() function inside the .js file to point to the default textarea -->
myArea = document.getElementById('text_area'); // default textarea
*Edit* Updated script twice since posting this message, made script more generic and corrected some minor bugs
*Edit2* for a bit of an overkill i've added a rich text editor also, works on firefox 0.6+, ie5.0+ and opera 9.0p1+, example here
-
- AniDB Staff
- Posts: 438
- Joined: Thu Apr 08, 2004 1:43 am
- Location: Portugal