3

2つのテーブルが真下にあり、margin-bottomがある場合、一時的な段落を作成してこのギャップにカーソルを置くことはできません。

たとえば、他の2つの間に新しいテーブルを挿入したい。これは、HTMLを直接変更しないと不可能です。

ダブルクリックを使用してMSWordと同様に機能し、クリックしたこの領域に空白の段落を作成することは可能ですか。これは、後続のプラグインの機能と同様にテーブルなどに置き換えられます。

私は現在、ページの下部にあるこの同様の問題を修正する「末尾の」プラグインを使用しています。

また、これを修正するのが簡単な場合は、tinymceのjqueryバージョンを使用しています。

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を編集せずに、2つのテーブルの間に余分なコンテンツ（段落、別のテーブル、リストなど）を挿入できるようにしたい。

4

2 に答える 2

1

キャレット (テキスト カーソル) の位置を textarea のテキスト
キャレットの位置に取得する方法があります。先頭からの文字では、
これは単なる関数です。getCaret(element);

ここで、iframe 内の tinymce コンテナーの本体をキャプチャする必要がありますcontent_ifr
: 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 に答える
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 に答える