富文本编辑器在IE 10中无法正常工作
Rich Text Editor doesnot work properly in IE 10
我已经实现了这样的richtext编辑器
问题1。如果我移除图像并放置简单的div，它将不起作用。的函数调用格式化，不会出现错误。但也没有产出。我在div和span中尝试过这个。问题2。在IE 10中，要格式化元素，我必须选择前一个元素。尽管它在firefox中运行良好。
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script>
var txtEditor;
var viewHtml = 1;
function initDoc() {
txtEditor = $('#textBox')[0];
}
$(window).load(initDoc);
function formatDoc(sCmd, sValue) {
//if (validateMode()) { document.execCommand(sCmd, false, sValue);
$(txtEditor).focus(); }
document.execCommand(sCmd, false, sValue); $(txtEditor).focus();
}
function validateMode() {
if (viewHtml==1) { return true; }
alert("Uncheck '"Show HTML'".");
$(txtEditor).focus();
return false;
}
</script>
<style type="text/css">
#textBox {
margin-left: 10px;
width: 650px;
height: 200px;
border: 1px #000000 solid;
padding: 12px;
overflow: scroll;
}
#textBox , #sourceText {
padding: 0;
margin: 0;
max-width: 650px;
min-height: 200px;
}
#editMode label {
cursor: pointer;
}
.attributesStyle {
margin-left: 0px;
border: 1px solid #ccc;
padding: 3px;
float: left;
}
.link {
width: 16px;
height: 17px;
}
.floatLeft {
float: left;
}
.floatRight {
float: right;
}
.marginLeft10 {
margin-left: 10px;
}
.clearBoth {
clear: both;
}
a:hover {
cursor: pointer;
}
</style>
<body >
<form >
<input type="hidden" name="myDoc">
<div style="margin-bottom:10px;">
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('formatBlock', '<h1>');">
<div id="h1" class="attributesStyle">
<img class="link" title="H1" src="~/Images/Heading1.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h2>');">
<div id="h2" class="attributesStyle">
<img class="link" title="H2" src="~/Images/Heading2.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h3>');">
<div id="h3" class="attributesStyle">
<img class="link" title="H3" src="~/Images/Heading3.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h4>');">
<div id="h4" class="attributesStyle">
<img class="link" title="H4" src="~/Images/Heading4.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h5>');">
<div id="h5" class="attributesStyle">
<img class="link" title="H5" src="~/Images/Heading5.png" />
</div>
</a>
<a onclick="formatDoc('formatBlock', '<h6>');">
<div id="h6" class="attributesStyle">
<img class="link" title="H6" src="~/Images/Heading6.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<p>');">
<div id="divParagraph" class="attributesStyle">
<img class="link" title="Paragraph" src="~/Images/paragraph.png" />
</div>
</a>
<a onclick="formatDoc('formatblock', '<pre>');">
<div id="divParagraph" class="attributesStyle">
Pre
</div>
</a>
<a onclick="formatDoc('formatblock', '<blockquote>');">
<div class="attributesStyle">
<img class="link" title="Quote" src="~/Content/themes/base/images /quote_1.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('bold');">
<div id="bolds" class="attributesStyle" title="Bold">
<img class="link" title="Bold" src="~/Images/text_bold.png" />
</div>
</a>
<a onclick="formatDoc('italic');">
<div id="italic" class="attributesStyle" title="Italic">
<img class="link" title="Italic" src="~/Images/text_italic.png" />
</div>
</a>
<a onclick="formatDoc('underline');">
<div class="attributesStyle" title="Underline">
<img class="link" title="Underline" src="~/Images/text_underline.png" />
</div>
</a>
<a onclick="formatDoc('insertorderedlist');">
<div class="attributesStyle">
<img class="link" title="Order List" src="~/Content/themes/base/images/list_numbered_32.png" />
</div>
</a>
<a onclick="formatDoc('insertunorderedlist');">
<div class="attributesStyle">
<img class="link" title="Bullets List" src="~/Content/themes/base/images/text_list_bullets.png" />
</div>
</a>
<a onclick="formatDoc('undo');">
<div class="attributesStyle" title="undo">
<img class="link" src="~/Content/themes/base/images/rotateLeft.png" />
</div>
</a>
<a onclick="formatDoc('redo');">
<div class="attributesStyle" title="redo">
<img class="link" src="~/Content/themes/base/images/rotateRight.png" />
</div>
</a>
</div>
<div class="floatLeft marginLeft10">
<a onclick="formatDoc('justifyleft');">
<div class="attributesStyle" title="Justify left">
<img id="justifyleft" class="link" title="Justify Left" src="~/Content/themes/base/images/text_align_left.png" />
</div>
</a>
<a onclick="formatDoc('justifycenter');">
<div class="attributesStyle" title="Justify Center">
<img id="justifycenter" class="link" title="Justify Center" src="~/Content/themes/base/images/text_align_center.png" />
</div>
</a>
<a onclick="formatDoc('justifyright');">
<div class="attributesStyle" title="Justify Right">
<img id="justifyright" class="link" title="Justify Right" src="~/Content/themes/base/images/text_align_right.png" />
</div>
</a>
</div>
<a id="divToggleHtml" >
<div class="attributesStyle" title="Toggle Html">
Toggle HTML
</div>
</a>
<div class="floatLeft marginLeft10">
<a onclick="javascript: var sLnk = prompt('Write the URL here', 'http:'/'/'); if (sLnk && sLnk != '' && sLnk != 'http://') { formatDoc('CreateLink', sLnk); }">
<div class="attributesStyle" title="Add Link">
<img class="link" src="~/Content/themes/base/images/link.png" />
</div>
</a>
<a onclick="formatDoc('InsertImage', true);">
<div class="attributesStyle" title="Add Image">
<img class="link" src="~/Content/themes/base/images/image.png" />
</div>
</a>
<a onclick="formatDoc('Unlink');">
<div class="attributesStyle" title="Unlink">
<img class="link" src="~/Content/themes/base/images/brokenLink.png" />
</div>
</a>
</div>
<div class="clearBoth">
</div>
</div>
<div id="textBox" contenteditable="true"><i>Amit Sinha</i></div>
<p style="display:none;" id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
<p><input type="submit" value="Send" style="display:none;" /></p>
</form>
</body>
我可以为第一个问题提供解决方案。只要我有短信在里面，对我也不起作用。问题似乎是某种"选择文本而不是响应点击"
为按钮div添加以下css设置：
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select:none;
这将使控件对单击做出响应。不幸的是，我无法测试您的第二个问题，因为我正在linux上工作；）
相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 正在尝试使用if和else添加类，但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- JS可以在Chrome中工作，但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作
