Tinymce雙擊插入新段落

如果我有兩個直接在margin-bottom之下的表格，是不是可以通過創建一個臨時段落來將光標放在這個間隙中。Tinymce雙擊插入新段落

E.g我想在另一個2之間插入一個新表。如果不直接修改HTML，這是不可能的。

是否有可能使用double click，使其與MS詞類似，並在該區域創建一個空白段落，然後將其替換爲類似於尾隨插件的工作表等。

我目前使用'trailing'插件修復了頁面底部的這個類似問題。

此外，我正在使用tinymce的jQuery版本，如果這使得它更容易解決這個問題。

示例HTML內的tinymce編輯器;

<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。

來源

2012-09-23 John Magnolia

是100％肯定你的意思：你能告訴我你的編輯器的relecant內容爲html代碼到你想要雙擊的時間點？ – Thariama

鼠標位置不會幫助你，因爲你不知道編輯器內容是否被滾動。

首先，我會告訴你如何使用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-27 11:41:06 Thariama

沒有這個需要是有效的HTML，所以一個表永遠不會在'p'裏面。我相信你會遇到這個類似的問題與圖像/表，沒有辦法插入之間的東西。 –

您的示例顯示瞭如何插入HTML表格，但我不想自動插入任何內容。只把光標放在一個「空白」（必須是一個空的段落），以便他們可以編輯這個，因爲他們希望 –

好吧，我想我知道你想要什麼 - 我會更新我的答案。順便說一句表可以在一個段落內（取決於有效的定義:)） – Thariama

有一種方式來獲得汽車等（文本光標）的位置到文本
Caret position in textarea, in characters from the start
這僅僅是一個功能getCaret(element);

現在我們需要捕獲TinyMCE的容器身體的iframe 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-27 13:20:42 SparK

Tinymce雙擊插入新段落

回答

相關問題