Jump to content

Archived

This topic is now archived and is closed to further replies.

bob_the _builder

BBcode +html editor

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
[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 ;)

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
[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

Share this post


Link to post
Share on other sites
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">
<!--
    function formatText (tag) {
        var selectedText = document.selection.createRange().text;
       
        if (selectedText != "") {
            var newText = "[" + tag + "]" + selectedText + "[/" + tag + "]";
            document.selection.createRange().text = newText;
        }
    }
//-->
</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

Share this post


Link to post
Share on other sites
The following does smileys as well .. Could prolly be cleaned up into nicer code?

[code]<scrip type="text/javascript">
<!--
function formatText (tag) {
var selectedText = document.selection.createRange().text;
if (selectedText != "") {
var newText = "[" + tag + "]" + selectedText + "[/" + tag + "]";
document.selection.createRange().text = newText;
}
}

function smiley(tag)
{
var selectedSmiley = document.form.description.value;
this.tag = tag;
document.form.description.value = selectedSmiley + "" + tag + "";
document.form.description.focus();
}
//-->
</script>[/code]


Thanks

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites
Hi,

This seems to work in FF:

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

function bbcode(open, end){
var tArea = document.form.description;
var isIE = (document.all)? true : false;
var open = (open)? open : "";
var end = (end)? end : "";

if(isIE){
tArea.focus();
var curSelect = document.selection.createRange();
if(arguments[2]){
curSelect.text = open + arguments[2] + "]" + curSelect.text + end;
}else{
curSelect.text = open + curSelect.text + end;
}
}else if(!isIE && typeof tArea.selectionStart != "undefined"){
var selStart = tArea.value.substr(0, tArea.selectionStart);
var selEnd = tArea.value.substr(tArea.selectionEnd, tArea.value.length);
var curSelection = tArea.value.replace(selStart, '').replace(selEnd, '');
if(arguments[2]){
tArea.value = selStart + open + arguments[2] + "]" + curSelection + end + selEnd;
}else{
tArea.value = selStart + open + curSelection + end + selEnd;
}
}else{
tArea.value += (arguments[2])? open + arguments[2] + "]" + end : open + end;
}
}

//-->
</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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.