3

I am using Document.execCommand() to manipulate content of a <div contentEditable = true id="#TextEditor">.

By clicking a button I can enable bold to my text editor. Code I use to enable bold is <button id="#ApplyBold">B</button>

$('#ApplyBold').click(function () {
    $('#TextEditor').focus();
    document.execCommand('bold', false, null);
});

Which makes bold enable to the text editor. Similarly I have italic and underline buttons.

Now, how can I detect styles which are enabled by document.execCommand() command. For example if I have enabled bold and italic, I need a function say GetAppliedStyles() which can return applied styles those are enabled by document.execCommand() command. In this case they are bold and underline.

function GetAppliedStyles()
{
   var styles = new Array();
   styles = document.execCommand().aCommandName; //which returns list of styles applies
   return styles;
}
Mikayil Abdullayev
  • 12,117
  • 26
  • 122
  • 206
Rahul Chakrabarty
  • 2,149
  • 7
  • 39
  • 70

3 Answers3

2

Although being late here but I thought to add one approach which can be helpful. document.queryCommandStateYou can use document.queryCommandState(command) ,eg: document.queryCommandState('bold)` to check whether certain command has been added or not.

For the selected text, you can pass some expected commands as an array and loop to check to get a boolean value for the selected document.

I used the same feature to check and activate command buttons by adding a class based on the same logic here. Although the code is in AngularJS, it can re implemented in other libraries or frameworks

Shashank Vivek
  • 16,888
  • 8
  • 62
  • 104
1

It doesn't work the way you're thinking. execCommand('bold') is an event, not an ongoing "effect" that you can watch for -- it adds a <b> or <strong> tag to the contentEditable node at the current cursor position..

If you need to check the current styling during editing, you'd instead find the current caret position (Get contentEditable caret index position) and seek upwards in the DOM from there to find what tags that position is currently wrapped in (.closest('b') for example).

Edit in 2020: this answer is outdated; the queryCommandState method mentioned in Shashank’s answer may currently be a better choice.

Daniel Beck
  • 20,653
  • 5
  • 38
  • 53
0

queryCommandState() is deprecated, and should not be used.

You can make use of window.getSelection() method. Here is the code to get the tag names applied to the selected text. Let's say if you are checking for 'italic':

let appliedCmds = [];
let specificTag = 'i';
let node = window.getSelection().focusNode;
while(node.tagName !== 'body') {
  if(node.tagName === specificTag){//you can add multiple checks here for the cmds or tags you wanna find.
    appliedCmds.push(node.tagName);
  }
  node = node.parentElement;
}

What this code will do: When you select the text in your rich text editor, it'll get the selected text, get it's parent element. Then it'll check for the 'body' tag, if it's not the 'body' tag, it'll enter the loop, here you can add checks for your tags. For example: 'italic' has 'i' tag. You can add multiple checks for the cmds you want to get the applied cmds. Then, if it finds the tag, it'll push the tag name in the array. And find it's parent. The same process will go on unitll body tag is found. Now you have the tag names in an array. You can get the cmds from the tag names.

Karan Verma
  • 1