Question

我正在使用Medium.js编辑器脚本来帮助contenteditable div。

但我也希望更好地添加图像，更像是Medium.js本身。

目前，我正在使用此函数在当前光标点插入节点：

function insertImageAtCursor(text) {
    var sel, range, html;
    sel = window.getSelection();
    range = sel.getRangeAt(0);
    range.deleteContents();

    var descriptionNode = document.createElement("img");
    descriptionNode.className = "img";
    descriptionNode.src = text;

    range.insertNode(descriptionNode);
    range.setStartAfter(descriptionNode);

    sel.removeAllRanges();
    sel.addRange(range);
}

这有效，但是我正面临样式问题，我目前在一个段落中打字，然后插入一个图像我将最终得到如下内容：

<p>
    this is a paragraph and I have inserted a image
    <img src="insertimage.png"/>
</p>

真的，我应该使用figure元素，它会将图像插入当前段落之外。这样，当我添加图片时，它不会被添加到当前p元素中，而是添加到figure元素之后。我不能简单地附加图像，因为我希望用户能够编辑博客文章并能够随时插入图像。

对此有何帮助？已经有一个插件：

但是所需的依赖关系比我想要的更多，我已经有图像上传等工作。只需要更好地插入图像。

Answer 1

您可以将<p>分成两个<p>标记，并在<img>个标记之间添加<p>。这是一个示例代码。这不是没有错误的:)。

http://codepen.io/anon/pen/RaOpbr

function insertImageAtCursor(text) {
    var sel, range, html;
    sel = window.getSelection();
    range = sel.getRangeAt(0);

    var para = getParagraph(range.startContainer);
        range.deleteContents();

    range.setEndAfter(para);

    var newPara = document.createElement("p");
    newPara.innerHTML = range.toString();
    range.deleteContents();

    para.parentElement.appendChild(newPara);
    para.parentElement.insertBefore(para, newPara);

    var descriptionNode = document.createElement("img");
    descriptionNode.className = "img";
    descriptionNode.src = text;

    para.parentElement.insertBefore(descriptionNode, newPara);

    range.setStart(newPara, 0);
    sel.removeAllRanges();
    sel.addRange(range);
}

function getParagraph(node) {
  var para = node;
  while (para.parentElement !== null && (para.tagName == null || para.tagName.toLowerCase() !== 'p')) {

    para = para.parentElement;
  }
  return para;
}

jQuery / Javascript在内容可编辑

1 个答案: