在的WinForms CKEditor的工具栏下拉列表不登记的单击事件 [英] CKEditor Dropdown toolbar in WinForms not registering click events
问题描述
我目前运行到一个问题，CKEditor的WebBrowser控件在C＃的WinForms（版本4.4.0）（框架3.5）。我使用的编辑器的UIColor和字体大小/家庭的选择 - 当我在IE浏览器加载页面，工作正常。通过WebBrowser控件，试图选择一种颜色或字体（或为此事右键单击剪切/复制/粘贴菜单），当点击事件从未注册。我注意到，如果我用键盘来选择该选项并按下Enter键，一切正常，因为它应该。
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.
这似乎是发生在CKEditor的一面是它创建了一个DIV的控制，加载该专区内的iframe，并生成HTML，所以你得到一个什么样的字体，你会选择一个不错的，丰富的显示等。好像在这之后已加载，WebBrowser控件不能识别iframe中新创建的HTML，并将其作为虽然当我点击它，它不存在。即如果我点击的颜色并没有在色彩另一个按钮，其他按钮单击事件被注册。有什么办法让我通知Web浏览器控件的东西实际上是在那里 - 或者强迫它读取新渲染code？我注意到，该导航事件也将被解雇，当我点击字体或颜色，但它从未进入DocumentCompleted /导航的程序之后。
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.
我的IE浏览器下运行在我的WinForms应用程序的Web浏览器控件9设置（使用FEATURE_BROWSER_EMULATION = 9000），虽然我已经安装了IE11。我也尝试过使用FEATURE_BROWSER_EMULATION = 11000，但没有成功也是如此。
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编辑配置文件：
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';
};
让我知道，如果你们想看到什么。此外，该问题只表现在它的web浏览器控制的WinForms内。当通过一个普通的浏览器导航到该页面，一切工作正常。再次感谢！
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!
推荐答案
首先，确保你正确地贯彻落实 web浏览器功能控制。我发布了一些工作code您可以复制：
First, make sure you correctly implement the WebBrowser feature control. I posted some working code you can copy:
- <一个href="http://stackoverflow.com/a/18333982/1768303">http://stackoverflow.com/a/18333982/1768303
然后：
- 使用
＆LT;！DOCTYPE HTML＆GT;和＆LT; META HTTP-当量=X-UA-Compatible的内容=IE =边缘/＆GT;在网页上托管的CKEditor - 检查
document.compatMode，以确保它是CSS1Compat（而不是BackCompat）。 - 检查
document.documentMode，以确保它的IE浏览器的实际安装的版本相匹配。
- Use
<!DOCTYPE html>and<meta http-equiv="X-UA-Compatible" content="IE=Edge" />on the web page hosting CKEditor. - Check
document.compatModeto make sure it isCSS1Compat(rather thanBackCompat). - Check
document.documentModeto make sure it matches the actual installed version of IE.
这将确保CKEditor的可以使用最新和最伟大的HTML5 / JavaScript的特性在底层的IE浏览器/ MSHTML渲染引擎实现的。
This will make sure CKEditor can use the latest and greatest HTML5/JavaScript features implemented by the underlying IE/MSHTML rendering engine.
在上面已经做了，看看问题是否会消失。以下是如何CKEditor的托管页可能是这样的：
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>
这篇关于在的WinForms CKEditor的工具栏下拉列表不登记的单击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
