Jump to content

BBcode +html editor


bob_the _builder

Recommended Posts

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]
Link to comment
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 ;)
Link to comment
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
Link to comment
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
Link to comment
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
Link to comment
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!
Link to comment
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
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.