WYSIWYG Bold effect on a DIV, Span etc.


/ Published in: JavaScript

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.


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.