Javascript IHTMLTxtRange中第一个元素的中断
我正在尝试为web应用程序编写富文本编辑器，我需要能够将文本中的某些元素标记为用户无法编辑。原因是它们是动态内容（如创建日期）的占位符，我希望对其进行实时预览 以下面的代码为例——为了轻量级，这段代码中没有工具栏或任何东西，但是textarea和html是同步的Javascript IHTMLTxtRange中第一个元素的中断,javascript,jquery,html,text-editor,richtext,Javascript,Jquery,Html,Text Editor,Richtext,我正在尝试为web应用程序编写富文本编辑器，我需要能够将文本中的某些元素标记为用户无法编辑。原因是它们是动态内容（如创建日期）的占位符，我希望对其进行实时预览 以下面的代码为例——为了轻量级，这段代码中没有工具栏或任何东西，但是textarea和html是同步的 <!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" --&
<!-- DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" -->
<html>
<head>
<title>Hi</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script>
$(function() {
g = {};
g.iFrame = document.createElement("IFRAME");
$("#frameContainer").append(g.iFrame);
g.iDoc = g.iFrame.contentWindow.document;
g.iDoc.designMode = "on";
g.jTextArea = $("#textContainer textarea");
setTimeout(function() {
g.iDoc.body.innerHTML = "<b class=\"notype\">Cannot type here</b>";
$(g.iDoc).trigger("keyup");
$(g.iDoc.body).focus();
}, 0);
$(g.iDoc).keyup(function() {
g.jTextArea.text(g.iDoc.body.innerHTML);
});
g.jTextArea.keyup(function() {
g.iDoc.body.innerHTML = this.innerText;
});
var getSelection = function() {
if (typeof g.iDoc.selection !== "undefined" && g.iDoc.selection.type !== "Text" && g.iDoc.selection.type !== "None") {
g.iDoc.selection.clear();
}
return g.iDoc.selection.createRange();
};
$(g.iDoc).keypress(function(event) {
// If we're in a marked field, disable the operation.
var sel = getSelection();
if ($(sel.parentElement()).hasClass('notype')) {
sel.moveToElementText(sel.parentElement());
sel.collapse();
sel.move("character", -1);
sel.select();
$("#log").append("<div>outside of thing</div>");
}
});
$(testLink).click(function() {
// Try and insert stuff at the front
$(g.iDoc.body).focus();
var sel = getSelection();
sel.moveToElementText(sel.parentElement());
sel.collapse();
sel.move("character", -100);
sel.pasteHTML("Before html?");
$(g.iDoc).trigger("keyup");
$(g.iDoc.body).focus();
});
});
</script>
</head>
<body id="#body">
<div id="container">
<div id="frameContainer">
<h1>
Frame</h1>
</div>
<div id="textContainer">
<h1>
Text</h1>
<textarea rows="10" cols="80"></textarea>
</div>
<a href="#" id="testLink">Test</a>
<div id="log">
</div>
</div>
</body>
</html>
你好
$（函数（）{
g={}；
g、 iFrame=document.createElement（“iFrame”）；
$（“#frameContainer”）.append（g.iFrame）；
g、 iDoc=g.iFrame.contentWindow.document；
g、 iDoc.designMode=“on”；
g、 jTextArea=$（“#textContainer textarea”）；
setTimeout（函数（）{
g、 iDoc.body.innerHTML=“无法在此处键入”；
$（g.iDoc）.触发器（“键控”）；
$（g.iDoc.body）.focus（）；
}, 0);
$（g.iDoc）.keyup（函数（）{
g、 jTextArea.text（g.iDoc.body.innerHTML）；
});
g、 jTextArea.keyup（函数（）{
g、 iDoc.body.innerHTML=this.innerText；
});
var getSelection=function（）{
if（typeof g.iDoc.selection！=“未定义”&&g.iDoc.selection.type！=“文本”&&g.iDoc.selection.type！=“无”）{
g、 iDoc.selection.clear（）；
}
返回g.iDoc.selection.createRange（）；
};
$（g.iDoc）.按键（功能（事件）{
//如果我们在标记字段中，请禁用该操作。
var sel=getSelection（）；
if（$（sel.parentElement（））.hasClass（'notype'））{
sel.moveToElementText（sel.parentElement（））；
选择塌陷（）；
选择移动（“字符”，-1）；
sel.select（）；
$（“#log”）.append（“外部事物”）；
}
});
$（testLink）。单击（函数（）{
//试着在前面插入一些东西
$（g.iDoc.body）.focus（）；
var sel=getSelection（）；
sel.moveToElementText（sel.parentElement（））；
选择塌陷（）；
选择移动（“字符”，-100）；
选择粘贴html（“在html之前？”）；
$（g.iDoc）.触发器（“键控”）；
$（g.iDoc.body）.focus（）；
});
});
框架
正文
- 如果用户在光标位于“notype”标记时键入，则光标将移到前面，文本将移到那里
- 如果光标位于“notype”标记内的最后一个位置，则文本显示在标记后
- 如果用户在其他任何地方键入，它将一如既往地插入
底部的链接尝试手动将光标放在前面并插入html。显然失败了。我知道这一个可以通过做一些类似$（g.iDoc.body）.prepend（“before！”）的事情来工作，但这显然在实际场景中不起作用（使用keyup）。我建议使用
contenteditabledesignMode<div id="contentContainer">
<p contenteditable="true">An editable paragraph</p>
<p>An uneditable paragraph</p>
<p contenteditable="true">Another editable paragraph</p>
</div>
可编辑段落
不可编辑的段落
另一个可编辑段落