在WordPress插件中调用TinyMCE

有没有办法将TinyMCE添加到我自己的WordPress插件中?

我在我的后端脚本中有一个textarea,并希望将此区域变成TinyMCE所见即所得的可编辑字段。 有没有办法做到这一点?

wysiwyg演示截图

此代码不适用于我:

<?php wp_tiny_mce(false,array("editor_selector" => "test")); ?> <textarea class="test" id="test" name="test"></textarea> 

它显示的JavaScript错误

 f is undefined 

Firebug截图: TinyMCE错误

这也没有工作:

 <textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea> 

这在使用wp_editor()函数的WordPress 3.3中更容易。

我正在开发一个将TinyMCE实例添加到主题选项页面的插件。 以下是它的样子:

 // Add TinyMCE visual editor wp_editor( $content, $id ); 

其中$ content是存储的内容, $ id是字段的名称。 也可以通过选项来定制TinyMCEfunction,查看WordPress Codex了解更多细节。

卡姆登已经回答了这个问题,但万一有人需要完整的代码…一定要挂在admin_head,挂接到admin_enqueue_scripts将导致它加载之前其他脚本,如jQuery,所以它不会工作。

 add_action("admin_head","load_custom_wp_tiny_mce"); function load_custom_wp_tiny_mce() { if (function_exists('wp_tiny_mce')) { add_filter('teeny_mce_before_init', create_function('$a', ' $a["theme"] = "advanced"; $a["skin"] = "wp_theme"; $a["height"] = "200"; $a["width"] = "800"; $a["onpageload"] = ""; $a["mode"] = "exact"; $a["elements"] = "intro"; $a["editor_selector"] = "mceEditor"; $a["plugins"] = "safari,inlinepopups,spellchecker"; $a["forced_root_block"] = false; $a["force_br_newlines"] = true; $a["force_p_newlines"] = false; $a["convert_newlines_to_brs"] = true; return $a;')); wp_tiny_mce(true); } } 

然后在你的模板的某个地方插入一个常规的textarea:

 <textarea id="intro"></textarea> 

下面的例子适用于我。 只要确保使用你想在$ a [“elements”]variables中select的textarea的id。

假设你有一个id为'intro'的textarea:

 // attach the tiny mce editor to this textarea if (function_exists('wp_tiny_mce')) { add_filter('teeny_mce_before_init', create_function('$a', ' $a["theme"] = "advanced"; $a["skin"] = "wp_theme"; $a["height"] = "200"; $a["width"] = "800"; $a["onpageload"] = ""; $a["mode"] = "exact"; $a["elements"] = "intro"; $a["editor_selector"] = "mceEditor"; $a["plugins"] = "safari,inlinepopups,spellchecker"; $a["forced_root_block"] = false; $a["force_br_newlines"] = true; $a["force_p_newlines"] = false; $a["convert_newlines_to_brs"] = true; return $a;')); wp_tiny_mce(true); } 

?>

这个微小的mce函数wp_tiny_mce现在被取消了。 对于最新的WordPress,你想使用wp_editor

 $initial_data='What you want to appear in the text box initially'; $settings = array( 'quicktags' => array('buttons' => 'em,strong,link',), 'text_area_name'=>'extra_content',//name you want for the textarea 'quicktags' => true, 'tinymce' => true ); $id = 'editor-test';//has to be lower case wp_editor($initial_data,$id,$settings); 

有关更多说明,请参阅wordpress中的文档

http://codex.wordpress.org/Function_Reference/wp_editor

(来自这里和那里的指南),以下是我如何设法使wordpress 3.0.5的工作:

 <?php add_action("admin_print_scripts", "js_libs"); function js_libs() { wp_enqueue_script('tiny_mce'); } wp_tiny_mce( false , // true makes the editor "teeny" array( "editor_selector" => "tinymce_data" ) ); ?> <script type="text/javascript"> jQuery(document).ready(function($) { $('a.toggleVisual').click(function() { console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data')); }); $('a.toggleHTML').click(function() { console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data')); }); }); </script> <form method="post" action=""> <ul> <li> <span id="submit"><input class="button" type="submit"></span> <p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p> </li> <li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li> </ul> </form> 

我有一个类似的问题,并且class="theEditor"也不帮助我(起初)。 我使用的是一个不包含默认编辑器的自定义文章types(即supports参数不包括'editor' )。

这意味着WordPress不包括TinyMCE代码。 一旦我添加

 add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 ); 

到我的functions.php(基于the_editor template.php中的the_editor函数中的代码),它工作正常( class="theEditor" )。

经testing并在wordpress 3.3.1上工作

添加到函数或插件文件。

 <?php add_filter('admin_head','ShowTinyMCE'); function ShowTinyMCE() { // conditions here wp_enqueue_script( 'common' ); wp_enqueue_script( 'jquery-color' ); wp_print_scripts('editor'); if (function_exists('add_thickbox')) add_thickbox(); wp_print_scripts('media-upload'); if (function_exists('wp_tiny_mce')) wp_tiny_mce(); wp_admin_css(); wp_enqueue_script('utils'); do_action("admin_print_styles-post-php"); do_action('admin_print_styles'); } ?> 

用于添加新内容

 <?php the_editor($id='content');?> 

编辑我的内容

 <?php the_editor($mySavedContent); ?> 

这将包括在插件或模板文件中生成一个tinyMCE textarea所需的整个脚本/ css和代码。

希望这可以帮助..

中号

我有这个麻烦。 经过一整天的search,并尝试了几十个代码示例,我无法获得Wordpress主题选项来将MCE值保存到数据库。 我尝试了一切,jQuery的答案,隐藏的领域等等等等。这些都不会为我工作,可能是因为我错过了某个步骤。

最后我发现这个网页: http : //wptheming.com/options-framework-theme/

从Github下载并按指示安装(简单)。 安装完成后,主题选项中的最后一个选项卡将具有MCE编辑器。 input一些testing段落。 现在打开下载的index.php文件,查看如何在页面中包含每一个东西的例子。 例如,我打开footer.php并添加一些代码。

我需要做的唯一编辑是:

 <?php $ft = of_get_option('example_editor', 'no entry'); $format_ft = wpautop( $ft, false ); echo ($format_ft); ?> 

WordPress中的函数wpautop()添加了段落标签,因为它们不会保存在wp数据库中。 我把这段代码放在页脚中显示MCE的内容。