advanced code snippet search

Posted By

aamirrajpoot on 01/03/11


Tagged

wysiwyg


Versions (?)

WYSIWYG Bold effect on a DIV, Span etc.

 / Published in: JavaScript
 

Create a div with 'newsbulletindiv' as ID and add css as you like, add Bold button infront of it using float (or what ever where ever)

Add toggleSelectionBold on that button.

Now select a part of text within the DIV and click bold. It will bold it, again select the same bold text and click bold button and it will un-bold the selection.

Cheers.

Expand | Embed | Plain Text 
  1. function toggleSelectionBold() {
  2.                 var range, sel;
  3.  
  4.                 if (window.getSelection) {
  5.  
  6.                     // Non-IE case
  7.                     sel = window.getSelection();
  8.                     if (sel.getRangeAt) {
  9.                         range = sel.getRangeAt(0);
  10.                     }
  11.                     $('#news_bulletin_div').attr('contenteditable', 'true');
  12.                     if (range) {
  13.                         sel.removeAllRanges();
  14.                         sel.addRange(range);
  15.                     }
  16.                     document.execCommand("bold", null, false);
  17.                     $('#news_bulletin_div').attr('contenteditable', 'false');
  18.                 } else if (document.selection && document.selection.createRange && document.selection.type != "None") {
  19.                     // IE case
  20.                     range = document.selection.createRange();
  21.                     range.execCommand("bold", null, false);
  22.                 }
  23.  
  24.             }

Report this snippet  

You need to login to post a comment.