jQuery WYSIWYG Rich Text bbcode editor

Hi there,

I’d like to build my own WYSIWYG/BBCode editor for a CMS project I’m working on.

I need three main functions:

  1. Format text (Bold, Italic, Underline);
  2. Align text (Left, Centre, Right);
  3. Insert Image (From a list of uploaded images stored in a MySQL database)

I have already written the BBCode controller in PHP, and so I just have to make the buttons that will add the bbcode when you click on them.

The add image button I’m not sure about yet. I guess I could run a sql query on login of the contents of the database table, and store an array of image urls and thumbnails into a session, then have a ‘pop-up’ display the list of images you can choose from.

Anyway, first thing’s first. I need to be able to add the bbcode around text highlighted by the user, exactly like I am able to do with this handy SitePoint WYSIWYG editor I am using right now. So I need to grab the highlighted text with jQuery and then I can append the ‘[,b]’ and ‘[/b]’ round it.

Does anyone have any idea how I can do that?

Ok, thanks in advance.

Mike

Ok, so following this link on the net which i got from here, I found this snippet:


$(document).ready(function(){
  $('#button').click(function(wrapAsLink){
    var textarea = document.getElementById('wysiwyg');
	var length = textarea.value.length;
	var start = textarea.selectionStart;
	var end = textarea.selectionEnd;
	var sel = textarea.value.substring(start, end);
	var replace = '<a href="'+url+'">'+sel+'</a>';
	textarea.value = textarea.value.substring(0, start) + replace + textarea.value.substring(end, len);
  });
});

Now the way the guy does it on the link is like this:


function wrapAsLink(url){

As line 1, which I’m guessing is a Javascript standard to call a function.

So now, in my version i get the error message:
‘url’ not defined.

Which I can understand, i mean, I haven’t defined that variable. But how do !? var url needs to be the selection… I feel like I’m chasing my tale… :goof:

Many thanks,
Mike

Ok, here’s my amended (working) code:


$(document).ready(function(){
  $('#bold').click(function(){
    var textarea = document.getElementById('wysiwyg');
	var length = textarea.value.length;
	var start = textarea.selectionStart;
	var end = textarea.selectionEnd;
	var selection = textarea.value.substring(start, end);
	var replace = '[*b]'+selection+'[/b]';
	textarea.value = textarea.value.substring(0, start) + replace + textarea.value.substring(end, length);
  });
});

Which works fine, but for one thing… When I click on my bold button, I lose focus on the textarea. So I added the line:


textarea.focus();

Which kinda works, but will put the cursor at the start of the textarea if nothing was selected in the first place, or will highlight the originally selected area of the selection. So say the selection is the first 8 characters of the textarea, after the string is replaced the first 8 characters will be selected, which will include the first bbcode tag, which is 3 characters, then five characters of the selection.

What I want to happen is, if the selection is empty, then after inserting the bbcode tags, the cursor is inbetween them, so the text which is to be bold can be added straight away. Or, if the selection contains text, I want the cursor to appear after the last bbcode tag, so the user can continue typing from where they left off.

Any help would be great.

Many thanks,
Mike

Ok, well, I’ll keep posting my progress in case it helps anyone else out.

I’ve decided to leave the cursor issue along for the time being, and instead focus on the insert image issue.

So I want to retrieve a table of data from a mysql database, so the user can select the image they want to insert from that. ie, they can ONLY insert images that have already been uploaded to the uploads folder.

I used the example from the w3schools website:
http://www.w3schools.com/PHP/php_ajax_database.asp

An this is where I’m at, once the page is loaded, the table of results from the sql query will be displayed. My intention is to hide this div and then display it when the user clicks on the add image button.

Here’s the javascript:


function showImages()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("images").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","uploaddata.php",true);
xmlhttp.send();
}

showImages();

and the PHP script:


include 'includes/db.inc.php';

$sql="SELECT * FROM uploads";

$result = mysqli_query($link, $sql);

echo '<table id="uploads">';

while($row = mysqli_fetch_array($result))
  {
  echo "<tr>";
  echo '<td><img src="images/uploads/' . $row['thumbname'] . '"/></td>';
  echo "<td>" . $row['filename'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

I’m not sure if bumping my post like this is entirely in keeping with the rules of this forum, but I guess I’ll keep at it until someone tells me to stop.

Cheers,
Mike