标签: rangy

我有一个contenteditable div,其中包含典型的所见即所得编辑器html(粗体,锚点,列表).

我需要确定当前光标是否为onKeyDown,在div的开头和结尾.原因是,基于光标位置和按下的键,我可能想要将此div与退格上的前一个div合并,或者在输入时创建一个新的跟随div.

我一直在摆弄范围,但是当你在元素中使用html时,事情变得相当复杂.

我希望我必须忽略一些简单的解决方案.

是否有一种相对简单的方法来确定这一点 - 我愿意使用像Rangy这样的库.

谢谢!

编辑:我正在考虑以下几点:

$('.mycontenteditable').bind('keydown', handle_keydown)

handle_keydown = function(e) {

  range = window.getSelection().getRangeAt(0)
  start_range = document.createRange()
  start_range.selectNodeContents(this.firstChild)
  start_range.collapse(true) // collapse to start
  is_start = start_range.compareBoundaryPoints(Range.START_TO_START,range)
  end_range = document.createRange()
  end_range.selectNodeContents(this.lastChild)
  end_range.collapse(false)
  is_end = end_range.compareBoundaryPoints(Range.END_TO_END,range)
}

我会遇到类似这样的奇怪问题吗？

我有一个小提示,显示我的代码正在做什么.使用javascript/jquery我试图将一个表插入到当前插入位置的内容可编辑div中.我正在使用Tim Down的Rangy库来实现这一目标.我用以下javascript做这个.

var range = getFirstRange();
var el = document.createElement("table");
var tableHtml = "";
for (var a = 0; a <= tableY; a++) {
    if(a%2==0){
       tableHtml += '<tr class="zebra">';
    }
    else{
       tableHtml += '<tr>';
    }
    for (var b = 0; b <= tableX; b++) {
       tableHtml += '<td>&nbsp;</td>';
    }
    tableHtml += '</tr>';   
}
$(el).html(tableHtml); 
range.insertNode(el);
rangy.getSelection().setSingleRange(range);

以防万一它是getFirstRange函数.

function getFirstRange() {
   var sel = rangy.getSelection();
   return sel.rangeCount ? sel.getRangeAt(0) : null;
} 

我需要在放置此表的任何地方制作有效的html.例如,如果插入符号位于链接的中间,我试图避免以下html.

<p>some text <a href="#">text …

所以我有一个包含一个文本块的div,之前用户已经在这个块中选择了一些文本,我从这个选择中创建了一个范围对象.我存储了所选文本的起点和终点的偏移量,但是我在重新创建范围时遇到了问题(所以我可以操作它)."quotables"是包含所有文本的div.我不知道我做错了什么.

    var theRange = rangy.createRange();
    var node = $('.quotables').html();
    theRange.setStart(node, 14);
    theRange.setEnd(node, 318);

但我一直收到错误:未捕获错误:NOT_FOUND_ERR:DOM异常8
m.setStart
(匿名函数)
d.extend._Deferred.f.resolveWith
ddextend.ready
dcaddEventListener.y

我需要在contenteditable div中实现数字的突出显示(将来我添加更复杂的规则).问题是当我使用javascript替换插入新内容时,DOM更改和contenteditable div失去焦点.我需要的是保持对当前位置的重点关注div,因此用户只需键入没有任何问题,我的功能简单突出显示数字.谷歌搜索我认为Rangy库是最好的解决方案.我有以下代码:

function formatText() {

              var savedSel = rangy.saveSelection();
              el = document.getElementById('pad');
              el.innerHTML = el.innerHTML.replace(/(<([^>]+)>)/ig,"");
              el.innerHTML = el.innerHTML.replace(/([0-9])/ig,"<font color='red'>$1</font>");
              rangy.restoreSelection(savedSel);
          }

<div contenteditable="true" id="pad" onkeyup="formatText();"></div>

问题是在函数结束工作焦点回到div之后,但是插入总是指向div开始,我可以在任何地方输入,除了div开始.还有console.log类型以下Rangy warning: Module SaveRestore: Marker element has been removed. Cannot restore selection. 请帮我实现这个功能.我打开另一个解决方案,不仅是rangy库.谢谢!

http://jsfiddle.net/2rTA5/这是jsfiddle,但是它不能正常工作(当我在我的div中输入数字时没有任何反应),不管我(第一次通过jsfiddle发布代码)或者资源不支持contenteditable.UPD*我在stackoverflow上读到类似的问题,但解决方案不适合我的情况:(

以下是我要完成的任务:当用户使用鼠标,键盘或触摸来选择"myDiv"中的文本时,我想获取三个谨慎的HTML块:选择之前的HTML(到它的"左侧") ),选择内的HTML,以及选择后的HTML(到它的"右边").html应该与myDiv.innerHTML一样.

选择可能在标记对内开始或结束(即,隔离的选择不一定是有效的HTML).我不需要处理选择中绝对定位元素之类的特殊场景; 我所关注的所有选择都将被限制为一个包含基本标签的div,例如strong,em,ul,ol,h1,image和table.

我最接近的是使用rangy来阻止选择并调用selection.getRangeAt(0).cloneContents()以获得选择HTML.这种方法效果很好,直到我做出一个孤立无效的选择,并且浏览器改变文档片段的HTML以使其成为有效标记.

额外信息:这就是我需要这个的原因:

我正在创建一个文档反馈系统,因此我需要将选择信息保存到数据库中以便以后检索和重构.通常我会使用DOM路径和所选文本保存选择,但文本可能会在保存和重建之间发生变化.例如,作者可能会移动整个段落,删除部分等.然后DOM路径变得毫无用处.

所以我的(不完美)计划是将选择存储为[offset,length,html_snippet].那就是"位置".我还将存储直接在所选文本之前和之后出现的html片段.这是"背景".

使用这些数据的组合,我应该能够在大多数时间重新定位最初选择的文本,即使它已移动或部分更改.当失败时,UI将有办法解决它,但我希望尽可能不频繁地发生.

Superthanks!

这个错误在IE10/11中意味着什么:

Error: Could not complete the operation due to error 800a025e. 

我该如何调试它？

它说它的这一行:

this.nativeSelection.removeAllRanges();

https://code.google.com/p/rangy/source/browse/trunk/src/js/core/wrappedselection.js#416

请在此处查看:http://panmedia.github.io/raptor-editor/tests/cases/selection/selection-expand.html

我正在使用一个contenteditable div结合rangy Javascript库在光标位置插入HTML.

div的内容通常如下所示:

<div contenteditable="true">
    "Hello "
    <button contenteditable="false" data-id="147">@John Smith</button>
    " "
</div>

按"@"后会建议用户,并在选择后随后插入按钮(ala Google Plus).我也在 这个按钮后插入一个.

当您按下退格键(首先删除之后 )时,Chrome/Safari/Firefox中的按钮会被删除,但不会在IE8中删除.在IE8中,光标只是跳过按钮而不删除它.IE8中更奇怪的是,如果你将 按钮放在按钮旁边 - 而是将光标放在按钮旁边 - 它会移除退格键上的按钮.所以当 光标右侧有一个时,它很高兴.

有没有人知道我需要什么才能使IE8工作,删除退格按钮而不需要 光标右侧？(关于这种奇怪行为的一些信息也可能有帮助)

PS我还没有测试过其他版本的IE

我正在使用rangy库,可以选择内容可编辑的文本,如下所示:

var sel = rangy.getSelection();
alert(sel);

我无法弄清楚如何获取所选文本父节点/元素.例如,如果我选择的是文本

<strong>My Text</strong> 
or
<h1>My Title</h1>

如何包含强节点或H1元素？

我有一个<div />是contenteditable和可包含多种类型的HTML元素如<span />,<a />,<b />,<u />等.

现在,当我在我选择文本时,我contenteditable希望有一个按钮,删除选择中的所有样式.

例1:

选择:

Hello <b>there</b>. I am <u>a selection</u>

会成为:

Hello there. I am a selection

例2:

选择:

<a href="#">I am a link</a>

会成为:

I am a link

你明白了......

我发现这个有用的功能/sf/answers/279852751/用自定义文本替换当前选择.但我无法先获取选择内容并在替换之前剥离标签.我怎样才能做到这一点？

我目前正在实施非常酷的范围和选择库Rangy.js.我想实现一个可以突出显示某些文本的函数,然后添加注释并将其保存到突出显示中.在演示中,它显示了如何向选择添加注释 - 但只有ID附加到选择.

我正在尝试这样的事情,我在元素上创建了一个注释属性:

highlighter.addClassApplier(rangy.createCssClassApplier("highlight", {
    ignoreWhiteSpace: true,
    elementTagName: "span",
    elementProperties: {
        comment: "",
        onclick: function() {             
            var highlight = highlighter.getHighlightForElement(this);
            $('#myModal p').text( highlight.classApplier.elementProperties.comment );
            $('#myModal').modal('show');
        }
    }
}));

然后在突出显示文本时,注释存储在"comment"属性中:

function highlightSelectedText( event ) {
    event.preventDefault();

    var highlight = highlighter.highlightSelection("highlight");

    $('#myModal').modal('show');

    $('#save-comment').on('click', function () {
        var comment = $('#comment-text');
        highlight[0].classApplier.elementProperties.comment = comment.val();
    });
  }

当我序列化我的精彩集锦时,评论不包括在内.

有没有人尝试过这种或与Rangy.js类似的东西？

任何帮助表示感谢,提前感谢!