仅为div设置execcommand
仅为div设置execcommand
提问于 2011-03-06 01:39:07
它可以将execcommand绑定到div元素，而不是整个文档，我尝试这样做：
document.getElementById('div').execcommand(...)但它有一个错误：
execcommand is not a function它有任何方式绑定execcommand与div元素，而不是整个文档!！我不喜欢使用iframe方法。
回答 4
Stack Overflow用户
回答已采纳
发布于 2011-03-06 20:07:55
在IE中执行此操作比在其他浏览器中更容易，因为IE的TextRange对象具有execCommand()方法，这意味着可以在文档的某一节上执行命令，而无需更改选择并临时启用designMode (这是您在其他浏览器中必须执行的操作)。这里有一个函数可以干净利落地做你想做的事情：
function execCommandOnElement(el, commandName, value) {
if (typeof value == "undefined") {
value = null;
}
if (typeof window.getSelection != "undefined") {
// Non-IE case
var sel = window.getSelection();
// Save the current selection
var savedRanges = [];
for (var i = 0, len = sel.rangeCount; i < len; ++i) {
savedRanges[i] = sel.getRangeAt(i).cloneRange();
}
// Temporarily enable designMode so that
// document.execCommand() will work
document.designMode = "on";
// Select the element's content
sel = window.getSelection();
var range = document.createRange();
range.selectNodeContents(el);
sel.removeAllRanges();
sel.addRange(range);
// Execute the command
document.execCommand(commandName, false, value);
// Disable designMode
document.designMode = "off";
// Restore the previous selection
sel = window.getSelection();
sel.removeAllRanges();
for (var i = 0, len = savedRanges.length; i < len; ++i) {
sel.addRange(savedRanges[i]);
}
} else if (typeof document.body.createTextRange != "undefined") {
// IE case
var textRange = document.body.createTextRange();
textRange.moveToElementText(el);
textRange.execCommand(commandName, false, value);
}
}示例：
var testDiv = document.getElementById("test");
execCommandOnElement(testDiv, "Bold");
execCommandOnElement(testDiv, "ForeColor", "red");Stack Overflow用户
发布于 2011-03-06 01:47:23
也许这对你有帮助：
此页面上的Example code 1通过使用函数在div上包含execcommand。不确定这是不是你要找的？祝好运!
编辑:我想出了如何把代码放在这里：
<head>
<script type="text/javascript">
function SetToBold () {
document.execCommand ('bold', false, null);
}
</script>
</head>
<body>
<div contenteditable="true" onmouseup="SetToBold ();">
Select a part of this text!
</div>
</body>Stack Overflow用户
发布于 2015-04-02 11:58:05
Javascript：
var editableFocus = null;
window.onload = function() {
var editableElements = document.querySelectorAll("[contenteditable=true]");
for (var i = 0; i<editableElements.length; i++) {
editableElements[i].onfocus = function() {
editableFocus = this.id;
}
};
}
function setPreviewFocus(obj){
editableFocus = obj.id
}
function formatDoc(sCmd, sValue) {
if(editableFocus == "textBox"){
document.execCommand(sCmd, false, sValue);
}
}HTML：
<div id="textBox" contenteditable="true">
Texto fora do box
</div>
<div contenteditable="true">
Texto fora do box
</div>
<button title="Bold" onclick="formatDoc('bold');">Bold</button>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/5205544
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号