可编辑div（dartlang）中的插入符位置 [英] caret position in an editable div (dartlang)

问题描述

我尝试在可编辑的div中找到插入位置。

我尝试同化这个：
可编辑Div插入点位置

但它不工作。 / p>

我很乐意提供任何创意。

提前感谢

一些代码段

HTML

b $ b

 < a on-click ={{chooseMenu}}which-menu =1>菜单1< / a> ; 
  

Dart

< pre class =lang-dart prettyprint-override> void chooseMenu（Event event，var detail，var target）{

event.preventDefault
event.stopPropagation（）;

选择sel;
范围范围;

sel = window.getSelection（）;

if（sel！= null）{
range = sel.getRangeAt（0）;
range.collapse（false）;
}

currentSubMenu = int.parse（target.attributes ['which-menu']）;
}


解决方案

。

引用的SO问题的其他代码可能支持其他浏览器。
Dart通常生成在所有支持的浏览器中工作的JS代码。
如果生成的JS在您想要支持的浏览器中正常工作，您必须测试自己。

EDIT

每当更改时我们存储选择。也许有更好的事件，但我找不到一个。
但它对我工作得很好。
我们在之前存储的选择中插入新节点。

 通过getRange，insertNodeAfterSelection可以访问
 DivElement可编辑; 
范围范围; 
 
 //存储对我们的contenteditable元素的引用
 editable =（document.querySelector（'＃editable'）as DivElement）; 
 
 //订阅选择更改事件
 document.onSelectionChange.listen（getRange）; 
 
 
 void insertNodeAfterSelection（Node node）{
 range.collapse（false）; 
 range.insertNode（node）; 
} 
 
 void getRange（Event e）{
 if（document.activeElement！= editable）{//在我们的contenteditable中保存选择更改
 return; 
} 
 print（e）; 
 Selection sel; 
 
 sel = window.getSelection（）; 
 if（sel！= null）{
 range = sel.getRangeAt（0）; 
} 
} 
  

您必须决定自己在哪里放这些代码部分。我添加了一些注释作为支持。

EDIT

使用mousedown事件而不是点击应该有助于解决这个问题< br>
在与jQuery UI对话框和文本输入交互时保持contenteditable中的文本选择

I try to find the caret position in an editable div. Also it should be nice to get the selected text in this div.

I try to assimilate this: Editable Div Caret Position

But it dosen’t work.

I'll be happy to give any Idea.

Thanks in advance

Some code snippet

HTML

<a on-click="{{chooseMenu}}" which-menu="1">Menu 1</a>

Dart

  void chooseMenu(Event event, var detail, var target) {

    event.preventDefault();
    event.stopPropagation();

    Selection sel;
    Range range;

    sel = window.getSelection();

    if(sel != null) {
      range = sel.getRangeAt(0);
      range.collapse(false);
    }

    currentSubMenu = int.parse(target.attributes['which-menu']);
  }

解决方案

This worked for me in Dartium.

The other code from the referenced SO question is probably to support other browsers. Dart usually generates JS code that works in all supported browsers. You have to test yourself if the generated JS really works in the browsers you want to support.

EDIT

We store the selection whenever it changes. Maybe there are better events but I couldn't find one. But it worked fine for me. We insert the new node at the previously stored selection.

// must be accessible by getRange, insertNodeAfterSelection 
DivElement editable;
Range range;

// store reference to our contenteditable element
editable = (document.querySelector('#editable') as DivElement);

// subscribe selection change events
document.onSelectionChange.listen(getRange);


void insertNodeAfterSelection(Node node) {
  range.collapse(false);
  range.insertNode(node);
}

void getRange(Event e) {
  if(document.activeElement != editable) { // save only selection changes on our contenteditable
    return;
  }
  print(e);
  Selection sel;

  sel = window.getSelection();
  if(sel != null) {
    range = sel.getRangeAt(0);
  }
}

You have to decide yourself where you put those code parts. I added some comments as support.

EDIT
using the mousedown event instead of click should help around this issue
Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input

这篇关于可编辑div（dartlang）中的插入符位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！