Scratch
archived forums
This is a read-only archive of the old Scratch 1.x Forums. Try searching the current Scratch discussion forums.
#1 2011-11-05 12:51:09
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
BBCode editing suite
Check it out here.
Here's the HTML code for it:
Code:
<div>
<div style="font-family: trebuchet ms; background-color: blue; font-size:12px; width: 525px; height: 30px; overflow:auto; border:1px solid blue;"><a href="#"><font color="#FFFFFF">Output:</font></a><div style="float:right"><font color="white">#1</font></div></div>
<div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 525px; overflow:auto; border:solid blue; float:left; border-width: 1px;">
<br>
</div>
</div>
<div style="clear:both">
<br />
<button onclick="embed('b')"><b>B</b></button><button onclick="embed('i')"><i>I</i></button><button onclick="embed('u')"><u>U</u></button><button onclick="pickColor()"><font color="red">C</font></button><button onclick="embed('quote')"><q>Q</q></button><button onclick="embed('code')"><code>Code</code></button><button onclick="embed('url')"><u><font color="blue">URL</font></u></button><button onclick="embed('img')"><img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Scratch_Cat.gif" height=15 widht = 15/></button><button onclick="instructions()">?</button><button onclick="dcol=prompt('Type a default color:', 'blue')">S</button>
<br />
<textarea id="bbc" onkeyup="render(event)" rows=20 cols=100></textarea></div>
<script type="text/javascript">
var color = "red";
var dcol = "red";
var pos=0;
function escape()
{
pos=doGetCaretPosition(document.getElementById("bbc"));
setCaretPosition(document.getElementById("bbc"),document.getElementById("bbc").value.indexOf("]", pos)+1)
}
function render(event)
{
if (event.altKey) {alert()}
document.getElementById("txt").innerHTML=document.getElementById("bbc").value.replace(/</g, "<").replace(/>/g, ">").replace(/\[b\]/g, "<b>").replace(/\[\/b\]/g, "</b>").replace(/\[i\]/g, "<i>").replace(/\[\/i\]/g, "</i>").replace(/\[u\]/g, "<u>").replace(/\[\/u\]/g, "</u>").replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\">").replace(/\[\/quote\]/g, "</blockquote>").replace(/\n/g, "<br>").replace(/\[img\]/g, "<img src=\"").replace(/\[\/img\]/g, "\">").replace(/\[code\]/g, "<blockquote style=\"overflow:scroll; font-family: monaco; height:200px;width:400px;background-color:#F1F1F1; border-style: inset; border-width:2px;\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>").replace(/\[\/code\]/g, "</blockquote>").replace(/\[url=/g, "<a href=\"").replace(/\[\/url\]/g, "</a>").replace(/\[color=/g, "<font color=\"").replace(/\[\/color\]/g, "</font>").replace(/\]/g, "\">")+"<br><blockquote><p><i>Last edited by you, "+Date()+".</i></blockquote></p>"
if(document.getElementById("txt").innerHTML == "") {document.getElementById("txt").innerHTML = "<br />"}
}
function instructions()
{
alert("Welcome to BBReader! Here, you can type and watch BBCode, a markup language, get rendered in real time. Use the editools on top to format text by adding modifying tags around it, such as [b]txt[/b] for bold. Press alt to \'escape\' the current set of tags. You can edit settings with the \'S\' menu.")
document.getElementById("bbc").focus()
}
function pickColor()
{
color = prompt("Type a color\'s name. Gainsboro returns text invisible on normal posts areas, lavenderblush returns text invisible in quote boxes, and transparent returns text invisible in both but visible in Internet Explorer.", dcol)
embed("color")
}
function embed(tag)
{
var ctrl = document.getElementById("bbc");
pos=doGetCaretPosition(ctrl);
if (tag == "url")
{
ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"=][/"+tag+"]" + ctrl.value.substr(pos)
setCaretPosition(ctrl, pos+2+tag.length)
}
if (tag == "color")
{
ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"="+color+"][/"+tag+"]" + ctrl.value.substr(pos)
setCaretPosition(ctrl, pos+tag.length+color.length+3)
}
else
{
ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"][/"+tag+"]" + ctrl.value.substr(pos)
setCaretPosition(ctrl, pos+2+tag.length)
}
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos)
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
</script>
<script type="text/javaScript">
function testKeyCode(e)
{
if(e.altKey)
{
escape();
}
}
document.onkeydown = testKeyCode;
</script>Use the editools to edit and alt to escape the current tag.
Last edited by Hardmath123 (2011-11-06 01:04:24)
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#2 2011-11-05 14:50:49
- scimonster
- Community Moderator
- Registered: 2010-06-13
- Posts: 1000+
Re: BBCode editing suite
Wow!
Moderator | Scratch Wiki Administrator | Coders' Shed AdministratorScratch 2.0 is just around the corner! Prepare for the transition by beta testing. Your feedback will help make it the best it can be!
Offline
#3 2011-11-05 15:03:02
Re: BBCode editing suite
Really cool! May I add a suggestion?
Make it so that when one highlights text in the textbox, and clicks on a format button, the tags wrap around the text instead of appearing at the beginning.
A code for this (in English) could be,
if selection length is more than zero, wrap the tags around.
otherwise, make the tags appear at cursor (selection start i think)
Offline
#4 2011-11-05 15:23:45
- scimonster
- Community Moderator
- Registered: 2010-06-13
- Posts: 1000+
Re: BBCode editing suite
Give a link instead of making people create it themselves.
http://dl.dropbox.com/u/42774013/Scratc … tools.html
Moderator | Scratch Wiki Administrator | Coders' Shed AdministratorScratch 2.0 is just around the corner! Prepare for the transition by beta testing. Your feedback will help make it the best it can be!
Offline
#5 2011-11-05 16:09:21
Re: BBCode editing suite
I'm going to try and improve this editor -- visually and coding-wise.
Expect news from me later today!
EDIT
I'm already good way into editing the code 
It's coming along pretty well!
Last edited by LS97 (2011-11-05 16:25:20)
Offline
#7 2011-11-05 17:40:06
#8 2011-11-06 01:03:52
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
Re: BBCode editing suite
Thanks, IHeartGaming for the site. I'll add it to the main post.
EDIT: Working on using cookies to remember last input.
Last edited by Hardmath123 (2011-11-06 01:04:50)
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#9 2011-11-06 08:07:16
Re: BBCode editing suite
Hey guys, look what I found!
Hey guys, whats up? I made this post with Hardmath123's BBCode editing suite!
My test of it 
Last edited by gbear605 (2011-11-06 08:07:29)
Yeah, I'm mostly inactive. I check in once in a while though. If you want to contact me, I have a contact form at my website, http://escratch.org
Offline
#10 2011-11-06 08:23:49
Re: BBCode editing suite
My improved suite has been delayed, but is being worked on! 
Offline
#11 2011-11-06 08:53:34
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
Re: BBCode editing suite
LS97 wrote:
My improved suite has been delayed, but is being worked on!
Quite curious, hurry up!
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#12 2011-11-06 09:26:55
Re: BBCode editing suite
sweet!
If you are reading this, please read to the end, because if you don't you won't know what's at the end. Don't just skip to the end though otherwise you won't be able to read the middle, which is most important. Now you must be wondering why you just read all that, the reason is you may have not noticed something, read it again and see if you notice it this time
Offline
#13 2011-11-06 09:29:04
Re: BBCode editing suite
The improved version is done
Hardmath, remember not to use the font tag. It's been deprecated (see w3 for details)
Code:
<style type="text/css">
button {
background-color: #FC0;
border: thin #F30 groove;
height: 30px;
padding: 4px 10px;
margin-left: 0px;
margin-right: 0px;
font-family: "Courier New", Courier, monospace;
}
button:hover {
background-color: #F93;
}
h1 {
font-family: Verdana, Geneva, sans-serif;
font-size: 24px;
color: #06F;
}
textarea {
background-color: white;
border-bottom-style: solid;
border-bottom-width: 1px;
border-left-style: solid;
border-left-width: 1px;
border-right-style: solid;
border-right-width: 1px;
border-top-style: solid;
border-top-width: 1px;
color: black;
cursor: auto;
display: inline-block;
font-family: 'Trebuchet MS', 'Luxi Sans', Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 240px;
letter-spacing: normal;
line-height: normal;
list-style-image: none;
list-style-position: outside;
list-style-type: none;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 2px;
padding-left: 2px;
padding-right: 2px;
padding-top: 2px;
resize: both;
text-align: -webkit-auto;
text-indent: 0px;
text-shadow: none;
text-transform: none;
white-space: pre-wrap;
width: 710px;
word-spacing: 0px;
word-wrap: break-word;
}
</style>
<h1>BBCode Editor</h1>
<div>
<div style="font-family: trebuchet ms; background-color: #006FC9; font-size:12px; width: 740px; height: 24px; overflow:auto; border:1px solid blue;"><a href="#"><font color="#FFFFFF">Output (final result may vary)</font></a><div style="float:right"><font color="white">#1</font></div></div>
<div style="float: left; width: 230px;"> </div>
<div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 510px; overflow:auto; border:solid blue; float:left; border-width: 1px;">
<br>
</div>
</div>
<div style="clear:both">
<br />
<button onclick="embed('b')"><strong>B</strong></button><button onclick="embed('i')"><em>I</em></button><button onclick="embed('u')"><span style="text-decoration: underline">U</span></button>
<button onclick="pickColor()"><font color="red">C</font></button>
<button onclick="embed('quote')">“ Q „</button><button onclick="embed('code')">Code</button>
<button onclick="embed('url')"><span style="color: #03C; text-decoration: underline">URL</span></button><button onclick="embed('img')">Image <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Scratch_Cat.gif" height=15 widht = 15/></button>
<button onclick="instructions()">?</button><button onclick="dcol=prompt('Type a default color:', 'blue')">S</button>
<br />
<textarea id="bbc" onkeyup="render(event)" rows=20 cols=100></textarea></div>
<script type="text/javascript">
var color = "red";
var dcol = "red";
var pos = 0;
function escape()
{
pos=doGetCaretPosition(document.getElementById("bbc"));
setCaretPosition(document.getElementById("bbc"),document.getElementById("bbc").value.indexOf("]", pos)+1)
}
function render(event)
{
if (event.altKey) {alert()}
document.getElementById("txt").innerHTML = document.getElementById("bbc").value
.replace(/</g, "<").replace(/>/g, ">") // Triangular brackets
.replace(/\[b\](.*)\[\/b\]/g, "<b>$1</b>") // Bold
.replace(/\[i\](.*)\[\/i\]/g, "<em>$1</em>") // Italics
.replace(/\[u\](.*)\[\/u\]/g, "<span style=\"text-decoration: underline;\">$1</span>") // Underline
.replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\">") // Simple Quote Beginning
.replace(/\[quote=(.*)\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\"><strong>$1 wrote:</strong><br />") // Complex Quote Beginning
.replace(/\[\/quote\]/g, "</blockquote>") // Quote End
.replace(/\n/g, "<br>") // Line break
.replace(/\[img\](.*)\[\/img\]/g, "<img src=\"$1\" />") // Images
.replace(/\[code\]/g, "<blockquote style=\"overflow:scroll; font-family: Courier New; height:200px;width:400px;background-color:#F1F1F1; border-style: inset; border-width:2px;\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>") // Code Begin
.replace(/\[\/code\]/g, "</blockquote>") // Code End
.replace(/\[url=/g, "<a href=\"")
.replace(/\[\/url\]/g, "</a>")
.replace(/\[color=(.*)\](.*)\[\/color\]/g, "<span style=\"color: $1;\">$2</span>")
+ "<br><blockquote><p><i>Last edited by you, "+Date()+".</i></blockquote></p>";
if(document.getElementById("txt").innerHTML == "") {
document.getElementById("txt").innerHTML = "<br />"
}
}
function instructions()
{
alert("Welcome to BBReader! Here, you can type and watch BBCode, a markup language, get rendered in real time. Use the editools on top to format text by adding modifying tags around it, such as [b]txt[/b] for bold. Press alt to \'escape\' the current set of tags. You can edit settings with the \'S\' menu.");
document.getElementById("bbc").focus();
}
function pickColor()
{
color = prompt("Type a color\'s name. Gainsboro returns text invisible on normal posts areas, lavenderblush returns text invisible in quote boxes, and transparent returns text invisible in both but visible in Internet Explorer.", dcol);
if (color == null) {return;}
embed("color");
}
function embed(tag)
{
var ctrl = document.getElementById("bbc");
pos=doGetCaretPosition(ctrl);
if (tag == "url") {
var ur = window.prompt("Insert target URL...", "http://");
var nm = window.prompt("Specify link label... (cancel to use URL)", ur.replace(/http\:\/\//g, "").replace(/\/(.*)/g, ""));
if(nm == null) {
ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos);
} else {
ctrl.value = ctrl.value.substr(0,pos) + "[url= + ur + ]" + nm + "[/url]" + ctrl.value.substr(pos);
}
setCaretPosition(ctrl, pos+2+tag.length);
} else if (tag == "img") {
var ur = window.prompt("Insert image URL...", "http://");
if (ur == null) {return;}
ctrl.value = ctrl.value.substr(0,pos) + "[img]" + ur + "[/img]" + ctrl.value.substr(pos);
setCaretPosition(ctrl, pos+tag.length+color.length+3);
} else if (tag == "quote") {
var nm = window.prompt("Who do you wish to quote? (Cancel for simple quote)", "");
if(nm == null) {
ctrl.value = ctrl.value.substr(0,pos) + "[quote]Contents[/quote]
" + ctrl.value.substr(pos);
} else {
ctrl.value = ctrl.value.substr(0,pos) + "[quote=" + nm + "]Contents[/quote]
" + ctrl.value.substr(pos);
}
setCaretPosition(ctrl, pos+tag.length+color.length+3);
} else if (tag == "color") {
ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"="+color+"][/"+tag+"]" + ctrl.value.substr(pos);
setCaretPosition(ctrl, pos+tag.length+color.length+3);
} else {
ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"][/"+tag+"]" + ctrl.value.substr(pos);
setCaretPosition(ctrl, pos+2+tag.length);
}
}
function doGetCaretPosition (ctrl) {
var CaretPos = 0;
// IE Support
if (document.selection) {
ctrl.focus ();
var Sel = document.selection.createRange();
Sel.moveStart ('character', -ctrl.value.length);
CaretPos = Sel.text.length;
}
// Firefox support
else if (ctrl.selectionStart || ctrl.selectionStart == '0')
CaretPos = ctrl.selectionStart;
return (CaretPos);
}
function setCaretPosition(ctrl, pos)
{
if(ctrl.setSelectionRange)
{
ctrl.focus();
ctrl.setSelectionRange(pos,pos);
}
else if (ctrl.createTextRange) {
var range = ctrl.createTextRange();
range.collapse(true);
range.moveEnd('character', pos);
range.moveStart('character', pos);
range.select();
}
}
function getSelText()
{
var txt = '';
if (window.getSelection)
{
txt = window.getSelection();
}
else if (document.getSelection)
{
txt = document.getSelection();
}
else if (document.selection)
{
txt = document.selection.createRange().text;
}
else return;
return txt;
}
</script>
<script type="text/javaScript">
function testKeyCode(e)
{
if(e.altKey)
{
escape();
}
}
document.onkeydown = testKeyCode;
</script>Offline
#14 2011-11-06 09:46:14
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
Re: BBCode editing suite
LS97 wrote:
The improved version is done
Hardmath, remember not to use the font tag. It's been deprecated (see w3 for details)Code:
<style type="text/css"> button { background-color: #FC0; border: thin #F30 groove; height: 30px; padding: 4px 10px; margin-left: 0px; margin-right: 0px; font-family: "Courier New", Courier, monospace; } button:hover { background-color: #F93; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 24px; color: #06F; } textarea { background-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; color: black; cursor: auto; display: inline-block; font-family: 'Trebuchet MS', 'Luxi Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; height: 240px; letter-spacing: normal; line-height: normal; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; resize: both; text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre-wrap; width: 710px; word-spacing: 0px; word-wrap: break-word; } </style> <h1>BBCode Editor</h1> <div> <div style="font-family: trebuchet ms; background-color: #006FC9; font-size:12px; width: 740px; height: 24px; overflow:auto; border:1px solid blue;"><a href="#"><font color="#FFFFFF">Output (final result may vary)</font></a><div style="float:right"><font color="white">#1</font></div></div> <div style="float: left; width: 230px;"> </div> <div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 510px; overflow:auto; border:solid blue; float:left; border-width: 1px;"> <br> </div> </div> <div style="clear:both"> <br /> <button onclick="embed('b')"><strong>B</strong></button><button onclick="embed('i')"><em>I</em></button><button onclick="embed('u')"><span style="text-decoration: underline">U</span></button> <button onclick="pickColor()"><font color="red">C</font></button> <button onclick="embed('quote')">“ Q „</button><button onclick="embed('code')">Code</button> <button onclick="embed('url')"><span style="color: #03C; text-decoration: underline">URL</span></button><button onclick="embed('img')">Image <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Scratch_Cat.gif" height=15 widht = 15/></button> <button onclick="instructions()">?</button><button onclick="dcol=prompt('Type a default color:', 'blue')">S</button> <br /> <textarea id="bbc" onkeyup="render(event)" rows=20 cols=100></textarea></div> <script type="text/javascript"> var color = "red"; var dcol = "red"; var pos = 0; function escape() { pos=doGetCaretPosition(document.getElementById("bbc")); setCaretPosition(document.getElementById("bbc"),document.getElementById("bbc").value.indexOf("]", pos)+1) } function render(event) { if (event.altKey) {alert()} document.getElementById("txt").innerHTML = document.getElementById("bbc").value .replace(/</g, "<").replace(/>/g, ">") // Triangular brackets .replace(/\[b\](.*)\[\/b\]/g, "<b>$1</b>") // Bold .replace(/\[i\](.*)\[\/i\]/g, "<em>$1</em>") // Italics .replace(/\[u\](.*)\[\/u\]/g, "<span style=\"text-decoration: underline;\">$1</span>") // Underline .replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\">") // Simple Quote Beginning .replace(/\[quote=(.*)\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\"><strong>$1 wrote:</strong><br />") // Complex Quote Beginning .replace(/\[\/quote\]/g, "</blockquote>") // Quote End .replace(/\n/g, "<br>") // Line break .replace(/\[img\](.*)\[\/img\]/g, "<img src=\"$1\" />") // Images .replace(/\[code\]/g, "<blockquote style=\"overflow:scroll; font-family: Courier New; height:200px;width:400px;background-color:#F1F1F1; border-style: inset; border-width:2px;\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>") // Code Begin .replace(/\[\/code\]/g, "</blockquote>") // Code End .replace(/\[url=/g, "<a href=\"") .replace(/\[\/url\]/g, "</a>") .replace(/\[color=(.*)\](.*)\[\/color\]/g, "<span style=\"color: $1;\">$2</span>") + "<br><blockquote><p><i>Last edited by you, "+Date()+".</i></blockquote></p>"; if(document.getElementById("txt").innerHTML == "") { document.getElementById("txt").innerHTML = "<br />" } } function instructions() { alert("Welcome to BBReader! Here, you can type and watch BBCode, a markup language, get rendered in real time. Use the editools on top to format text by adding modifying tags around it, such as [b]txt[/b] for bold. Press alt to \'escape\' the current set of tags. You can edit settings with the \'S\' menu."); document.getElementById("bbc").focus(); } function pickColor() { color = prompt("Type a color\'s name. Gainsboro returns text invisible on normal posts areas, lavenderblush returns text invisible in quote boxes, and transparent returns text invisible in both but visible in Internet Explorer.", dcol); if (color == null) {return;} embed("color"); } function embed(tag) { var ctrl = document.getElementById("bbc"); pos=doGetCaretPosition(ctrl); if (tag == "url") { var ur = window.prompt("Insert target URL...", "http://"); var nm = window.prompt("Specify link label... (cancel to use URL)", ur.replace(/http\:\/\//g, "").replace(/\/(.*)/g, "")); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[url= + ur + ]" + nm + "[/url]" + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+2+tag.length); } else if (tag == "img") { var ur = window.prompt("Insert image URL...", "http://"); if (ur == null) {return;} ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "quote") { var nm = window.prompt("Who do you wish to quote? (Cancel for simple quote)", ""); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[quote]Contents[/quote] " + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[quote=" + nm + "]Contents[/quote] " + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "color") { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"="+color+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+2+tag.length); } } function doGetCaretPosition (ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange(); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); } function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } function getSelText() { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } else return; return txt; } </script> <script type="text/javaScript"> function testKeyCode(e) { if(e.altKey) { escape(); } } document.onkeydown = testKeyCode; </script>
...
It doesn't work. 
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#15 2011-11-06 14:16:33
Re: BBCode editing suite
Hardmath123 wrote:
LS97 wrote:
The improved version is done
Hardmath, remember not to use the font tag. It's been deprecated (see w3 for details)Code:
<style type="text/css"> button { background-color: #FC0; border: thin #F30 groove; height: 30px; padding: 4px 10px; margin-left: 0px; margin-right: 0px; font-family: "Courier New", Courier, monospace; } button:hover { background-color: #F93; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 24px; color: #06F; } textarea { background-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; color: black; cursor: auto; display: inline-block; font-family: 'Trebuchet MS', 'Luxi Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; height: 240px; letter-spacing: normal; line-height: normal; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; resize: both; text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre-wrap; width: 710px; word-spacing: 0px; word-wrap: break-word; } </style> <h1>BBCode Editor</h1> <div> <div style="font-family: trebuchet ms; background-color: #006FC9; font-size:12px; width: 740px; height: 24px; overflow:auto; border:1px solid blue;"><a href="#"><font color="#FFFFFF">Output (final result may vary)</font></a><div style="float:right"><font color="white">#1</font></div></div> <div style="float: left; width: 230px;"> </div> <div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 510px; overflow:auto; border:solid blue; float:left; border-width: 1px;"> <br> </div> </div> <div style="clear:both"> <br /> <button onclick="embed('b')"><strong>B</strong></button><button onclick="embed('i')"><em>I</em></button><button onclick="embed('u')"><span style="text-decoration: underline">U</span></button> <button onclick="pickColor()"><font color="red">C</font></button> <button onclick="embed('quote')">“ Q „</button><button onclick="embed('code')">Code</button> <button onclick="embed('url')"><span style="color: #03C; text-decoration: underline">URL</span></button><button onclick="embed('img')">Image <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Scratch_Cat.gif" height=15 widht = 15/></button> <button onclick="instructions()">?</button><button onclick="dcol=prompt('Type a default color:', 'blue')">S</button> <br /> <textarea id="bbc" onkeyup="render(event)" rows=20 cols=100></textarea></div> <script type="text/javascript"> var color = "red"; var dcol = "red"; var pos = 0; function escape() { pos=doGetCaretPosition(document.getElementById("bbc")); setCaretPosition(document.getElementById("bbc"),document.getElementById("bbc").value.indexOf("]", pos)+1) } function render(event) { if (event.altKey) {alert()} document.getElementById("txt").innerHTML = document.getElementById("bbc").value .replace(/</g, "<").replace(/>/g, ">") // Triangular brackets .replace(/\[b\](.*)\[\/b\]/g, "<b>$1</b>") // Bold .replace(/\[i\](.*)\[\/i\]/g, "<em>$1</em>") // Italics .replace(/\[u\](.*)\[\/u\]/g, "<span style=\"text-decoration: underline;\">$1</span>") // Underline .replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\">") // Simple Quote Beginning .replace(/\[quote=(.*)\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\"><strong>$1 wrote:</strong><br />") // Complex Quote Beginning .replace(/\[\/quote\]/g, "</blockquote>") // Quote End .replace(/\n/g, "<br>") // Line break .replace(/\[img\](.*)\[\/img\]/g, "<img src=\"$1\" />") // Images .replace(/\[code\]/g, "<blockquote style=\"overflow:scroll; font-family: Courier New; height:200px;width:400px;background-color:#F1F1F1; border-style: inset; border-width:2px;\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>") // Code Begin .replace(/\[\/code\]/g, "</blockquote>") // Code End .replace(/\[url=/g, "<a href=\"") .replace(/\[\/url\]/g, "</a>") .replace(/\[color=(.*)\](.*)\[\/color\]/g, "<span style=\"color: $1;\">$2</span>") + "<br><blockquote><p><i>Last edited by you, "+Date()+".</i></blockquote></p>"; if(document.getElementById("txt").innerHTML == "") { document.getElementById("txt").innerHTML = "<br />" } } function instructions() { alert("Welcome to BBReader! Here, you can type and watch BBCode, a markup language, get rendered in real time. Use the editools on top to format text by adding modifying tags around it, such as [b]txt[/b] for bold. Press alt to \'escape\' the current set of tags. You can edit settings with the \'S\' menu."); document.getElementById("bbc").focus(); } function pickColor() { color = prompt("Type a color\'s name. Gainsboro returns text invisible on normal posts areas, lavenderblush returns text invisible in quote boxes, and transparent returns text invisible in both but visible in Internet Explorer.", dcol); if (color == null) {return;} embed("color"); } function embed(tag) { var ctrl = document.getElementById("bbc"); pos=doGetCaretPosition(ctrl); if (tag == "url") { var ur = window.prompt("Insert target URL...", "http://"); var nm = window.prompt("Specify link label... (cancel to use URL)", ur.replace(/http\:\/\//g, "").replace(/\/(.*)/g, "")); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[url= + ur + ]" + nm + "[/url]" + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+2+tag.length); } else if (tag == "img") { var ur = window.prompt("Insert image URL...", "http://"); if (ur == null) {return;} ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "quote") { var nm = window.prompt("Who do you wish to quote? (Cancel for simple quote)", ""); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[quote]Contents[/quote] " + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[quote=" + nm + "]Contents[/quote] " + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "color") { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"="+color+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+2+tag.length); } } function doGetCaretPosition (ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange(); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); } function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } function getSelText() { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } else return; return txt; } </script> <script type="text/javaScript"> function testKeyCode(e) { if(e.altKey) { escape(); } } document.onkeydown = testKeyCode; </script>...
It doesn't work.
What doesn't? It works fine for me! Put it into an HTML file...
Offline
#16 2011-11-07 02:11:04
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
Re: BBCode editing suite
LS97 wrote:
Hardmath123 wrote:
LS97 wrote:
The improved version is done
Hardmath, remember not to use the font tag. It's been deprecated (see w3 for details)Code:
<style type="text/css"> button { background-color: #FC0; border: thin #F30 groove; height: 30px; padding: 4px 10px; margin-left: 0px; margin-right: 0px; font-family: "Courier New", Courier, monospace; } button:hover { background-color: #F93; } h1 { font-family: Verdana, Geneva, sans-serif; font-size: 24px; color: #06F; } textarea { background-color: white; border-bottom-style: solid; border-bottom-width: 1px; border-left-style: solid; border-left-width: 1px; border-right-style: solid; border-right-width: 1px; border-top-style: solid; border-top-width: 1px; color: black; cursor: auto; display: inline-block; font-family: 'Trebuchet MS', 'Luxi Sans', Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; height: 240px; letter-spacing: normal; line-height: normal; list-style-image: none; list-style-position: outside; list-style-type: none; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 2px; padding-left: 2px; padding-right: 2px; padding-top: 2px; resize: both; text-align: -webkit-auto; text-indent: 0px; text-shadow: none; text-transform: none; white-space: pre-wrap; width: 710px; word-spacing: 0px; word-wrap: break-word; } </style> <h1>BBCode Editor</h1> <div> <div style="font-family: trebuchet ms; background-color: #006FC9; font-size:12px; width: 740px; height: 24px; overflow:auto; border:1px solid blue;"><a href="#"><font color="#FFFFFF">Output (final result may vary)</font></a><div style="float:right"><font color="white">#1</font></div></div> <div style="float: left; width: 230px;"> </div> <div id="txt" style="font-family: trebuchet ms; background-color: gainsboro; font-size:12px; width: 510px; overflow:auto; border:solid blue; float:left; border-width: 1px;"> <br> </div> </div> <div style="clear:both"> <br /> <button onclick="embed('b')"><strong>B</strong></button><button onclick="embed('i')"><em>I</em></button><button onclick="embed('u')"><span style="text-decoration: underline">U</span></button> <button onclick="pickColor()"><font color="red">C</font></button> <button onclick="embed('quote')">“ Q „</button><button onclick="embed('code')">Code</button> <button onclick="embed('url')"><span style="color: #03C; text-decoration: underline">URL</span></button><button onclick="embed('img')">Image <img src="http://upload.wikimedia.org/wikipedia/commons/3/3a/Scratch_Cat.gif" height=15 widht = 15/></button> <button onclick="instructions()">?</button><button onclick="dcol=prompt('Type a default color:', 'blue')">S</button> <br /> <textarea id="bbc" onkeyup="render(event)" rows=20 cols=100></textarea></div> <script type="text/javascript"> var color = "red"; var dcol = "red"; var pos = 0; function escape() { pos=doGetCaretPosition(document.getElementById("bbc")); setCaretPosition(document.getElementById("bbc"),document.getElementById("bbc").value.indexOf("]", pos)+1) } function render(event) { if (event.altKey) {alert()} document.getElementById("txt").innerHTML = document.getElementById("bbc").value .replace(/</g, "<").replace(/>/g, ">") // Triangular brackets .replace(/\[b\](.*)\[\/b\]/g, "<b>$1</b>") // Bold .replace(/\[i\](.*)\[\/i\]/g, "<em>$1</em>") // Italics .replace(/\[u\](.*)\[\/u\]/g, "<span style=\"text-decoration: underline;\">$1</span>") // Underline .replace(/\[quote\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\">") // Simple Quote Beginning .replace(/\[quote=(.*)\]/g, "<blockquote style=\"background-color:#F1F1F1; border-style: inset; border-width: 2px;\"><strong>$1 wrote:</strong><br />") // Complex Quote Beginning .replace(/\[\/quote\]/g, "</blockquote>") // Quote End .replace(/\n/g, "<br>") // Line break .replace(/\[img\](.*)\[\/img\]/g, "<img src=\"$1\" />") // Images .replace(/\[code\]/g, "<blockquote style=\"overflow:scroll; font-family: Courier New; height:200px;width:400px;background-color:#F1F1F1; border-style: inset; border-width:2px;\"><div style=\"font-family:trebuchet ms\"><b>Code:</b></div>") // Code Begin .replace(/\[\/code\]/g, "</blockquote>") // Code End .replace(/\[url=/g, "<a href=\"") .replace(/\[\/url\]/g, "</a>") .replace(/\[color=(.*)\](.*)\[\/color\]/g, "<span style=\"color: $1;\">$2</span>") + "<br><blockquote><p><i>Last edited by you, "+Date()+".</i></blockquote></p>"; if(document.getElementById("txt").innerHTML == "") { document.getElementById("txt").innerHTML = "<br />" } } function instructions() { alert("Welcome to BBReader! Here, you can type and watch BBCode, a markup language, get rendered in real time. Use the editools on top to format text by adding modifying tags around it, such as [b]txt[/b] for bold. Press alt to \'escape\' the current set of tags. You can edit settings with the \'S\' menu."); document.getElementById("bbc").focus(); } function pickColor() { color = prompt("Type a color\'s name. Gainsboro returns text invisible on normal posts areas, lavenderblush returns text invisible in quote boxes, and transparent returns text invisible in both but visible in Internet Explorer.", dcol); if (color == null) {return;} embed("color"); } function embed(tag) { var ctrl = document.getElementById("bbc"); pos=doGetCaretPosition(ctrl); if (tag == "url") { var ur = window.prompt("Insert target URL...", "http://"); var nm = window.prompt("Specify link label... (cancel to use URL)", ur.replace(/http\:\/\//g, "").replace(/\/(.*)/g, "")); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[url= + ur + ]" + nm + "[/url]" + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+2+tag.length); } else if (tag == "img") { var ur = window.prompt("Insert image URL...", "http://"); if (ur == null) {return;} ctrl.value = ctrl.value.substr(0,pos) + "[url]" + ur + "[/url]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "quote") { var nm = window.prompt("Who do you wish to quote? (Cancel for simple quote)", ""); if(nm == null) { ctrl.value = ctrl.value.substr(0,pos) + "[quote]Contents[/quote] " + ctrl.value.substr(pos); } else { ctrl.value = ctrl.value.substr(0,pos) + "[quote=" + nm + "]Contents[/quote] " + ctrl.value.substr(pos); } setCaretPosition(ctrl, pos+tag.length+color.length+3); } else if (tag == "color") { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"="+color+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+tag.length+color.length+3); } else { ctrl.value = ctrl.value.substr(0,pos) + "["+tag+"][/"+tag+"]" + ctrl.value.substr(pos); setCaretPosition(ctrl, pos+2+tag.length); } } function doGetCaretPosition (ctrl) { var CaretPos = 0; // IE Support if (document.selection) { ctrl.focus (); var Sel = document.selection.createRange(); Sel.moveStart ('character', -ctrl.value.length); CaretPos = Sel.text.length; } // Firefox support else if (ctrl.selectionStart || ctrl.selectionStart == '0') CaretPos = ctrl.selectionStart; return (CaretPos); } function setCaretPosition(ctrl, pos) { if(ctrl.setSelectionRange) { ctrl.focus(); ctrl.setSelectionRange(pos,pos); } else if (ctrl.createTextRange) { var range = ctrl.createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } function getSelText() { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } else return; return txt; } </script> <script type="text/javaScript"> function testKeyCode(e) { if(e.altKey) { escape(); } } document.onkeydown = testKeyCode; </script>...
It doesn't work.What doesn't? It works fine for me! Put it into an HTML file...
I did. Then I typed in the textarea. Nothing happened.
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#18 2011-11-07 02:44:35
- Hardmath123
- Scratcher
- Registered: 2010-02-19
- Posts: 1000+
Re: BBCode editing suite
ssss wrote:
The
Code:
tag doesn't display bbcode ^.^
I know. Shhhh!
Hardmaths-MacBook-Pro:~ Hardmath$ sudo make $(whoami) a sandwich
Offline
#20 2011-11-07 15:37:42
Re: BBCode editing suite
Hardmath123 wrote:
LS97 wrote:
Hardmath123 wrote:
...
It doesn't work.What doesn't? It works fine for me! Put it into an HTML file...
I did. Then I typed in the textarea. Nothing happened.
What browser are you using? I use chrome and it works great. I also tested it in IE.
Offline