标签: rangy

如何在某个位置(选择)拆分节点/元素.

示例我有这个标记:

<p>This is <a href="">a te|st</a>, you like?</p>

(此管道代表位置/选择)

我想将其转换为:

<p>This is <a href="">a te</a></p>|<p><a href="">st</a>, you like?</p>

保持选择.

有任何想法吗？

我使用Rangy库和jQuery,但如果适用的话可以使用原始JS.

我目前正在实施非常酷的范围和选择库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类似的东西？

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

我正在努力实现的目标

我正在建立类似输入内容的可编辑div。您应该单击div外部的一些标签以将其添加到div中，同时也可以在所述标签周围输入内容。

问题以及如何重现

我正在使用用户选择：none（正常和webkit）以防止选择标记按钮，因此失去了插入符号的位置。它可以在Firefox和Chrome中使用，但不能在Safari中使用（我知道-webkit-前缀并正在使用它）。

这是一个小提琴，您可以在其中重现问题。

我尝试过的

我的问题的根源是保持插入符号的位置，同时使内容可编辑div。

我以前曾尝试使用rangy，但在Firefox方面存在一些限制。从UX的角度来看，这些限制非常令人讨厌。您可以向我的用户选择检查我以前的问题以及如何将我带到这里：无解决方案- 当用Rangy保存其位置时，Caret在Firefox中消失了

这就是我采用用户选择的解决方案的方式：无。

我的组件/ JS：

new Vue({
  el: "#app",
        data(){
            return {
                filters_toggled: false,
                fake_input_content: '',
                input_length: 0,
                typed: false,
                boolean_buttons: [{
                    type: '1',
                    label: '?I',
                    tag: '?I',
                    img: 'https://i.imgur.com/feHin0S.png'
                }, {
                    type: '2',
                    label: 'SAU',
                    tag: 'SAU',
                    img: 'https://i.imgur.com/vWJeJwb.png'
                }, {
                    type: '3',
                    label: 'NU',
                    tag: 'NU',
                    img: 'https://i.imgur.com/NNg1spZ.png'
                }],
                saved_sel: 0,
                value: null,
                options: ['list', 'of', 'options']
            }
        },
        name: 'boolean-input',
        methods: {
            inputLength($event){
                this.input_length = $event.target.innerText.length;
                if(this.input_length == 0)
                    this.typed …

代码:http://jsfiddle.net/4hV6c/4/ 只做任何选择,你会在ie8中得到一个脚本错误

我正在尝试这样做:

$(end_node.parentNode).has(start_node)

在现代浏览器(chrome,ff,opera等)中,如果start_node不在end_node.parentNode中,则返回[],如果找到则返回元素(我忘记了).

现在,end_node是一个文本元素,而parentNode是一个实际的DOM实体.IE将会执行.has,$(end_node).has(start_node)但这显然是不同的行为.

是否有工作来实现这一目标？

• 在IE中,小提琴会出错,其他浏览器会提示你一个布尔值.

更新:这里有一个词可以覆盖.has()用于我的特定场景..不确定它是否适用于.has的所有情况,因为我不知道所有情况. http://jsfiddle.net/8F57r/13/

将Chrome更新为36.0.1985.125后,我在控制台中注意到此警告和错误消息.

警告:

'Range.detach' is now a no-op, as per DOM (http://dom.spec.whatwg.org/#dom-range-detach). 

错误:

Discontiguous selection is not supported.

可以看到:http://rangy.googlecode.com/svn/trunk/demos/cssclassapplier.html

其他javascript/jquery插件(wysihtml5,rangy)也受到影响,任何解决方案？

我在使用 rangy 时遇到了一些问题。

我收到的错误是：

错误：Rangy Serializer 模块中的错误：deserializePosition() 失败：节点“没有索引为 3、5 的子节点”

当我从数据库中提取序列化突出显示并尝试将它们反序列化到网页上时，出现此错误。真正奇怪的是，大多数情况下，亮点被反序列化得很好并显示在页面上，但有时它们会随机消失，我会收到上述错误。

我使用了 chrome javascript 调试器来跟踪问题并

function deserializePosition(serialized, rootNode, doc) {
    if (!rootNode) {
        rootNode = (doc || document).documentElement;
    }
    var parts = serialized.split(":");
    var node = rootNode;
    var nodeIndices = parts[0] ? parts[0].split("/") : [], i = nodeIndices.length, nodeIndex;

    while (i--) {
        nodeIndex = parseInt(nodeIndices[i], 10);
        if (nodeIndex < node.childNodes.length) {
            node = node.childNodes[nodeIndex];
        } else {
            throw module.createError("deserializePosition() failed: node " + dom.inspectNode(node) +
                    " has no child with …

我尝试编写一个带有contenteditable&execCommand的编辑器.在Firefox上一切正常,但在chrome中有'delete'命令错误.

请查看下面的照片:

这是我的代码:

var $obj = $('#myBlockDivId');
var selection = rangy.getSelection();
if (selection.rangeCount > 0) selection.removeAllRanges();
var range = rangy.createRange();
range.selectNode($obj[0]);
selection.addRange(range);
range.select();

当我控制日志:rangy.getSelection().toHtml()==>它是对的

但是当我打电话时:

document.execCommand("delete", null, false);

它在Firefox上很好,但在Chrome上却没有,包装div不会被删除.

我怎样才能解决这个问题？我必须使用execCommand,因为它支持撤消和重做功能.所以,我不能使用jquery或javascript dom选择器来删除div.

(我的英文不好,有人请更清楚地编辑我的问题,非常感谢)

我正在尝试创建一个类应用程序,将选择包装在以下元素中:

<code class="mainClass selector1 selector2">Selected Content</code>

我正在做以下事情:

var Applier = rangy.createClassApplier("mainClass",
{
    elementTagName: "code",
    elementProperties:
    {
        className: [ "selector1", "selector2" ]
    }
});

Applier.toggleSelection();

这产生以下结果:

<code class="mainClass selector1,selector2">Selected Content</code>

创建应用程序的语法是什么,以便它做我想做的事情？

这仅在Firefox中发生。

重要提示：我正在使用rangy.saveSelection（）保存插入符号的位置：

• 单击内容可编辑div时
• 在键盘上
• 将外部html元素（作为节点）添加到内容可编辑div时

我需要通过多种方式不断保存的位置，以便能够在单击时插入html元素（我有一些标签）。

当我单击contentEditable div且div为空时（假设是第一个焦点），除非开始输入，否则看不到插入符号。如果插入符号在末尾，我也看不到它。

另一个怪异的行为是我不能使用箭头在contentEditable div中的文本之间导航。

如果我删除了（始终）保存插入符号位置的功能（在输入时单击等），则插入符号将恢复正常（插入符号可见）。

当我开始保存插入符号的位置时出现问题。显然，我应该进行某种重置或清除操作。但是，据我了解，这些操作似乎适得其反（因为据我了解，它们会破坏保存的插入符号位置）。

内容可编辑div

                <div class="input__boolean input__boolean--no-focus">
                    <div 
                            @keydown.enter.prevent
                            @blur="addPlaceholder"
                            @keyup="saveCursorLocation($event); fixDelete(); clearHtmlElem($event);"
                            @input="updateBooleanInput($event); clearHtmlElem($event);"
                            @paste="pasted"
                            v-on:click="clearPlaceholder(); saveCursorLocation($event);"
                            class="input__boolean-content"
                            ref="divInput"
                            contenteditable="true">Cuvinte cheie, cautare booleana..</div>
                </div>

我的方法/功能

            inputLength($event){
                this.input_length = $event.target.innerText.length;
                if(this.input_length == 0)
                    this.typed = false;
            },
            addPlaceholder(){
                if(this.input_length == 0 && this.typed == false){
                    this.$refs.divInput.innerHTML = 'Cuvinte cheie, cautare booleana..'
                }
            },
            clearPlaceholder(){
                if(this.input_length == 0 && this.typed == false){
                    this.$refs.divInput.innerHTML = '';
                }
            },
            updateBooleanInput($event){
                this.typed = …

在替换 contenteditable div 的 html 之前，我正在使用 rangy 手动将插入符号恢复到以前的位置。

这是将插入符号恢复到先前位置的代码：

 let newText = "I love squares <a href=#> #and </a> circles";
 sel = rangy.getSelection();
 savedSel = sel.saveCharacterRanges(textField[0]);
 textField.html(newText);
 sel.restoreCharacterRanges(textField[0], savedSel);

请注意 | 指示当前插入符号的位置。插入符号将被放回主题标签（#and）后面：

我喜欢正方形#and |

矩形和圆形

但是我想用代码替换最后一行，以便在将插入符号恢复到以前的位置后将插入符号放在下一行：

我喜欢正方形#and

|矩形和圆形