相关疑难解决方法(0)

我需要contenteditable像在Gmail备注小部件上一样将插入符移动到节点的末尾.

我在StackOverflow上读取了线程,但这些解决方案基于使用输入,它们不适用于contenteditable元素.

我想强调(应用css)某个文本范围,由其开始和结束位置表示.这比看起来更难以实现,因为文本中可能还有其他标记需要忽略.

例:

<div>abcd<em>efg</em>hij</div>

highlight(2, 6)需要突出显示"cdef"不删除标签.

我已经尝试过使用TextRange对象,但没有成功.

提前致谢!

当您使用Chrome 打开此页面(请参阅实时演示)时:

<span id="myspan" contenteditable=true></span>

CSS:

#myspan { border: 0; outline: 0;}

JS:

$(myspan).focus();

在contenteditable span具有焦点(您可以开始写东西,你会看到,它已经有了集中),但我们没有看到" I"编辑光标.

如何使这个光标显示？(备注:outline:0需要,以及即使没有空白,跨度为空的事实).

注意:使用Firefox时,将显示光标.

我正在开发一个应用程序,当用户在特定文本框上按CMD + LEFT时,我需要进行一些后处理.我需要在浏览器的默认功能之后执行此操作(即,在将插入符号放在当前物理行中的第一个位置之后).

问题keyup是没有被触发左边的键(或与此有关的任何键),只要CMD键被按下.

我用CTRL和SHIFT键尝试了这个,发现keyup按预期触发了辅助键.因此,如果您执行CTRL + LEFT然后释放LEFT然后释放CTRL,则总共有4个事件,2个keydowns和2个keyup.但是对于CMD密钥,我们得到2个keydowns,但只有一个keyup事件(当我们最后发布它时,CMD密钥本身就是一个).

我用SHIFT键尝试了这个,发现keyup按照预期的次序触发.所以,如果你SHIFT +左键,然后松开左键,然后松开SHIFT,你在总共4个事件,2个keydowns和2个keyups.但是对于CMD密钥,我们得到2个keydowns,但只有一个keyup事件(当我们最后发布它时,CMD密钥本身就是一个).

会是什么呢？keyup当CMD关闭时,有没有办法可以触发LEFT键(或任何键)？

我正在尝试使用OSX 10.9.5上的最新Google Chrome.Firefox上的行为也完全相同.所以这不是Chrome问题.

演示:http://jsfiddle.net/techfoobar/xu0o11nh/4/

实质上:

$('#mytextbox')

    // this gets correctly triggered for the meta key as well as the secondary key
    // when you press CMD and LEFT in sequence, you get two lines in the console one for 
    // the CMD key and one for the LEFT key
    .keydown(function(_e) {
        console.log('Keydown: ' + _e.keyCode);
    })

    // however, if …

我希望能够将当前鼠标位置转换为范围,特别是在CKEditor中.

CKEditor提供了一个API,用于根据范围设置光标:

var ranges = new CKEDITOR.dom.range( editor.document );
editor.getSelection().selectRanges( [ ranges ] );

由于CKEditor提供了这个API,因此可以通过删除此要求来简化问题,并且只是找到一种方法来从包含各种HTML元素的div上的鼠标坐标生成范围.

但是,这与将鼠标坐标转换为textarea中的光标位置不同,因为textareas具有固定的列宽和行高,CKEditor通过iframe呈现HTML.

基于此,看起来该范围可以应用于元素.

你如何计算出最接近当前鼠标位置的开始/结束范围？

编辑:如何使用ckeditor API在mouseup事件上选择范围的示例.

editor.document.on('mouseup', function(e) {
    this.focus();
    var node = e.data.$.target;

    var range = new CKEDITOR.dom.range( this.document );
    range.setStart(new CKEDITOR.dom.node(node), 0);
    range.collapse();

    var ranges = [];
    ranges.push(range);
    this.getSelection().selectRanges( ranges );
});

上述示例的问题在于,事件目标节点(e.data.$.target)仅针对HTML,BODY或IMG等节点触发,但不针对文本节点触发.即使它这样做,这些节点也代表不支持将光标设置到该文本块内鼠标位置的文本块.

我有一个令人满意的div,我希望能够让用户插入链接,图像或YouTube视频等内容.目前这就是我所拥有的:

function addLink() {
  var link = $('#url').val();
  $('#editor').focus();
  document.execCommand('createLink', false, link);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Text Editor -->
<div id="editor" contenteditable="true"></div>

<!-- Add Link -->
<input type="text" id="url">
<button onclick="addLink()">Submit</button>

如您所见,用户必须输入单独的文本框才能输入链接地址.因此,当链接添加到编辑器时,它不会添加到指针/插入符所在的位置.

我的问题是如何获取和设置指针/插入符的位置.我已经看到了其他问题,例如设置指针,但是我希望有一个在所有现代浏览器中都支持的解决方案,包括Chrome,Safari,Firefox和IE9 +.

有任何想法吗？谢谢.

编辑:

我发现下面的代码获取位置,但它只根据它所在的行获取位置.例如,如果我有这个(|光标在哪里):

This is some text
And som|e more text

然后我将返回值7,而不是24.

function getPosition() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt) {
            return sel.getRangeAt(0).startOffset;
        }
    }
    return null;
}

我正在使用ReactJS将文本值渲染到contenteditableDOM节点中.例如:

var data = [{
  value: 'Hello '
},{
  value: 'World!'
}];

var component = React.createClass({
  render: function () {
    var pieces = this.props.data.map(function (piece) {
      return (
        <span contentEditable="false">
          <span contentEditable="true">{piece.value}</span>;
        </span>
      );
    });

    return <div contentEditable="true">{pieces}</div>;
  }
});

React.renderComponent(<component data={data} />, someContainer);

导致DOM看起来像这样(出于很多原因):

<div contenteditable="true">
  <span contentEditable="false">
    <span contentEditable="true">Hello </span>;
  </span>
  <span contentEditable="false">
    <span contentEditable="true">World!</span>;
  </span>
</div>

当用户通过这些可编辑跨度进行交互时,例如,从第二个跨距到第一个,我可以通过从第一个模型中删除最后一个字符来更新数据,但我需要以某种方式告诉React将光标定位在第一个结束 span[contenteditable="true"]

我的问题:

在我的.render()函数中,我有一个this.state.caretPosition属性告诉我光标的位置(这只存在于一个组件上). render()应该只返回一个(虚拟)DOM节点.如何告诉ReactJS将插入符号放在返回的DOM节点中的那个位置？

示例:jsbin

我有多个跨度,内容可编辑属性设置为true,如下所示:

<span contentEditable='true'> value</span><span contentEditable='true'> value</span><span contentEditable='true'> value</span>

https://jsfiddle.net/du7g39cz/

问题是当我使用箭头键在span元素中导航时,我无法到达单个跨度的末尾,因为当carret到达最后一个符号时会调用blur事件.

我可以在MS Edge之外的所有浏览器上重现此行为.

我必须注意,我不想只保留一个内容可编辑的父级,因为这很容易让用户删除整个段落,用法是让用户一次只能编辑一个单词.

<div id="editable" contenteditable="true" class="search-input" [textContent]="query" (input)="query=$event.target.textContent" (keyup)="searchClient($event)" (focus)="open()"></div>

这是我的 HTML 代码，并将支持内容可编辑的 DIV。当我按任意键时，将触发 searchClient($event) 方法并设置一些值。我需要设置值的插入符号（光标）结尾并聚焦它。

我尝试了几个例子，但我无法弄清楚 Angular 4 的解决方案。

注意：我尝试了如何在 contenteditable 元素（div）中设置插入符号（光标）位置？得到这个错误SearchComponent.html:6 ERROR TypeError: Failed to execute 'setStart' on 'Range': parameter 1 is not of type 'Node'.

我将如何修改它(如何在contenteditable元素(div)中设置插入符号(光标)？)所以它接受一个数字索引和元素并将光标位置设置为该索引？

例如:如果我有段落:

<p contenteditable="true">This is a paragraph.</p>

我打电话给:

setCaret($(this).get(0), 3)

光标将移动到索引3,如下所示:

Thi|s is a paragraph.

我有这个,但没有运气:

function setCaret(contentEditableElement, index)
{
    var range,selection;
    if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+
    {
        range = document.createRange();//Create a range (a range is a like the selection but invisible)
        range.setStart(contentEditableElement,index);
        range.collapse(true);
        selection = window.getSelection();//get the selection object (allows you to change selection)
        selection.removeAllRanges();//remove any selections already made
        selection.addRange(range);//make the range you have just created the visible selection
    }
    else if(document.selection)//IE 8 and lower
    { …