相关疑难解决方法(0)

Contenteditable显示最后插入的html元素

我使用一个contenteditable div作为输入字段来键入一些文本,并通过该文本中的按钮(小html图片)插入图标.

只要文本比可满足的字段更窄,就可以了.

一旦文本比字段长(因此它部分隐藏):

当我输入一个文字字符时,一切都很好,按下键后会自动显示最后一个字符,这样你就可以随时看到你输入的内容了.但是当我通过按钮输入一个图标时,图标就可以了,但它是隐藏的,因为字段内容不会移动以使新输入的图标可见,直到我输入另一个文本字符.

对此的任何解决方案,以便输入的最后一个元素(文本或html)始终对用户可见?

function pasteIcon(html) {
  var sel, range;
  if (window.getSelection) {
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
      range = sel.getRangeAt(0);
      range.deleteContents();
      var el = document.createElement("div");
      el.innerHTML = html;
      var frag = document.createDocumentFragment(),
        node, lastNode;
      while ((node = el.firstChild)) {
        lastNode = frag.appendChild(node);
      }
      range.insertNode(frag);
      if (lastNode) {
        range = range.cloneRange();
        range.setStartAfter(lastNode);
        range.collapse(true);
        sel.removeAllRanges();
        sel.addRange(range);
      }
    }
  } else if (document.selection && document.selection.type != "Control") {
    document.selection.createRange().pasteIcon(html);
  }
}

$(document).ready(function() {
  $('.buttOn').click(function() {
    $('.contEd').focus();
    pasteIcon('<img …
Run Code Online (Sandbox Code Playgroud)

html css jquery contenteditable

7
推荐指数
1
解决办法
385
查看次数

在一个可信的div中,可以使用浏览器的撤消撤消`range.insertNode`吗?

我正在研究一个contenteditablediv来制作一个简单的RichText-Editor.我的要求之一是能够在按钮事件上的光标位置插入html块.

我可以用得到的那部分工作正常range,selection,range.insertNode(nodeHTML)range.pasteHTML(nodeHTML)基于浏览器.但我无法得到两件事,理想情况下我想拥有

  1. 要能够撤消插入的节点,请使用浏览器的撤消.不知何故,浏览器忽略了上述操作.
  2. 将光标移动到插入节点的末尾.这样用户就可以开始写作了

我知道我可以使用许多可用的编辑器,这样做非常好,但如果我得到这个,我就不必这样做了.欢迎任何帮助甚至建议.

谢谢.

javascript undo contenteditable rich-text-editor

6
推荐指数
1
解决办法
1540
查看次数

使用execCommand设置锚名称

我知道如何<a />使用如下href属性设置标记contenteditable:

execCommand("CreateLink", false, "#jumpmark");
Run Code Online (Sandbox Code Playgroud)

这将导致

<a href="#jumpmark">selection</a>
Run Code Online (Sandbox Code Playgroud)

但是我无法弄清楚如何设置锚name而不是href.
这是我想要的结果:

<a name="jumpmark">selection</a>
Run Code Online (Sandbox Code Playgroud)

谁能帮我?

附注:我使用jQuery和Rangy作为库,但我更喜欢直接使用execCommand的解决方案.

更新:这是一个jsfiddle:http://jsfiddle.net/fjYHr/选择一些文本,然后单击按钮.我想要的只是按下按钮,插入一个名称属性设置而不是href的链接.

javascript jquery contenteditable execcommand rangy

6
推荐指数
1
解决办法
2526
查看次数

在选择之前和之后插入文本以满足要求

有没有办法在一个contenteditable div中的所选文本之前和之后插入类似于bbcode的文本?我已经看到了textarea的许多答案,但代码不适用于contenteditable div.不需要IE支持.

javascript contenteditable

4
推荐指数
1
解决办法
3619
查看次数