BBcode +html editor

bob_the _builder · September 21, 2006

Hi,

Would anyone have or beable to help create some code for adding basic BBcode to text areas like when you post a topic or reply here.

All I am after is the basics

Bold, Italic, underline, maybe hr and a couple of smilies.

So when you highlight the word and click the button, have it add the tags either side of the text.

Thanks

tomfmason · September 21, 2006

Here is a decent tutorial for just that. http://www.phpfreaks.com/tutorials/123/0.php
Now I think that you will need a javascript function to add the bbcode to ether side of the highlighted text.

bob_the _builder · September 21, 2006

Hi,

I have code to replace html to bbcode, but looking more for how you can select some text ans surround it with the bb tags ...

Thanks

obsidian · September 21, 2006

this short script works in firefox, but you'll have to really search to figure out IE. it's a mess:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
thisForm = document.myForm;
}

function doReplace(txtarea){
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
alert("Start = " + start + " and End = " + end);
var sl = (txtarea.value).substring(start, end);
var before = (txtarea.value).substring(0,start);
var after = (txtarea.value).substring(end);
txtarea.value = before + '[b]' + sl + '[/b]' + after;
}
</script>
</head>

<body>
<form name="myForm">
<textarea cols="60" rows="8" name="myText">Hey, everyone, this is going to be great!
Just click on the link below, and you'll see BBCode bold tags appear around any
selected text within this textarea. Sorry it doesn't work in IE, though.</textarea><br />
<a href="#" onclick="doReplace(thisForm.myText);">Do bold!</a>
</form>
</body>
</html>
[/code]

bob_the _builder · September 21, 2006

Hi,

thanks for the snippet .. something with better browser compatibility would be better.

obsidian · September 21, 2006

[quote author=bob_the _builder link=topic=108869.msg438457#msg438457 date=1158803831]
Hi,

thanks for the snippet .. something with better browser compatibility would be better.
[/quote]

that's where google comes in. we're here to help steer you in the right direction, not solve all the nuances for you ;)

bob_the _builder · September 21, 2006

I have googled and come across a few lots of code, most to complex or that only add tag to one side then you have to hit the button for the closing tag.

Not after free code .. just a direction or snippet that I can work on.

Thanks

obsidian · September 21, 2006

[quote author=bob_the _builder link=topic=108869.msg438461#msg438461 date=1158804661]
I have googled and come across a few lots of code, most to complex or that only add tag to one side then you have to hit the button for the closing tag.

Not after free code .. just a direction or snippet that I can work on.

Thanks
[/quote]

i totally understand. check out [url=http://lists.evolt.org/archive/Week-of-Mon-20020520/113244.html]this snippet[/url] for some IE help. combine this with what i gave you above for FF, and you may be well on your way

bob_the _builder · September 21, 2006

Thanks for that,

This seems to work, dunno what the browser compatibility like, I only have ie atm:

[code=php:0]<scrip type="text/javascript">

</script>

<a href="javascript:smilie(':p')">
<form name="form" action="page.php" method="post">
<textarea name="description"></textarea><br />
<input type="button" value="bold" onclick="formatText ('b');" />
<input type="button" value="italic" onclick="formatText ('i');" />
<input type="button" value="underline" onclick="formatText ('u');" />
<input name="submit" type="submit" value="Submit" />
</form>[/code]

Now just similar code to input smilies ..

:)
:(
etc ..

Thanks

bob_the _builder · September 21, 2006

The following does smileys as well .. Could prolly be cleaned up into nicer code?

[code]<scrip type="text/javascript">

</script>[/code]

Thanks

obsidian · September 21, 2006

apparently, document.selection is ONLY for IE, so you'd probably need to use both in a similar manner to this:
[code]

<script type="text/javascript">
window.onload = function() {
thisForm = document.myForm;
}

var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};
BrowserDetect.init();

function doReplace(txtarea){
if (BrowserDetect.browser == 'Explorer') {
var selectedText = document.selection.createRange().text;
if (selectedText != "") {
var newText = "[b]" + selectedText + "[/b]";
document.selection.createRange().text = newText;
}
} else {
var start = txtarea.selectionStart;
var end = txtarea.selectionEnd;
var sl = (txtarea.value).substring(start, end);
var before = (txtarea.value).substring(0,start);
var after = (txtarea.value).substring(end);
txtarea.value = before + '[b]' + sl + '[/b]' + after;
}
}
</script>

<form name="myForm">
<textarea cols="60" rows="8" name="myText">Hey, everyone, this is going to be great!
Just click on the link below, and you'll see BBCode bold tags appear around any
selected text within this textarea. Sorry it doesn't work in IE, though.</textarea><br />
<a href="#" onclick="doReplace(thisForm.myText);">Do bold!</a>
</form>
[/code]

long script, i know, but basically, it does a hardy browser detection as found in [url=http://www.quirksmode.org/js/detect.html]quirksmode[/url] and follows up with the appropriate type of selection handling.

good luck!

bob_the _builder · September 22, 2006

Hi,

This seems to work in FF:

[code=php:0]<scrip type='text/javascript'>

</scrip>

<img onClick="bbcode(':D')" src='../images/smileys/biggrin.gif' border="0" />
<img onClick="bbcode(':blink:')" src='../images/smileys/blink.gif' border="0" />
<img onClick="bbcode('B)')" src='../images/smileys/cool.gif' border="0" />
<img onClick="bbcode(':huh:')" src='../images/smileys/huh.gif' border="0" />
<img onClick="bbcode(':lol:')" src='../images/smileys/laugh.gif' border="0" />
<img onClick="bbcode(':angry:')" src='../images/smileys/mad.gif' border="0" />
<img onClick="bbcode(':mellow:')" src='../images/smileys/mellow.gif' border="0" />
<br />
<img onClick="bbcode(':o')" src='../images/smileys/ohmy.gif' border="0" />
<img onClick="bbcode(':rolleyes:')" src='../images/smileys/rolleyes.gif' border="0" />
<img onClick="bbcode(':(')" src='../images/smileys/sad.gif' border="0" />
<img onClick="bbcode(':)')" src='../images/smileys/smile.gif' border="0" />
<img onClick="bbcode(':P')" src='../images/smileys/tongue.gif' border="0" />
<img onClick="bbcode(':unsure:')" src='../images/smileys/unsure.gif' border="0" />
<img onClick="bbcode(';)')" src='../images/smileys/wink.gif' border="0" />
<br /><br />
<input type="button" value="Bold" onclick="bbcode('[b]', '[/b]')" />
<input type="button" value="Italic" onclick="bbcode('[i]', '[/i]')" />
<input type="button" value="Underline" onclick="bbcode('[u]', '[/u]')" />

<form name="form" action="../page.php" method="post">
<textarea name="description" cols="25" rows="5"></textarea><br />
<input name="submit" type="submit" value="submit">
</form> [/code]

Does that seem like pluasable code?

Thanks

Sign In

BBcode +html editor

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information