将多个所见即所得编辑器添加到自定义帖子类型

时间:2014-03-15 作者:Kent Miller

我创建了一个自定义帖子类型,并找到了一个很好的代码,可以添加所见即所得编辑器。我完全可以让这个编辑器显示在我的帖子类型后端。但我不知道如何添加另一个编辑器,如何在同一个单曲中显示第二个编辑器的内容。php文件,我将在其中显示第一个文件的内容。让我先写下代码:

下面是添加所见即所得编辑器(functions.php)的实现代码:

define(\'WYSIWYG_META_BOX_ID\', \'my-editor\');
define(\'WYSIWYG_EDITOR_ID\', \'myeditor\'); //Important for CSS that this is different
define(\'WYSIWYG_META_KEY\', \'extra-content\');

add_action(\'admin_init\', \'wysiwyg_register_meta_box\');
function wysiwyg_register_meta_box(){
add_meta_box(WYSIWYG_META_BOX_ID, __(\'Display title\', \'wysiwyg\'), \'wysiwyg_render_meta_box\', \'artists\');
}

function wysiwyg_render_meta_box(){

global $post;

$meta_box_id = WYSIWYG_META_BOX_ID;
$editor_id = WYSIWYG_EDITOR_ID;

//Add CSS & jQuery goodness to make this work like the original WYSIWYG
echo "
        <style type=\'text/css\'>
                #$meta_box_id #edButtonHTML, #$meta_box_id #edButtonPreview {background-color: #F1F1F1; border-color: #DFDFDF #DFDFDF #CCC; color: #999;}
                #$editor_id{width:100%;}
                #$meta_box_id #editorcontainer{background:#fff !important;}
                #$meta_box_id #$editor_id_fullscreen{display:none;}
        </style>

        <script type=\'text/javascript\'>
                jQuery(function($){
                        $(\'#$meta_box_id #editor-toolbar > a\').click(function(){
                                $(\'#$meta_box_id #editor-toolbar > a\').removeClass(\'active\');
                                $(this).addClass(\'active\');
                        });

                        if($(\'#$meta_box_id #edButtonPreview\').hasClass(\'active\')){
                                $(\'#$meta_box_id #ed_toolbar\').hide();
                        }

                        $(\'#$meta_box_id #edButtonPreview\').click(function(){
                                $(\'#$meta_box_id #ed_toolbar\').hide();
                        });

                        $(\'#$meta_box_id #edButtonHTML\').click(function(){
                                $(\'#$meta_box_id #ed_toolbar\').show();
                        });

        //Tell the uploader to insert content into the correct WYSIWYG editor
        $(\'#media-buttons a\').bind(\'click\', function(){
            var customEditor = $(this).parents(\'#$meta_box_id\');
            if(customEditor.length > 0){
                edCanvas = document.getElementById(\'$editor_id\');
            }
            else{
                edCanvas = document.getElementById(\'content\');
            }
        });
                });
        </script>
";

//Create The Editor
$content = get_post_meta($post->ID, WYSIWYG_META_KEY, true);
the_editor($content, $editor_id);

//Clear The Room!
echo "<div style=\'clear:both; display:block;\'></div>";
}

add_action(\'save_post\', \'wysiwyg_save_meta\');
function wysiwyg_save_meta(){

$editor_id = WYSIWYG_EDITOR_ID;
$meta_key = WYSIWYG_META_KEY;

if(isset($_REQUEST[$editor_id]))
        update_post_meta($_REQUEST[\'post_ID\'], WYSIWYG_META_KEY, $_REQUEST[$editor_id]);

}
下面是显示内容的显示代码(单cpt.php):

<?php $content = get_post_meta($post->ID, WYSIWYG_META_KEY, true); ?>
<p><?php echo $content; ?></p>
My problem: 在显示代码中,我们有一个常量“WSIWYG\\u META\\u KEY”。所以这意味着我不能在同一个单曲中再次使用此代码。php文件,以便显示我将在函数中实现的另一个编辑器的另一个内容。php。你们有没有人看到一个解决方案,允许我添加两个编辑器,并在我的单张中分别显示这两个编辑器的内容。php文件?

1 个回复
SO网友:Tom J Nowell

如何显示元盒以及如何在文本区域中保存/放入值超出了此问题的范围,但您询问了如何拥有富格文本可编辑区域,如主要内容。

为此,请使用wp_editor 作用WordPress将获取您的标识符、内容和一些选项,并使用按钮等创建一个新的TinyMCE实例

$settings = array( \'media_buttons\' => false );
$content = get_post_meta( $post_id, \'kents-secondary-content-thing\', true );
wp_editor( $content, \'kents-second-editor\', $settings );
wp_editor 将弹出必要的html和css/js来显示您想要的内容。

请注意,这只能在管理区域可靠地工作,前端使用wp\\U编辑器需要一些额外的步骤(对于新问题来说这是个好主意!)。

还要注意的是wp_editor 将显示一个内容编辑器区域,但它不会保存/验证该内容,您仍然需要这样做。

A sidenote:

您的代码使用the_editor, 一个函数wp_editor 已替换。当你从某个网站上找到代码时,一定要阅读它,并查阅文档。否则你怎么接电话sendAllMyMoneyTo("0723-323...etc");

如果您做到了这一点,您就会看到这一点并节省了大量时间:

enter image description here

启用WP_DEBUG 查看您的php日志也会告诉您the_editor 是一个不推荐使用的函数。看看这些,因为它们会让你今后省去很多麻烦

结束