3

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

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

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

我目前使用' trailing '插件，它在页面底部修复了这个类似的问题。

我也在使用 jquery 版本的 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我希望能够在两个表之间插​​入额外的内容（段落、另一个表、列表等），而无需编辑 HTML。

4

2 回答 2

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;
});
于 2012-09-27T11:41:06.457 回答
1

有一种方法可以将插入符号（文本光标）位置放入
textarea 中的文本插入符号位置，从一开始就以字符表示，
这只是一个函数getCaret(element);

现在我们需要在 iframe 中捕获 tinymce 容器的主体content_ifr
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);
}

这应该做的工作;）

于 2012-09-27T13:20:42.020 回答