javascript 获取 WP Tinymce 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5759297/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Getting WP Tinymce's Content
提问by Eray
I'm trying to write a Wordpress plugin. I will get counts words which in WP's Tinymce editor. Basically, it's a word counter which counting long of your post and giving you this message in a meta box
我正在尝试编写一个 Wordpress 插件。我会得到 WP 的 Tinymce 编辑器中的单词数。基本上，它是一个字计数器，可以计算您的帖子的长度并在元框中为您提供此消息
Your post has 450 words
您的帖子有 450 个字
My just problem is getting words from Tinymce via javascript. This isn't working :
我唯一的问题是通过 javascript 从 Tinymce 获取单词。这不起作用：
document.getElementById('content')
Tinymce's content's id is content. But this code returning NULL. I couldn't find valid id name for Tinymce.
Tinymce 的内容的 id 是content。但是这段代码返回NULL。我找不到 Tinymce 的有效 ID 名称。
In shortly, other all codes are ready, just i can't get words from Wordpress' WYSIWYG editor.
很快，其他所有代码都准备好了，只是我无法从 Wordpress 的 WYSIWYG 编辑器中获取文字。
Thanks.
谢谢。
回答by Mauvis Ledford
Try:
尝试：
tinymce.activeEditor.getContent();
or
或者
tinymce.editors.content.getContent();
Where "content" is the id of your textarea.
其中“内容”是您的文本区域的 ID。
Similarly, if you wanted to get just the selected (highlighted) text in the TinyMCE text area you would do:
同样，如果您只想在 TinyMCE 文本区域中获取选定（突出显示）的文本，您可以执行以下操作：
tinymce.activeEditor.selection.getContent();
The full API is here: http://tinymce.moxiecode.com/wiki.php/API3:class.tinymce.Editor
完整的 API 在这里：http: //tinymce.moxiecode.com/wiki.php/API3: class.tinymce.Editor
TinyMCE also offers a lot of events you can bind to, particularly in your case the keyup, keydown, and keypressedevents.
TinyMCE 还提供了许多您可以绑定的事件，特别是在您的情况下keyup、keydown和keypressed事件。
Be sure to call this stuff only after TinyMCE has loaded on the page.
确保只有在 TinyMCE 加载到页面后才调用这些东西。
回答by Manuel Bitto
I remember that tiny MCE loads content dynamically from ajax, so maybe your document.getElementById('content')try to get that element too early.
我记得微小的 MCE 从 ajax 动态加载内容，所以也许您 document.getElementById('content')尝试过早地获取该元素。
I think you have 2 ways to solve this problem:
我认为您有两种方法可以解决此问题：
1) wait for the ajax event completition, with an event listener, and after that get the element and its text.
1）等待ajax事件完成，使用事件侦听器，然后获取元素及其文本。
2) use tinyMce function to get the content of a text area. Here you may find some useful tips: http://tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE
2) 使用tinyMce 函数获取文本区域的内容。在这里您可能会找到一些有用的提示：http: //tinymce.moxiecode.com/wiki.php/How-to_load/save_with_Ajax_in_TinyMCE
回答by savitas
Accepted answer did work for me but for multiple editors on one page I have to access it via editor id, so below
接受的答案确实对我有用，但对于一页上的多个编辑器，我必须通过编辑器 ID 访问它，所以在下面
tinymce.editors['content_id'].getContent();
Worked for me.
对我来说有效。
回答by NaMarPi
Here is an example. The text below the editor will be updated whether the keyup occured in Visual or HTML mode.
这是一个例子。无论 keyup 是在 Visual 还是 HTML 模式下发生，编辑器下方的文本都会更新。
Visual modeevent in the php file:
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 modeevent in the javascript file:
javascript 文件中的HTML 模式事件：
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 );
}
Tested on:
测试：
- WordPress 3.4.2
- WordPress 3.4.2
回答by Alfredo Cebrián
This worked for me:
这对我有用：
if (jQuery("#wp-text-wrap").hasClass("tmce-active")){
text1 = tinyMCE.activeEditor.getContent( { format : 'html' } );
}else{
text1 = jQuery('[name="text"]').val();
Where textis the ID of the tinymce editor
其中text是 tinymce 编辑器的 ID
回答by Nikolay
This is the one that seems to work for me in every situation I tested. Regardless if we start off from text mode or in visual mode and regardless of changing the modes and adding more content after that.
在我测试的每种情况下，这似乎都对我有用。无论我们是从文本模式还是视觉模式开始，也无论之后更改模式并添加更多内容。
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' );
}
