Question

如果我有2个表格直接在彼此之下并且有底边，那么通过创建一个临时段落是不可能将光标放在这个间隙中。

E.g我想在另一个之间插入一个新表。如果不直接改变HTML，这是不可能的。

是否可以使用double click，使其与MS字类似，并在您单击的此区域中创建一个空白段落，然后由表等替换，类似于尾随插件的工作方式。

我目前正在使用＆＃39; trailing＆＃39;插件修复了页面底部的类似问题。

此外，我正在使用jitery版本的tinymce，如果这样可以更容易解决这个问题。

tinymce编辑器中的HTML示例;

<table style="margin: 15px 0; width: 100%;">
    <thead>
        <tr>
            <th scope="col">
                Product Name</th>
            <th scope="col">
                Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
    </tbody>
</table>
<table style="margin: 15px 0; width: 100%;">
    <thead>
        <tr>
            <th scope="col">
                Product Name</th>
            <th scope="col">
                Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
        <tr>
            <td>Large product</td>
            <td><a href="http://example.com">Find out more</a></td>
        </tr>
    </tbody>
</table>

还创建了一个带有示例的jsFiddle：http://fiddle.tinymce.com/Sicaab/2我希望能够在2个表之间插入额外的内容（段落，另一个表，列表等），而无需编辑HTML。

Answer 1

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

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

这是一个有用的函数来获取编辑器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;
});

Answer 2

有一种方法可以将插入符号（文本光标）放入文本中 Caret position in textarea, in characters from the start
这只是一个函数getCaret(element);

现在我们需要在iframe content_ifr中捕获tinymce容器的主体 iframe：document.getElementById("content_ifr")
tinymce的身体：...contentDocument.getElementById("tinymce")

使用jquery我们收听dblclick事件：
.dblclick(function(event){})
找到插入符并在其位置上注入<p>元素 html.substr(0,position)+"<p></p>"+html.substr(position)
也就是说，从开始到位置的所有文本，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);
}

这应该可以胜任;）

Tinymce双击插入新段落

2 个答案: