contentEditable and execCommand()

Helo Daniweb,

I am in the process of building a WYSIWYG text editor, in an attempt to understand how they work. I am a novice at JavaScript, however what I have learnt so far seems to make sense.

The problem comes when I try and change the text rapidly, if I change it to bold, then type something then change it to normal and repeat this a couple of times it seems to break and the text doesn't become bold until three or four clicks of the bold button later.

Could someone please explain why it does this and what sort of things I need to add to prevent it, this is my current code:

<!DOCTYPE HTML>

<html lang = "en" >

    <head>

        <title> WYSIWYG Editor </title>

        <script type = "text/javascript" >

            function WYSIWYG() {

                document.getElementById('Editor').contentDocument.designMode = "on";

            }

            function Bold() {
                document.getElementById('Editor').contentWindow.document.execCommand("bold", false, null);
            }
            function Italic() {
                document.getElementById('Editor').contentWindow.document.execCommand("italic", false, null);
            }
            function Underline() {
                document.getElementById('Editor').contentWindow.document.execCommand("underline", false, null);
            }

            function Change() {

            }

        </script>

    </head>

    <body onload = "WYSIWYG();" >

        <button onclick = "Bold()"           > <b> B </b> </button>
        <button onclick = "Italic()"         > <i> I </i> </button>
        <button onclick = "Underline()"      > <u> U </u> </button> <br><br>

        <iframe id = "Editor" ></iframe>

    </body>

</html>

Thank you.

2

Contributors

2

Replies

1 Day

Discussion Span

5 Months Ago

Last Updated

3

Views

Question
Answered

AHarrisGsy

Posting Pro in Training

482 posts since Nov 2011

Reputation Points: 48

Solved Threads: 38

Skill Endorsements: 13

5 Months Ago

0

document.getElementById('Editor') does a lookup each time. It would increase performance a little if you just store this in a variable once, and use the variable instead.

pritaeas

Posting Prodigy

Moderator

9,268 posts since Jul 2006

Reputation Points: 1,173

Solved Threads: 1,457

Skill Endorsements: 86

5 Months Ago

0

Thank you for that tip, however the problem is that it still won't always change the text when it is pressed?

AHarrisGsy

Posting Pro in Training

482 posts since Nov 2011

Reputation Points: 48

Solved Threads: 38

Skill Endorsements: 13

Question Answered as of 4 Months Ago by pritaeas

contentEditable and execCommand()

This question has already been solved: Start a new discussion instead