Exec Command in a ContentEditable div

Question

I was trying to create a WYSIWYG editor using a contenteditable div. I was trying to bold the selected text using the ExecCommand.This does not seem to work properly . I have tested in IE.Here is the code.Please help me identifying the error if any in the program.

<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"  
     type="text/javascript"></script>                 
    <style>
    #rteToolBar span{
     cursor:pointer;
     }
   #rteToolBar span:hover{
     background:#3535ff;
     }
 </style>
</head>

 <div id="rteWrapper"  >
   <div id="rteToolBar" style="border: thin solid black">
     <span role="BOLD" >B</span>
 <span role="ITAL">I</span>
 <span role="TABL">Table</span>  
   </div>
  <div id="rte" contentEditable="true" style="border: thin solid red">
     asdfla sdf asdf asdfas
 fas <b>fasldf</b> asfdsadf<br/>
 asdfla sdf asdf asdfas
 fas fasldf asfdsadf
</div>

var range,rte,caretoffset;
    $(document).ready(function(){
   var rteWrapper = $('#rteWrapper');
   var toolBar = $('#rteToolBar');
       rte = $('#rte');
   $(toolBar).find('span').live('click',function(){
       rte.focus();
       var _this = $(this);
       var role = _this.attr('role');

            switch(role){
          case 'BOLD': 
          var range1 = document.selection.createRange();

         range1.execCommand('bold',false,null);
          break;
          case 'ITAL': 
          break;

          }

    });
     });



 </script>

score 2 · Answer 1 · edited May 23 '17 at 12:22

2

In IE, clicking a span destroys the existing selection. By the time the click event fires, the selection is gone.

An IE-specific workaround is to make your spans unselectable. You can do this by adding the unselectable attribute to each:

 <span role="ITAL" unselectable="on">I</span>

Another possibility is to use the mousedown event instead, but then your selection will still end up being destroyed after running your command.

Finally, there is no need to create a TextRange and call its execCommand() method. You can call document.execCommand() instead. This shortens the code and makes it compatible with all major browsers, not just IE:

document.execCommand('bold', false, null);

edited May 23 '17 at 12:22

Community

1
1

answered Mar 14 '13 at 09:21

Tim Down

318,141
75
454
536

Thanks a lot Tim.However i find the whole word is being bold even if i select part of the word.One more issue is that i run this on IE, but expect for bold i am not able to get other command Identifiers like 'IDM_CUT' of execCommand to get to work.Is there any particular reason for this? – Dushyanth Mar 14 '13 at 10:59
`IDM_CUT` is not exposed to the JavaScript interface. There is a `Cut` command instead, but that won't work in many browsers (including some flavours/configurations of IE, I think) because of security concerns. MSDN page: http://msdn.microsoft.com/en-us/library/hh801227%28v=vs.85%29.aspx. As for the whole word being bolded, I've never seen that before. Have you got an example page? – Tim Down Mar 14 '13 at 11:06
Hi Tim here is the code http://jsfiddle.net/dushyanth/PrrRE/4/ . One more question i have is that i am able to insert table at caret postion but the problem is that i am not able to go the the next line after the table.I mean after the table is inserted and user wants to write some thing below the table, the cursor wont go there.It is always residing in the last 'td' of the table. – Dushyanth Mar 15 '13 at 06:21
var range = getFirstRange(); var el = document.createElement("div"); var tableHtml = '
table text table text
table text table text
'; $(el).html(tableHtml); range.insertNode(el); rangy.getSelection().setSingleRange(range); I was using rangy selection library.getFirstRage() gets the range. – Dushyanth Mar 15 '13 at 06:26
@user1355464: http://jsfiddle.net/PrrRE/7/. Only the selected text is bolded, not the whole word. – Tim Down Mar 18 '13 at 16:56

table text	table text
table text	table text

Exec Command in a ContentEditable div

1 Answers1