Javascript 在 WordPress 插件中调用 TinyMCE
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2855890/
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
Call TinyMCE in a WordPress plugin
提问by choise
Is there a way to add TinyMCE into my own WordPress plugin?
有没有办法将 TinyMCE 添加到我自己的 WordPress 插件中？
I have a textarea in my back end script and want to make this area into a TinyMCE WYSIWYG editable field. Is there a way to do that?
我的后端脚本中有一个 textarea 并希望将此区域变成 TinyMCE WYSIWYG 可编辑字段。有没有办法做到这一点？
This code does not work for me:
这段代码对我不起作用：
<?php
wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>
It shows the javascript error
它显示了 javascript 错误
f is undefined
Firebug screenshot:
萤火虫截图：
This didn't work either:
这也不起作用：
<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
采纳答案by Kevin Leary
This is much easier to do in WordPress 3.3 using the wp_editor()function.
在 WordPress 3.3 中使用wp_editor()函数更容易做到这一点。
I'm working on a plugin that will add a TinyMCE instance to a theme options page. Here's what it looks like:
我正在开发一个插件，该插件会将 TinyMCE 实例添加到主题选项页面。这是它的样子：
// Add TinyMCE visual editor
wp_editor( $content, $id );
Where $contentis the stored content and $idis the name of the field. Options can also be passed to customize the TinyMCE functionality, check out the WordPress Codex for more details.
其中$content是存储的内容，$id是字段的名称。还可以传递选项来自定义 TinyMCE 功能，查看 WordPress Codex 了解更多详细信息。
回答by Andy
Camden already answered this, but in case somebody needs the full code... Be sure to hook in admin_head, hooking into admin_enqueue_scripts will cause it to load before other scripts, such as jQuery, so it will not work.
卡姆登已经回答了这个问题，但如果有人需要完整的代码...一定要挂钩 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);
}
}
Then somewhere in your template insert a regular textarea:
然后在模板中的某处插入一个常规的 textarea：
<textarea id="intro"></textarea>
回答by Camden Daily
The following example works for me. Just make sure to use the id of the textarea you want to select in the $a["elements"] variable.
下面的例子对我有用。只需确保在 $a["elements"] 变量中使用要选择的文本区域的 ID。
Assuming you have a textarea with the id of 'intro':
假设您有一个 ID 为“介绍”的文本区域：
// 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);
}
?>
?>
回答by Ranjith Siji
The tiny mce function wp_tiny_mce is now depricated. For Latest wordpress you want to use wp_editor
微小的 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);
for more instructions just go through the documentation in wordpress
有关更多说明，请查看 wordpress 中的文档
回答by cregox
Following guides from hereand there(found thanks to this), here's how I've managed to make something work on wordpress 3.0.5 :
遵循这里和那里的指南（多亏了这个），这是我如何设法在 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>
回答by Hobo
I had a similar problem, and class="theEditor"didn't help me either (at first). I was using a custom post type which didn't include the default editor (ie the supportsargument didn't include 'editor').
我有一个类似的问题，class="theEditor"也没有帮助我（起初）。我使用的是不包含默认编辑器的自定义帖子类型（即supports参数不包含'editor'）。
That meant WordPress didn't include the TinyMCE code. Once I added
这意味着 WordPress 不包含 TinyMCE 代码。一旦我添加
add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );
to my functions.php (based on the code in the the_editorfunction in general-template.php) it worked fine (with class="theEditor").
到我的functions.php（基于the_editorgeneral-template.php中函数中的代码）它工作正常（使用class="theEditor"）。
回答by Marty
Tested and working on wordpress 3.3.1
在 wordpress 3.3.1 上测试和工作
add to functions or plugin file.
添加到函数或插件文件。
<?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');
}
?>
for Adding new content..
用于添加新内容..
<?php the_editor($id='content');?>
for editing my content
用于编辑我的内容
<?php the_editor($mySavedContent); ?>
this will include the entire rage of scripts / css and code needed to produce a tinyMCE textarea within either your plugin or template files..
这将包括在您的插件或模板文件中生成 tinyMCE textarea 所需的所有脚本/css 和代码。
hope this helps..
希望这可以帮助..
M
米
回答by Jennifer Michelle
I had quite a bit of trouble with this. After searching all day and trying dozens of code examples, I couldn't get Wordpress theme options to save MCE values to database. I tried everything, the jQuery answers, the hidden fields, etc etc. None of that would work for me, probably because I was missing a step somewhere.
我在这方面遇到了一些麻烦。在搜索了一整天并尝试了数十个代码示例之后，我无法获得 Wordpress 主题选项来将 MCE 值保存到数据库中。我尝试了所有方法，jQuery 答案、隐藏字段等。这些都不适合我，可能是因为我在某个地方遗漏了一步。
Finally I found this page: http://wptheming.com/options-framework-theme/
最后我找到了这个页面：http: //wptheming.com/options-framework-theme/
Download from Github & install as directed (easy). Once installed, the last tab in your theme options has an MCE editor. Enter some test paragraphs. Now open the index.php file in the download to see the examples of how to include each thingy in your page. For example, I open footer.php and add a bit of code.
从 Github 下载并按照指示安装（简单）。安装后，主题选项中的最后一个选项卡有一个 MCE 编辑器。输入一些测试段落。现在打开下载中的 index.php 文件以查看如何在页面中包含每个内容的示例。例如，我打开footer.php 并添加一些代码。
The only edit I needed to make was:
我需要做的唯一编辑是：
<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>
The function wpautop() from Wordpress adds in paragraph tags, since they aren't ever saved in the wp database. I put that code in my footer to display the contents of the MCE.
Wordpress 的 wpautop() 函数添加了段落标签，因为它们从未保存在 wp 数据库中。我将该代码放在页脚中以显示 MCE 的内容。
