在WinForms中，CKEditor下拉工具栏无法注册点击事件

Question

在WinForms中，CKEditor下拉工具栏无法注册点击事件

c#.netwinformsckeditorwebbrowser-control

4

我目前在使用C# (Framework 3.5)的WinForms中的WebBrowser控件时，遇到了CKEditor（版本4.4.0）的问题。我正在使用编辑器的UIColor和字体大小/系列选项 - 当我在IE中加载页面时，它可以正常工作。但是通过WebBrowser控件，尝试选择颜色或字体时（或右键单击剪切/复制/粘贴菜单），点击事件从未被注册。我注意到，如果我使用键盘选择选项并按Enter键，则一切都按预期工作。

看起来在ckeditor方面正在发生的事情是，它为控件创建一个div，在该div内加载一个iframe并生成HTML，因此您可以得到一个漂亮的、丰富的显示，以便选择哪种字体等。似乎在加载了这个之后，WebBrowser控件不会识别该iframe中新创建的HTML，并在我单击它时将其视为不存在。例如，如果我单击颜色并且颜色下面有另一个按钮，则其他按钮的单击事件将被注册。是否有任何方法可以通知Web Browser控件实际存在某些内容 - 或强制它读取新呈现的代码？我注意到，当我单击字体或颜色时，Navigating事件也会触发，但之后永远不会进入DocumentCompleted / Navigated程序。

我在我的WinForms应用程序中使用IE 9设置运行Web Browser控件（使用FEATURE_BROWSER_EMULATION = 9000），尽管我已安装IE11。我还尝试过使用FEATURE_BROWSER_EMULATION = 11000，但也没有成功。

有人对此有什么想法吗？

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编辑器配置文件：

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';
};

如果您有其他需要，请告诉我。需要注意的是，此问题仅在WinForms的WebBrowser控件中出现。在正常浏览器中访问页面时，一切都正常。再次感谢！

- entropic

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- noseratio · Accepted Answer

首先，确保正确实现WebBrowser功能控件。我发布了一些可供复制的工作代码：

https://dev59.com/VmMl5IYBdhLWcg3wgnWl#18333982

然后：

在托管CKEditor的网页上使用<!DOCTYPE html>和<meta http-equiv="X-UA-Compatible" content="IE=Edge" />。
检查document.compatMode以确保它是CSS1Compat（而不是BackCompat）。
检查document.documentMode以确保它与实际安装的IE版本匹配。

这将确保CKEditor可以使用底层IE/MSHTML渲染引擎实现的最新和最好的HTML5/JavaScript功能。

完成上述步骤后，看看问题是否消失。以下是托管CKEditor的页面的示例：

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