Question

Ok. I have an editable div into which I can enter some text. However after entering I have 3 buttons: black, yellow and green.

What I want to be ble to do is to then click ie button “black” and then click each of the word which I have typed into the editable area. After clicking a word, that clicked word should have a div class=’black’ wrapped around it?

Also if the same word is clicked again I need to remove the wrapped div (so I can chamge the colour of the word,if I whish to do so?).

Furthermore I want the div to be deleted if I delete any words wrapped with a div.

Any help is appreciated?

Thanks in advance.

Answer 1

Are you using jQuery? You need something like that:

function prepareDivContainer()
{
  // remove extra spaces
  var str = $("#editableDiv").text().replace(/[\s]+/g, ' ');

  // split the string by space into words
  var words = str.split(' ');

  // clear the content of the editable div
  $("#editableDiv").text('');

  // insert each word wrapped with a div
  for (var i = 0; i < words.length; i++)
  {
    $("#editableDiv").append('<div id="word'+i+'">'+words[i]+'</div>');
  }
}

This function you call after the user has finished inserting text into the div. It will wrap all word into div.

So, now you can made these divs (words) clickable by binding to the click-event:

$(document).ready(function () {
  $("#editableDiv div").live("click", function(){
    // do something with the clicked word (div), e.g. add or remove css classes
    // look here: http://api.jquery.com/category/css/
  });
});