Advanced Search

WYSIWYG Bold effect on a DIV, Span etc.

/ Published in: JavaScript
Save to your folder(s)
Create a div with 'news_bulletin_div' 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

Copy this code and paste it in your HTML 
  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


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.