Javascript Tinymce双击“插入新段落”

如果我有两个表格，它们的底部有空白，那么通过创建一个临时段落来将光标放在这个空白处是不可能的

我想在其他两个表之间插入一个新表。如果不直接修改HTML，这是不可能的

是否可以使用，使其工作方式类似于MS word，并在您单击的区域中创建一个空白段落，然后将其替换为表格等，类似于后续插件的工作方式

我目前使用的插件修复了页面底部类似的问题

此外，我正在使用tinymce的jquery版本，如果这能使修复更容易的话

tinymce编辑器中的HTML示例

---

还创建了一个JSFIDLE示例：我希望能够在两个表之间插入额外的内容段落、另一个表、列表等，而无需编辑HTML。

鼠标位置对您没有帮助，因为您不知道编辑器内容是否已滚动

首先，我将向您展示如何使用ondblick

下面是一个帮助函数，用于获取编辑器html元素的段落，以防段落中没有未堆叠在下面或更好的html元素

function table_of_click(node)
{
    while (node)
    {
      if (node.nodeName == 'BODY') { return null; }
      if (node.nodeName == 'TABLE')    { return node; }
      else { node = node.parentNode; }
    }
    return null;
};

下面是捕获双击事件的必要调用。 请注意，此解决方案将在您单击的段落之前添加一个段落。 我想你们的表格都在一段中吧

ed.onDblClick.add(function(ed, evt){


  // get tableof click event
  var table = table_of_click(evt.target);

  // if the click has not been inside a table return (nothing to do)
  if (!table) return;

  $(table).before("<p id='new_p'><br></p>");
  ed.selection.select( $(ed.getBody()).find('#new_p').get(0) );

  $('.new_p:first').remove();
  evt.preventDefault();
  evt.stopPropagation();
  return false;
});

---

有一种方法可以将插入符号文本光标位置放入文本中 这只是GetCareTrement的一个函数

现在我们需要在iframe content\u ifr中捕获tinymce容器的主体 iframe:document.getElementByIdcontent\u ifr tinymce的主体：…contentDocument.getElementByIdtinymce

使用jquery，我们将侦听dblclick事件： .dblclickfunctionevent{} 找到插入符号并在其位置上注入元素。 substr0，position++html.substrposition 也就是说，从开始到位置的所有文本、p元素以及从位置到结束的文本

整个代码如下所示：

var editor = document.getElementById("content_ifr").contentDocument.getElementById("tinymce");

$(editor).dblclick(function(event){
    var position = getCaret(this);
    this.innerHTML = this.innerHTML.substr(0,position)+"<p></p>"+this.innerHTML.substr(position);
}

---

这应该可以完成任务

100%确定你的意思：你能以html代码的形式向我展示你的编辑器的相关内容，直到你想双击的时候吗？不，这需要是有效的html，这样表就永远不会在p中。我相信您在图像/表格中也会遇到类似的问题。无法在图像/表格之间插入内容。您的示例演示了如何使用HTML插入表格，尽管我不想自动插入任何内容。只把光标放在空白处，必须是一个空段落，这样他们就可以编辑这个，因为他们想，我想我知道你想要什么-我会更新我的答案。顺便说一句，表格可以放在段落内，这取决于以下内容的定义：

var editor = document.getElementById("content_ifr").contentDocument.getElementById("tinymce");

$(editor).dblclick(function(event){
    var position = getCaret(this);
    this.innerHTML = this.innerHTML.substr(0,position)+"<p></p>"+this.innerHTML.substr(position);
}