- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我已经研究了所有 Rangy 问答几天,但无法适应这种情况。
我有以下内容可编辑
<div id="area" style="width:100%;height:2em;"
contentEditable="true";
onkeyup="formatText();"
></div>
调用一个函数,每次用户键入内容时,它都会解析内容并格式化特定标记。
function formatText() {
var el = document.getElementById('area');
var savedSel = saveSelection(el); // calls Rangy function
var tokenColor;
// removes html tags before passing the expression to the parser
var userInput = document.getElementById('area').innerHTML.replace(/(<([^>]+)>)/g,"").replace(/&/g, "").replace(/>/g, ">").replace(/</g, "<").replace(/<span[^>]*>+<\/span>/, "");
var i, newHTML=[];
tokenType=[]; // [NUMBER,+,(,NUMBER,..]
tokenArray=[]; // [3,+,(5,...]
var resultOutput = parse(userInput); // parser also fills tokenType and tokenArray
for (i=0; i<tokenArray.length-1; i++){
newHTML += "<span style='color: " + tokenColor + " '>" + tokenArray[i] + "</span>";
} // newHTML looks like <span style='color: red'>3</span><span style='color: black'>+</span> etc.
el.innerHTML = newHTML; // replaces content of <div> with formatted text
restoreSelection(el, savedSel); // calls Rangy function to restore cursor position
}
我使用了作者在本论坛其他帖子中提供的以下基于 Rangy 的函数:
function saveSelection(containerEl) {
var charIndex = 0, start = 0, end = 0, foundStart = false, stop = {};
var sel = rangy.getSelection(), range;
function traverseTextNodes(node, range) {
if (node.nodeType == 3) {
if (!foundStart && node == range.startContainer) {
start = charIndex + range.startOffset;
foundStart = true;
}
if (foundStart && node == range.endContainer) {
end = charIndex + range.endOffset;
throw stop;
}
charIndex += node.length;
} else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i], range);
}
}
}
if (sel.rangeCount) {
try {
traverseTextNodes(containerEl, sel.getRangeAt(0));
} catch (ex) {
if (ex != stop) {
throw ex;
}
}
}
return {
start: start,
end: end
};
}
function restoreSelection(containerEl, savedSel) {
var charIndex = 0, range = rangy.createRange(), foundStart = false, stop = {};
range.collapseToPoint(containerEl, 0);
function traverseTextNodes(node) {
if (node.nodeType == 3) {
var nextCharIndex = charIndex + node.length;
if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
range.setStart(node, savedSel.start - charIndex);
foundStart = true;
}
if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
range.setEnd(node, savedSel.end - charIndex);
throw stop;
}
charIndex = nextCharIndex;
}
else {
for (var i = 0, len = node.childNodes.length; i < len; ++i) {
traverseTextNodes(node.childNodes[i]);
}
}
}
try {
traverseTextNodes(containerEl);
} catch (ex) {
if (ex == stop) {
rangy.getSelection().setSingleRange(range);
} else {
throw ex;
}
}
}
一切正常,直到我尝试删除一个 Angular 色。此时,光标会跳到 div 的开头。
知道为什么会发生这种情况吗?
非常感谢。
最佳答案
在 Tim Down 的帮助下我已经解决了这个问题(感谢 Tim!)。
他最近将新的 TextRange 模块添加到 Rangy 中,并且运行良好。该模块具有基于页面可见文本中字符索引的选择保存/恢复,因此不受 innerHTML 更改的影响。您可以在此处找到演示:
http://rangy.googlecode.com/svn/trunk/demos/textrange.html
文档(初步):http://code.google.com/p/rangy/wiki/TextRangeModule
所以基本上代码应该是:
document.getElementById("area").onkeyup = function() {
var sel = rangy.getSelection();
var savedSel = sel.saveCharacterRanges(this);
var userInput = this.textContent || this.innerText;
var userInputLength = userInput.length;
var newHTML = [];
for (var i=0; i<userInputLength; i++) {
newHTML[i] = "<span style='color: red'>" + userInput.charAt(i) + "</span>";
}
this.innerHTML = newHTML.join("");
sel.restoreCharacterRanges(this, savedSel);
};
希望这对您有所帮助。
关于javascript - Rangy 在 contenteditable div 的退格键上失去了插入符号位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10557874/
我正在尝试将 textAngular 实现到我的 Angular.js 项目中,该项目是使用 browserify 打包的。 我通过 npm 安装了 rangy 和 textAngular。它们是这样
我正在使用 Rangy 来选择并恢复光标位置。 它做得非常出色,但它并不是为以编程方式操作用户输入并且在 DIV 的 innerHTML 中替换较短的字符串而设计的。 我在 jsbin 上创建了一个示
被选中的html: some text here is bolded, I guess |______________________| ere is bolded, I
我已经用 rangy 尝试了无数种方法,下面是我最接近的方法。在 chrome 和 IE8 中完美运行(就像我尝试过的许多其他版本一样),但 firefox 坚决拒绝玩球。 test() 函数应用于在
我正在使用 highlighter module in Rangy . 我有一个 div 元素,它有一些 html。 html 实际上是使用 ajax 从文件加载的,我有一个执行此加载的按钮。 加载文
我正在使用 Rangy帮助网站中的一些文本突出显示功能。简而言之,用户可以选择一些文本,突出显示文本(通过按钮单击),并且用户可以通过这种方式创建多个突出显示。 亮点被保存到数据库中,并且在 futu
我的代码: var cssApplier; window.onload = function () { rangy.init(); cs
我有一个 contenteditable div,我想将范围移动到当前范围之后的一个字符。 我现在想检查插入符后面的字符是否是某个字符,如果是则在它后面放置插入符 我使用了这段代码,但它不起作用 p
我正在尝试在我的 Google Chrome 扩展程序中使用 Rangy,但我一直收到错误消息“不支持模块‘WrappedSelection’”。这是一个简单的扩展,所以我没有在这个项目中实现除 Ra
我正在尝试创建一个预输入代码以添加到 wysihtml5 富文本编辑器。基本上,我需要能够像 Twitter/Github/Facebook 那样插入人物/主题标签引用……做。 我发现一些人的代码试图
我想做什么: ->向用户显示纯 HTML 页面->用户可以突出显示该页面上的文本->当用户下次登录时,我应该能够检索并在页面上显示他以前的(多个)突出显示。 我做了什么: 我使用了Library/AP
我有一个刚刚插入到 DOM 中的常规文本节点。 我想使用 Javascript 或 Rangy 选择它(就像用户用鼠标物理选择它一样)。 我有以下(我认为很丑)代码: // inser
我在一个 contenteditable div 中有几个 a 元素。如何将键盘插入符放在由 id 标识的特定元素的末尾,然后使用 Rangy 将其移动到 div 的末尾? 提前致谢,感谢您的帮助。
我有以下代码片段将插入符号设置为给定索引 index var el = $("#subjectMessage"), index = 9 ; var range = rangy.createRange(
我正在使用 rangy库,并且可以选择内容中的文本,如下所示: var sel = rangy.getSelection(); alert(sel); 我不知道如何获取选定的文本父节点/元素。例如,如
我正在尝试最新版本的“rangy”jQuery 插件(1.2 beta),以在具有特定偏移量的可内容编辑 DIV 中设置插入符号。 但是,它在 Firefox 中响应一个奇怪的错误:安全错误”代码:“
为什么当使用函数highlighter.highlightSelection (marktype) 做的注释数量越来越多时,rangy 变得更加迟缓?一开始性能非常好,但随着注释的增加性能会下降。 那
我正在尝试查找已保存的范围选择的 markerId 值。 我试过以下方法: marker = savedSel.rangeInfos; console.log(marker.markerId); 但它
我一直在使用 Rangy.js 来选择范围,到目前为止我非常喜欢它。我希望将选择范围的文本节点包裹在某个标记内,并在单击按钮时切换它。我使用 cssClassApplierModule 时效果很好,除
我需要你关于 rangey 图书馆的帮助。 如何在 iframe 选定的内容中应用范围,我无法理解(( 我页面中的这段代码使用所有 iframe 内容创建红色粗体选择,但我需要将其仅应用于用户选择 v
我是一名优秀的程序员,十分优秀!