CKEditor Dropdown toolbar in WinForms not registering click events

Question

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!

score 3 · Accepted Answer · edited May 23 '17 at 10:26

3

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>

edited May 23 '17 at 10:26

Community

1
1

answered Jul 04 '14 at 08:31

noseratio

59,932
34
208
486

I would remove the CKEDITOR.domReady call and also the loading of jQuery if you're not going to use it for anything else. – AlfonsoML Jul 04 '14 at 15:08
@AlfonsoML, `domReady` was added as a solution for an obscure issue related to CKEditor initialization, which I troubleshot quite a while ago. It may or may not be resolved in the recent versions of CKEditor, but I highly recommend sticking to this pattern. – noseratio Jul 04 '14 at 15:17
Unfortunately, I've tried all these things and it's still not behaving correctly. Is there any other information I can give that would help you out some more? – entropic Jul 07 '14 at 13:36
@entropic, if you can put up online a trimmed-down version of the web-page to repro this issue, that might help. Perhaps, on jsfiddle? – noseratio Jul 07 '14 at 13:40
It would work fine on jsfiddle (as it works fine in the normal browswer) - the problem only manifests inside the WebBrowser control. I will post up some of the HTML to the original post in a few. – entropic Jul 07 '14 at 13:50
Updated post with the HTML, thanks again for the help. – entropic Jul 07 '14 at 14:22
@entropic, I'll look at it, but it'd help if you posted something self-contained, without server-side code. – noseratio Jul 07 '14 at 20:27
@Noseratio Sure thing - I've updated the code to barebones HTML (with a couple of server controls). This page gets loaded in the WebBrowser control and the issue shows itself. If I browse to it straight from IE or any other browser, everything works as it should. I also included the editor config in there as well. – entropic Jul 07 '14 at 20:48
@entropic, I couldn't repro it. I targeted .NET 4.5.1, CKEditor 4.4.2 and tested with IE11, which probably means you're dealing with a bug/issue already fixed in more recent `CKEditor` / `WebBrowser` versions. – noseratio Jul 08 '14 at 09:10
1

No big deal - I'll give 4.4.2 a go and see if it works. Thanks again for the help. – entropic Jul 08 '14 at 13:16
1

@Noseratio I tried 4.4.2, using the full version from the CDN and it was a no go. My guess is it's indeed a bug in the 3.5 version of the WebBrowser control. I'm accepting your answer for all of the good info though, and I do appreciate the effort. – entropic Jul 10 '14 at 15:54

CKEditor Dropdown toolbar in WinForms not registering click events

1 Answers1

Linked