Contenteditable DIV - 如何确定光标是否在内容的开头或结尾 [英] Contenteditable DIV - how can I determine if the cursor is at the start or end of the content

问题描述

我有一个contenteditable div，它包含典型的wysiwyg编辑器html（粗体，锚点，列表）。

我需要确定当前游标是onKeyDown， div的开始和结束。原因是，根据光标位置和按下的键，我可能需要将此div与前一个div合并在一个空格上，或在输入时创建一个新的以下div。

我一直在摸索着范围，但是当你在元素内部使用html时，事情变得相当复杂。

我是希望我能俯瞰一些简单的解决方案。

有一个相对简单的方法来确定这一点 - 我可以使用像Rangy这样的图书馆。

谢谢！

编辑：我在想这些行：

  
 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）
} 
  

我会遇到任何奇怪的问题有这样的东西？

解决方案

这是怎么回事我最终解决了这个问题。我以前提出的解决方案有时可以工作，但有很多边缘案例，所以我最后考虑了光标之前或之后的文字数量，如果是0个字符，那么我在开始或结束：

  handle_keydown = function（e）{
 //获取当前的cusor位置
 range = window.getSelection（）。 getRangeAt（0）
 //创建一个新的范围来处理光标之前的文本
 pre_range = document.createRange（）; 
 //有这个范围选择可编辑div的全部内容
 pre_range.selectNodeContents（this）; 
 //将此范围的终点设置为游标的起始点
 pre_range.setEnd（range.startContainer，range.startOffset）; 
 //获取此范围的内容（光标前的文本）
 this_text = pre_range.cloneContents（）; 
 //如果文本的长度为0，我们就在div的开头。 
 at_start = this_text.textContent.length === 0; 
 //在游标后冲洗并重复文本，以确定我们是否结束。 
 post_range = document.createRange（）; 
 post_range.selectNodeContents（this）; 
 post_range.setStart（range.endContainer，range.endOffset）; 
 next_text = post_range.cloneContents（）; 
 at_end = next_text.textContent.length === 0; 
} 
  

仍然不完全确定有其他边缘案例，因为我不完全肯定如何单元测试，因为它需要鼠标交互 - 可能有一个图书馆来处理这个地方。

I have a contenteditable div which contains typical wysiwyg editor html (bold, anchors, lists).

I need to determine if the current cursor is, onKeyDown, at the start and at the end of the div. The reason for this is, based on the cursor position, and the key pressed, I might want to merge this div with the previous div on a backspace, or create a new following div on enter.

I've been fiddling around with ranges, but when you're working with html inside the element, things get pretty complicated.

I'm hoping I must be overlooking some simple solution.

Is there a relatively simple way to determine this - I'm open to using a library like Rangy.

Thanks!

Edit: I'm thinking something along these lines:

$('.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)
}

Am I going to run into any odd issues with something like this?

解决方案

This is how I ended up solving this. My proposed solution above worked sometimes but there were way to many edge cases, so I ended up considering how much text was before or after the cursor, and if that was 0 characters, then I was at the start or end:

handle_keydown = function(e) {
  // Get the current cusor position
  range = window.getSelection().getRangeAt(0)
  // Create a new range to deal with text before the cursor
  pre_range = document.createRange();
  // Have this range select the entire contents of the editable div
  pre_range.selectNodeContents(this);
  // Set the end point of this range to the start point of the cursor
  pre_range.setEnd(range.startContainer, range.startOffset);
  // Fetch the contents of this range (text before the cursor)
  this_text = pre_range.cloneContents();
  // If the text's length is 0, we're at the start of the div.
  at_start = this_text.textContent.length === 0;
  // Rinse and repeat for text after the cursor to determine if we're at the end.
  post_range = document.createRange();
  post_range.selectNodeContents(this);
  post_range.setStart(range.endContainer, range.endOffset);
  next_text = post_range.cloneContents();
  at_end = next_text.textContent.length === 0;
}

Still not entirely sure there are any other edge cases, as I'm not entirely sure how to unit test this, since it requires mouse interaction - there's probably a library to deal with this somewhere.

这篇关于Contenteditable DIV - 如何确定光标是否在内容的开头或结尾的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！