獲取WP Tinymce的內容

我想寫一個Wordpress插件。我會在WP的Tinymce編輯器中看到數字。基本上，這是該計算您的文章長，給你這個消息在元框獲取WP Tinymce的內容

您的文章一個字計數器有450個字

我剛纔的問題是從TinyMCE的通過JavaScript得到的話。這是行不通的：

document.getElementById('content')

TinyMCE的內容的ID是內容。但是這個代碼返回NULL。我找不到Tinymce的有效id名稱。

簡而言之，其他所有代碼都準備好了，只是我無法從Wordpress的所見即所得編輯器獲取單詞。

謝謝。

來源

2011-04-22 Eray

嘗試：

tinymce.activeEditor.getContent();

或

tinymce.editors.content.getContent();

其中，「內容」是你的textarea的ID。

同樣，如果你想要得到的只是所選擇的（高亮顯示）在TinyMCE的文本區域的文字，你會怎麼做：

tinymce.activeEditor.selection.getContent();

完整的API是在這裏：http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor

TinyMCE的同時也提供了很多您可以綁定的事件，特別是在您的案例中，keyup,keydown和keypressed事件。

一定要在TinyMCE加載到頁面上之後調用這個東西。

來源

2011-04-30 18:54:38

工作完美！我不敢相信這很簡單。 – 2012-01-21 04:09:45

正如他在下面的答案中提到的那樣，這些解決方案不適用於所有定製編輯 - 尤其是如果您在ID中使用連字符。雖然這不是一個簡單的問題，只是JavaScript的工作方式，它可能會給你一些麻煩。 Savitas的答案是使用「編輯器」作爲數組，而不是：'tinymce.editors ['content_id']。getContent（）;' – 2013-09-06 18:50:34

我記得微小的MCE從ajax動態地加載內容，所以也許你的document.getElementById('content')試圖讓那個元素太早。

我認爲你有2種方法來解決這個問題：

1）等待AJAX事件completition，使用事件偵聽器，之後獲得元素和它的文本。

2）使用tinyMce函數獲取文本區域的內容。在這裏，你可能會發現一些有用的提示： http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE

來源

2011-04-22 23:08:43

謝謝曼努埃爾，現在我試試吧:) – Eray 2011-04-30 16:24:50

接受的答案沒有工作對我而且對一個頁面上多個編輯我必須通過編輯ID來訪問它，所以下面爲我工作

tinymce.editors['content_id'].getContent();

。

來源

2012-08-21 07:34:39 savitas

這裏是一個例子。編輯器下面的文本將被更新，無論是在Visual或HTML模式下發生的鍵入。

WP tinyMCE onKeyUp

可視模式事件中的PHP文件：

function my_tiny_mce_before_init($init) { 
    $init['setup'] = "function(ed) { ed.onKeyUp.add(function(ed, e) { repeater(e); }); }"; 
    return $init; 
} 
add_filter('tiny_mce_before_init', 'my_tiny_mce_before_init');

HTML模式事件在javascript文件：

jQuery(document).ready(function($) { 

    $('<div id=look-at-it></div>').insertAfter('#postbox-container-1'); 

    $('#content').on('keyup', function(e) { 
     repeater(e); 
    }); 
}); 


var repeater = function (e) { 
    var targetId = e.target.id; 
    var text = ''; 

    switch (targetId) { 

     case 'content': 
      text = jQuery('#content').val(); 
      break; 

     case 'tinymce': 
      if (tinymce.activeEditor) 
       text = tinymce.activeEditor.getContent(); 
      break; 
    } 

    jQuery('#look-at-it').html(text); 
}

測試上：

的WordPress 3.4.2

來源

2012-11-25 20:46:22 NaMarPi

這爲我工作：

if (jQuery("#wp-text-wrap").hasClass("tmce-active")){ 
    text1 = tinyMCE.activeEditor.getContent({ format : 'html' }); 
}else{ 
    text1 = jQuery('[name="text"]').val();

凡文本是對的ID TinyMCE的編輯

來源

2017-03-23 06:26:44

傳遞param格式：html，這意味着我得到了實際的html - 而不是逃脫<p> – zak 2018-01-18 07:08:08

這是在我測試的每種情況下似乎都適用於我的那個。無論我們從文本模式還是以可視模式開始，並且無論如何改變模式並在此之後添加更多內容。

if (tinyMCE.editors['id-of-your-editor']) { 
    tinyMCE.editors['id-of-your-editor'].save(); 
    tinyMCE.editors['id-of-your-editor'].load(); 
    var your_content = tinyMCE.editors['id-of-your-editor'].getContent(); 
} else if (document.getElementById('id-of-your-editor')) { 
    var your_content = document.getElementById('id-of-your-editor').value; 
} else { 
    alert ('Error'); 
}

來源

2017-04-08 07:00:48 Nikolay

獲取WP Tinymce的內容

回答

相關問題