javascript - CKEditor 获取同一行的前面文本

Question

我使用 CKEditor 的实例，并且能够在 CKEditor 中的光标处插入文本。我希望能够抓取光标左侧到行首的所有文本。

我尝试查找光标的 X,y 坐标，但没有帮助。我相信使用 CKEDITOR 的所有工具都可以做到这一点，但我一直无法弄清楚应该一起使用哪些工具才能使其发挥作用。

var theEditor = CKEDITOR.instances.editorFull;
sel = theEditor.getSelection();
obj = sel.getStartElement().$;
range = theEditor.getSelection().getRanges();
container = range[0].startContainer.$;
textlen = typeof obj.textContent === "undefined" ? obj.innerText.length : obj.textContent.length;
offset = range[0].startOffset;
if(container.nodeType === 3) {
  while (container.previousSibling) {
container = container.previousSibling;
if(container.length) {
    offset += container.length;
}else{
offset += container.textContent ? container.textContent.length : container.innerText.length;
    }
  }
}
var pct = textlen > 0 ? offset / textlen : 0;
cursor = Math.floor(obj.offsetHeight * pct);
while (obj.offsetParent) {
cursor += obj.offsetTop;
obj = obj.offsetParent;
}
cursor += obj.offsetTop;
alert(cursor);

这是我尝试找出光标所在位置并且它有效，但我不太确定我在警报中获得了什么信息，所以它对我来说没有用。

我想要的是这个假设。在下面的文本中使用 |作为光标，这可以在我的 CDEditor 实例中找到:

      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ex nunc,      
 tincidunt id |arcu in, semper volutpat nulla. Nunc efficitur egestas magna 
 vitae consequat. 

注意|在“id |arcu”中。我希望能够根据光标位置抓取文本“tincidunt id”。我不希望它从该文本上方的行末尾获取任何内容。基本上，停在自动换行处。

有什么想法吗？谢谢。

艾伦

Answer 1

这是一个非常棘手的术语“线”。如果编辑器的几何形状发生变化(调整大小)并且文本在某个不同的点换行怎么办？如果选择的是表格单元格，那么行是否等于表格行呢？如果 <p> 会怎么样？被 <br> 分割还有2个“虚拟段落”？

HTML 中没有“行”这样的东西。有元素、内联元素(如 <span> 或 <strong> )和 block 元素(如 <p> 或 <table> )。要获取从最接近的祖先 block 的开头到插入符号位置的 HTML 内容，您需要做的是:

var e = CKEDITOR.instances.editor1;
var r = e.getSelection().getRanges()[ 0 ];

r.collapse( 1 );
r.setStartAt( ( r.startPath().block || r.startPath().blockLimit ).getFirst(), CKEDITOR.POSITION_AFTER_START );

var docFr = r.cloneContents();

console.log( docFr.getHtml() );
console.log( docFr.$.textContent );