CKEditor Dropdown toolbar in WinForms not register

I am currently running into an issue with CKEditor (version 4.4.0) in the WebBrowser control for WinForms in C# (Framework 3.5). I am using the UIColor and Font Size/Family options with the editor - which works fine when I load the page in IE. Through the WebBrowser control, the click events when trying to select a color or font (or the right click cut/copy/paste menu for that matter) never register. I have noticed, that if I use the keyboard to select the option and hit enter, everything works as it is supposed to.

What appears to be happening on the ckeditor side is it creates a div for the control, loads an iframe within that div and generates the HTML so you get a nice, rich display of what font you would be choosing, etc. It seems like after this has been loaded, the WebBrowser control doesn't recognize the newly created HTML within that iframe, and treats it as though it does not exist when I click on it. i.e. If I click on the color and there is another button under that color, the other buttons click event gets registered. Is there any way for me to inform the Web Browser control something is actually there - or force it to read the newly rendered code? I have noticed that the Navigating event also gets fired when I click on the font or color, but it never enters the DocumentCompleted/Navigated routine afterwards.

I have the web browser control in my WinForms app running under IE 9 settings (using FEATURE_BROWSER_EMULATION = 9000), although I have IE11 installed. I have also tried using FEATURE_BROWSER_EMULATION = 11000, with no success as well.

Anyone have any ideas on what to do here?

HTML:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>Editor Test</title>
    <script src="../assets/js/jquery/jquery.js" type="text/javascript"></script>
    <script src="../assets/js/ckeditor/ckeditor.js" type="text/javascript"></script>
    <script src="../assets/js/ckeditor/adapters/jquery.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#uxBody").ckeditor();

            for (var i in CKEDITOR.instances) {
                CKEDITOR.instances[i].on('change', function () { pageIsDirty = true; });
            }
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <fieldset class="fldSet">
            <legend><strong>Correspondence</strong></legend>
            <table border="0" cellpadding="2" cellspacing="0" class="icsForm">
                <tr id="subjectRow" class="icsFormRow">
                    <td class="right">Subject:</td>
                     <td class="left">
                         <asp:TextBox ID="uxSubject" runat="server" MaxLength="78" style="width: 400px" />
                     </td>
                </tr>
                <tr id="bodyRow" class="icsFormAltRow">
                    <td class="right" style="vertical-align: top;">
                        <span class="reqFields">*</span>Body:
                    </td>
                    <td class="left">
                        <asp:TextBox ID="uxBody" runat="server" TextMode="MultiLine" Rows="10" style="width: 600px;" />
                    </td>
                </tr>
            </table>
        </fieldset>
    </form>
</body>
</html>

CK Editor Config File:

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here.
    // For complete reference see:
    // http://docs.ckeditor.com/#!/api/CKEDITOR.config

    // The toolbar groups arrangement, optimized for two toolbar rows.
    config.toolbar = [
        { name: 'clipboard', items: ['Cut', 'Copy', 'Paste', '-', 'Undo', 'Redo'] },
        { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', '-', 'RemoveFormat'] },
        { name: 'links', items: ['Link', 'Unlink'] },
        { name: 'insert', items: ['Image', 'Table', 'HorizontalRule', 'SpecialChar'] },
        '/',
        { name: 'paragraph', items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote'] },
        { name: 'align', items: ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'] },
        { name: 'fonts', items: ['Font', 'FontSize', '-', 'TextColor', 'BGColor'] },
        { name: 'tools', items: ['Maximize', '-', 'Source'] },
    ];

    // Set the most common block elements.
    config.format_tags = 'p;h1;h2;h3;pre';

    // Simplify the dialog windows.
    config.removeDialogTabs = 'image:advanced;link:advanced';

    config.width = '600px';
};

Let me know if you guys would like to see anything else. Again, the problem ONLY manifests itself when it's within the WebBrowser control for WinForms. When navigating to the page via a normal browser, everything works fine. Thanks again!

First, make sure you correctly implement the WebBrowser feature control. I posted some working code you can copy:

https://stackoverflow.com/a/18333982/1768303

Then:

Use <!DOCTYPE html> and <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> on the web page hosting CKEditor.
Check document.compatMode to make sure it is CSS1Compat (rather than BackCompat).
Check document.documentMode to make sure it matches the actual installed version of IE.

This will make sure CKEditor can use the latest and greatest HTML5/JavaScript features implemented by the underlying IE/MSHTML rendering engine.

Once the above has been done, see if the problem goes away. Here's how the CKEditor-hosting page may look like:

<!DOCTYPE html>

<html lang="en">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>CKEditor test</title>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="/ckeditor/ckeditor.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            CKEDITOR.domReady(function () {
                CKEDITOR.replace("editorDiv", {
                    docType: '<!DOCTYPE html>',
                    on: {
                        instanceReady: function (evt) {
                            var editor = evt.editor;

                            // the editor is ready
                            editor.execCommand("maximize");
                        }
                    }
                });
            });
        });
    </script>
</head>

<body>
    <div id="editorDiv"></div>
</body>
</html>