All geek questions in one place

WinForms CKEditor Dropdown Toolbar Does Not Log Click Events

I am currently having a problem with CKEditor (version 4.4.0) in a WebBrowser control for WinForms in C # (Framework 3.5). I use the UIColor and Font Size / Family options with an editor that works great when loading a page in IE. Using the WebBrowser control, click events when trying to select a color or font (or the cut / copy / paste menu with the right mouse button) are never logged. I noticed that if I use the keyboard to select an option and press enter, everything will work as intended.

What seems to be happening on the ckeditor side, it creates a div for the control, loads an iframe inside that div, and generates HTML so that you get a nice, rich display of the font you would choose, etc. it seems that after this has been loaded, the WebBrowser control does not recognize the newly created HTML inside this iframe and treats it as if it does not exist when I click on it. those. if I click on a color and there is another button below that color, other button click events will be logged. Is there a way to tell the administration of the web browser that something is actually there, or make it read the newly rendered code? I noticed that the Navigating event also fires when I click on a font or color, but never enters the DocumentCompleted / Navigated routine.

I have a web browser control in my WinForms application running under IE 9 (using FEATURE_BROWSER_EMULATION = 9000), although I have IE11 installed. I also tried using FEATURE_BROWSER_EMULATION = 11000, also not succeeding.

Anyone have any ideas 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 configuration 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 want to see anything else. Again, the problem ONLY manifests itself when it is inside the WebBrowser control for WinForms. When navigating a page through a normal browser, everything works fine. Thanks again!

+4
source share
1 answer

, WebBrowser. , :

:

  • <!DOCTYPE html> <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> -, CKEditor.
  • document.compatMode, , CSS1Compat ( BackCompat).
  • document.documentMode, , IE.

, CKEditor HTML5/JavaScript, IE/MSHTML.

, , . CKEditor-hosting:

<!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>
+3

Source: https://habr.com/ru/post/1543447/

More articles:


All Articles