Forum Moderators: open
I was advised to look at phpBB and see how they did it... well im ok with PHP but javascript isnt my area of expertise and i dont have much patience with it.
So can someone reply to the below quoted post?
I would appreciate it
cheers
chris
HelloI have a written bbcode function if you like, one thing i would like to do is create images/text links that will insert certain strings into the textarea.
for example things like [ b ][ /b ] etc etc and when it does insert this bbcode it also highlights it in the textarea if possible, oh and it must insert it into the text area where the cursor currently sits.
I'm not sure if this is in the righr section but I know all the people in this forum (PHP) are clued up and might know the answer rather simple HTML types (no offence - lol)
can anyone tell me how to do this wonderful action? I suspect javascript but maybe its doable with php, or maybe just HTML, anyone care to help?
Chris
Note, I made use of the Yahoo UI Library for some of the event handling and Dom handling. Also note, I did not include the "buttons" as part of the content since they are JavaScript dependant. Instead, I created the buttons with JavaScript and appended them into my content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset:utf-8">
<!-- reset-fonts-grids provides a nice cross browser starting point -->
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.2.1/build/reset-fonts-grids/reset-fonts-grids.css">
<style type="text/css">
#toolbar a { color: #000; background-color: #dfdfdf; }
</style>
<title>Form Tools</title>
<!-- yahoo-dom-event gives us a lot of DOM and Event handling capabilities -->
<script type="text/javascript" src="http://yui.yahooapis.com/2.2.1/build/yahoo-dom-event/yahoo-dom-event.js" ></script>
<script type="text/javascript">
/**
* The "this" pointer refers to our textarea
* @param {Event} e The event that triggered this method
*/
function boldText(e) {
var str = this.value;
var start = this.selectionStart ¦¦ this.value.length; // IE don't got selectionStart
var end = this.selectionEnd ¦¦ this.value.length; // IE don't got selectionEnd
var boldText = '{b}' + str.slice( start, end ) + '{/b}';
str = str.substr(0,start) + boldText + str.substr(end);
this.value = str;
this.focus();
if( this.selectionStart ) this.selectionStart = start + 3; // IE don't got it
if( this.selectionEnd ) this.selectionEnd = end + 3; // IE don't got it
YAHOO.util.Event.stopEvent(e);
}
/**
* The "this" pointer refers to our textarea
* @param {Event} e The event that triggered this method
*/
function italicText(e) {
var str = this.value;
var start = this.selectionStart ¦¦ this.value.length; // IE don't got selectionStart
var end = this.selectionEnd ¦¦ this.value.length; // IE don't got selectionEnd
var italText = '{i}' + str.slice( start, end ) + '{/i}';
str = str.substr(0,start) + italText + str.substr(end);
this.value = str;
this.focus();
if( this.selectionStart ) this.selectionStart = start + 3; // IE don't got it
if( this.selectionEnd ) this.selectionEnd = end + 3; // IE don't got it
YAHOO.util.Event.stopEvent(e);
}
// This runs when our window has finished loading. This creates the toolbar.
YAHOO.util.Event.on(window,'load',function () {
// YUI Shortcuts
var $E = YAHOO.util.Event;
var $D = YAHOO.util.Dom;
// The textarea
var textarea1 = document.getElementById('textarea1');
// The parent that we'll append the toolbar to
var toolbarParent = textarea1.parentNode;
// Create the toolbar and it's buttons
var toolbar, slot, btn;
toolbar = document.createElement('ul');
toolbar.setAttribute('id','toolbar');
$D.setStyle( toolbar, 'list-style', 'none' );
$D.setStyle( toolbar, 'padding', '1em' );
// Create the first slot on the toolbar
slot = document.createElement('li');
$D.setStyle( slot, 'display', 'inline' );
$D.setStyle( slot, 'margin', '.2em' );
// Create the BOLD button for this slot
btn = document.createElement('a');
btn.href = '#Bold';
btn.title = 'Bold';
btn.appendChild(document.createTextNode('b'));
$D.setStyle( btn, 'font-weight', 700 );
$D.setStyle( btn, 'border', '1px solid black' );
$D.setStyle( btn, 'padding', '.5em' );
$E.on( btn, 'click', boldText, textarea1, true);
slot.appendChild(btn);
toolbar.appendChild(slot);
// Create the next slot on the toolbar
slot = document.createElement('li');
$D.setStyle( slot, 'display', 'inline' );
$D.setStyle( slot, 'margin', '.2em' );
// Create the ITALIC button for this slot
btn = document.createElement('a');
btn.href = '#Italic';
btn.title = 'Italic';
btn.appendChild(document.createTextNode('i'));
$D.setStyle( btn, 'font-style', 'italic' );
$D.setStyle( btn, 'border', '1px solid black' );
$D.setStyle( btn, 'padding', '.5em' );
$E.on( btn, 'click', italicText, textarea1, true);
slot.appendChild(btn);
toolbar.appendChild(slot);
toolbarParent.insertBefore( toolbar, textarea1 );
});
</script>
</head>
<body>
<form action="">
<div class="formContents">
<textarea rows="15" cols="60" name="textarea1" id="textarea1"></textarea>
</div>
</form>
</body>
</html>
NOTE: be sure to replace ¦¦ with the real pipe character
[edited by: Fotiman at 9:24 pm (utc) on April 10, 2007]
For the record, HTML is not coding as such, it's really no more than markers on a page. JS in the only way to go if you want anything to happen on your page.
