[SOLVED] assign selected text to a variable in designMode

assign selected text to a variable in designMode

I have a piece of code that sets the document to designMode and then operates on pieces of selected text using the document.execCommand() function.

It provides various functionality - for example it allows the user to turn a selected line of text to bold or italic (essentially the functionality of a text editor like this one that I am typing into now).

Here is a simplified example of the code:

<!DOCTYPE html>
<html>
<head>
      <meta charset="utf-8">
</head>
<body>
    <div>
          This is some text - highlight a section of it and press h1 then li
    </div>
    <button onclick="setToHeader()" id="h1" style="width:100px" unselectable="on">h1</button>
    <button onclick="setToList()" id="li" style="width:100px" unselectable="on">li</button>

    <script>
          document.designMode = 'on';
            function setToHeader() {
                  document.execCommand('formatBlock', false, 'h1');
            }
            function setToList() {
                    document.execCommand('insertUnorderedList', false, null);
            }
    </script>
</body>
</html>

My problem here is that I do not want to be able to use the li button - i.e. convert the selected text to list format, when it is already converted into heading format with the h1 button.

I think I want to be able to read the selected text and simply check it with something like:

// var selectedText = ???
var isHeading = selectedText.search('h1') > -1

Is this the way, or is there a better approach?

How can I get hold of the relevant selected text and assign it to a variable?

Solution

You can get hold of the selected text using the selection object.

e.g. in IE11:

getSelection()

Full documentation can be found here:

 https://msdn.microsoft.com/en-us/library/ms535869(v=vs.85).aspx