Jump to content


Photo

BBcode +html editor


  • Please log in to reply
11 replies to this topic

#1 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 12:49 AM

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



#2 tomfmason

tomfmason
  • Staff Alumni
  • Advanced Member
  • 1,696 posts
  • Locationstealing your wifi

Posted 21 September 2006 - 12:53 AM

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

Traveling East in search of instruction, and West to propagate the knowledge I have had gained.

current projects: pokersource

My Blog | My Pastebin | PHP Validation class | Backtrack linux


#3 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 01:06 AM

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

#4 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 01:33 AM

this short script works in firefox, but you'll have to really search to figure out IE. it's a mess:
<!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>

You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#5 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 01:57 AM

Hi,

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

#6 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 02:03 AM

Hi,

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


that's where google comes in. we're here to help steer you in the right direction, not solve all the nuances for you ;)
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#7 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 02:11 AM

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

#8 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 02:44 AM

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


i totally understand. check out this snippet for some IE help. combine this with what i gave you above for FF, and you may be well on your way
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#9 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 05:23 AM

Thanks for that,

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

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

Now just similar code to input smilies ..

:)
:(
etc ..

Thanks

#10 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 21 September 2006 - 12:20 PM

The following does smileys as well .. Could prolly be cleaned up into nicer 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>


Thanks

#11 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 21 September 2006 - 12:37 PM

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

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

long script, i know, but basically, it does a hardy browser detection as found in quirksmode and follows up with the appropriate type of selection handling.

good luck!
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#12 bob_the _builder

bob_the _builder
  • Members
  • PipPipPip
  • Advanced Member
  • 207 posts

Posted 22 September 2006 - 12:21 PM

Hi,

This seems to work in FF:

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



Does that seem like pluasable code?


Thanks




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users