it-swarm.cn

有没有办法在自定义帖子类型中获得N个WYSIWYG编辑器?

是否有自定义帖子类型的多个WYSIWYG编辑器?例如,如果我有一个2列布局,我想为一列创建一个编辑器,为另一列创建另一个编辑器。

27
Paul Sheldrake

假设您的自定义帖子类型名为Properties,您可以使用与此类似的代码添加该框以保存您的其他tinyMCE编辑器:

function register_meta_boxen() {
    add_meta_box("wysiwyg-editor-2", "Second Column", "second_column_box",
    "properties", "normal", "high");    
}
add_action('admin_menu', 'register_meta_boxen');

wysiwyg-editor-2是元框应用的ID,Second Column是元框所具有的标题,second_column_box是打印出元框的HTML的函数,properties是我们的自定义帖子类型,normal是元框的位置,high指定它应尽可能在页面中显示为高。 (通常低于默认的tinyMCE编辑器)。

然后,将此作为最基本的示例,您必须将tinyMCE编辑器附加到textarea。我们仍然需要定义我们的second_column_box函数,它将打印元框的HTML,这样就可以做到这一点:

function second_column_box() {
    echo <<<EOT
    <script type="text/javascript">
jQuery(document).ready(function() {
    jQuery("#tinymce").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
        tinyMCE.execCommand("mceAddControl", false, "tinymce");
    }
});
</script>
    <textarea id="tinymce" name="tinymce"></textarea>
EOT;
}

有几个问题我不确定如何克服。 tinyMCE编辑器将嵌套在metabox中,这可能并不理想,并且它不具备在HTML和Visual编辑模式之间切换的功能,以及普通帖子编辑器具有的媒体插入命令。切换模式似乎被定义为第一个参数是ID的函数,但它似乎也编码为wp-tinymce脚本。可以使用内置的tinyMCE函数来实现,但是这会在完整的tinyMCE和基本的textarea之间更改textarea,而不需要任何WP HTML插入按钮。

20
nobody

首先: 非常感谢 to @Thomas McDonald for 他的回答 ;我需要弄清楚@Paul Sheldrake问的完全相同的问题,托马斯的代码让我开始朝着正确的方向前进。

不幸的是,我被卡住了因为 我需要将布局从默认 更改为更简单和更小的布局,因为我需要在侧元框中使用TinyMCE。我看起来几乎无处不在的解决方案,特别是在MoxieCode TinyMCE WikiTinyMCE提示和如何论坛 什么也没找到! 1 我发现的所有内容都解释了如何使用tinyMCE.init({...})设置themewidthheight等,但显然你在使用tinyMCE.execCommand("mceAddControl")时不能使用它。

当我在一个页面上遇到文章 多个TinyMCE 3实例时,我感到难过 by Hamilton Chua ,然后他就把它钉了!他的解决方案是在调用tinyMCE.execCommand("mceAddControl")之前分配tinyMCE.settings,例如:

<?php 
$id = "sidebar-content";
$script = <<<EOT
<script type="text/javascript">
jQuery(document).ready(function($) {
    $("#{$id}").addClass("mceEditor");
    if ( typeof( tinyMCE ) == "object" &&
         typeof( tinyMCE.execCommand ) == "function" ) {
      tinyMCE.settings = {
        theme : "advanced",
        mode : "none",
        language : "en",
        height:"200",
        width:"100%",
        theme_advanced_layout_manager : "SimpleLayout",
        theme_advanced_toolbar_location : "top",
        theme_advanced_toolbar_align : "left",
        theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull",
        theme_advanced_buttons2 : "",
        theme_advanced_buttons3 : ""
      };
      tinyMCE.execCommand("mceAddControl", true, "{$id}");
    }
});
</script>
<textarea id="sidebar-content" name="sidebar-content"></textarea>
EOT;

可悲的是,这真的不难,但在我能找到的任何其他地方都没有记录。发现几乎没有其他人遇到过这个问题,真是太神奇了。

所以无论如何,上面的代码生成了以下第二个TinyMCE,其格式/布局完全符合我的客户所需:

Multiple TinyMCE TextAreas in the WordPress 3.0 Admin Editor 
(来源: mikeschinkel.com

因此,如果您使用上面的@Thomas McDonald代码,您会发现您需要修改布局,请务必查看Hamilton Chua的精彩文章(感谢Ham!)

P.S.如果你做了一些甚至稍微错误的事情,那么TinyMCE根本就不会显示出来。例如,在我的情况下,我首先使用theme: "simple"而我什么都没有,我花了一个多小时才意识到我只需要使用theme: "advanced"。因此,如果您发现TinyMCE不适合您,请务必尝试更改内容,您可能遇到类似的问题。 (顺便说一句,我还没有尝试过任何其他主题,也没有探索其他可用的主题;如果你发现其他主题可行,请在下面发表评论。)

脚注

1 非常令人沮丧!用WordPress答案一个多月后,我现在期待找到我所有问题的答案,与这里的质量水平相同,而在其他地方,我通常会发现失望!

18
MikeSchinkel

由于我发现这篇文章是谷歌的第一个结果,我只想评论WP现在提供了一个处理这类任务的函数。

add_meta_box函数中,添加以下代码 - >

wp_editor( $content, $editor_id, $settings = array() );

无论您想在哪里添加TinyMCE编辑器

参考: wp_editor

1
ejhost

我只是通过将“theEditor”作为类属性添加到textarea来实现它:

<div style="background: #FFF; border: 1px solid #CCC;"><textarea id="my_details_field" name="my_details" class="theEditor" rows="20" style="width: 100%;"><?=get_post_meta($post->ID, 'my_details', TRUE)?></textarea></div>
0
Markus René Einicher

默认编辑器tinymce由wp-admin/includes/post.php中的一个函数加载,名为wp_tiny_mce(); 查看源代码 在第1350行。第1478行有一系列设置。其中一个选项显然指定了应用javascript编辑器的textarea选择器。我正在阅读 这篇由Keighl撰写的帖子 在他的博客上指出了我。阅读文章,也许有一种方法可以在管理部分插件中调用wp_tiny_mce()并将其应用到您创建的第二个文本区域。

0
kevtrout