set execcommand just for a div

Question

it has any way for bind execcommand with a div element not for whole document , i try this :

document.getElementById('div').execcommand(...)

but it has an error :

execcommand is not a function

it has any way for bind the execcommand with just div element not whole document !! i don't like use iframe method .

When do you want the command to trigger? When the div is clicked? — Pekka, Mar 05 '11 at 17:43
Binding a command to an element doesn't make sense. What do you want to happen exactly? — Pekka, Mar 05 '11 at 17:47
ok , i forget to tell you that the div is contenteditable , and i want to set it a wysiwyg , so if we do for example justifycenter command is set for a whole document and occur an error , so i want to set it just for the contenteditable div . — mkotwd, Mar 05 '11 at 17:52

score 21 · Accepted Answer · answered Mar 06 '11 at 12:07

This is easier to do in IE than other browsers because IE's TextRange objects have an execCommand() method, meaning that a command can be executed on a section of the document without needing to change the selection and temporarily enable designMode (which is what you have to do in other browsers). Here's a function to do what you want cleanly:

function execCommandOnElement(el, commandName, value) {
    if (typeof value == "undefined") {
        value = null;
    }

    if (typeof window.getSelection != "undefined") {
        // Non-IE case
        var sel = window.getSelection();

        // Save the current selection
        var savedRanges = [];
        for (var i = 0, len = sel.rangeCount; i < len; ++i) {
            savedRanges[i] = sel.getRangeAt(i).cloneRange();
        }

        // Temporarily enable designMode so that
        // document.execCommand() will work
        document.designMode = "on";

        // Select the element's content
        sel = window.getSelection();
        var range = document.createRange();
        range.selectNodeContents(el);
        sel.removeAllRanges();
        sel.addRange(range);

        // Execute the command
        document.execCommand(commandName, false, value);

        // Disable designMode
        document.designMode = "off";

        // Restore the previous selection
        sel = window.getSelection();
        sel.removeAllRanges();
        for (var i = 0, len = savedRanges.length; i < len; ++i) {
            sel.addRange(savedRanges[i]);
        }
    } else if (typeof document.body.createTextRange != "undefined") {
        // IE case
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.execCommand(commandName, false, value);
    }
}

Examples:

var testDiv = document.getElementById("test");
execCommandOnElement(testDiv, "Bold");
execCommandOnElement(testDiv, "ForeColor", "red");

@TimDown in firefox the command still executed on all document, I was trying to execute 'undo' on a specific div and when it finish with that div it continue to the other divs (it's not limited to the div I applied to) — medBouzid, Feb 26 '16 at 10:03

Joris Ooms · Answer 2 · 2011-03-05T17:59:23.220

Perhaps this helps you out:

Example code 1 on this page has the execcommand on a div by using a function. Not sure if that's what you're after? Good luck!

Edit: I figured out how to put the code here :o

<head>
<script type="text/javascript">
    function SetToBold () {
        document.execCommand ('bold', false, null);
    }
</script>
</head>
<body>
      <div contenteditable="true" onmouseup="SetToBold ();">
       Select a part of this text!      
      </div>
</body>

score 3 · Answer 3 · answered Apr 02 '15 at 03:58

Javascript:

var editableFocus = null;

  window.onload = function() {
    var editableElements = document.querySelectorAll("[contenteditable=true]");

    for (var i = 0; i<editableElements.length; i++) {
      editableElements[i].onfocus = function() {
        editableFocus = this.id;
      }
    };
  }

  function setPreviewFocus(obj){
    editableFocus = obj.id
  }

  function formatDoc(sCmd, sValue) {
    if(editableFocus == "textBox"){
      document.execCommand(sCmd, false, sValue); 
    }
  }

HTML:

<div id="textBox" contenteditable="true">
Texto fora do box
</div>

<div contenteditable="true">
Texto fora do box
</div>

<button title="Bold" onclick="formatDoc('bold');">Bold</button>

I'm confused... `formatDoc` function takes 2 parameters: `function formatDoc(sCmd, sValue)`, but use in HTML only provides 1 parameter: `onclick="formatDoc('bold');"`. — Kevin Fegan, Mar 13 '18 at 17:49

score 1 · Answer 4 · answered Feb 10 '18 at 19:32

1

You can keep it Simple, and add this to your div.

<div contenteditable="true" onmouseup="document.execCommand('bold',false,null);">

answered Feb 10 '18 at 19:32

Jonny

1,319
1
14
26

set execcommand just for a div

4 Answers4

Linked