元框上带有自定义按钮的TinyMCE

时间:2011-06-24 作者:turbonerd

首先请允许我道歉,这是我来这一周的第四个问题!但你们都帮了我很大的忙,这就是为什么我一直回来。。

我正在尝试创建一个不使用“编辑器”的自定义帖子类型。页面上有许多输入字段,其中大多数需要自定义TinyMCE编辑器。

我有带文本区域的元框。我尝试了以下代码:

<script type="text/javascript">
    jQuery(document).ready(function() {
        jQuery("#etymology").addClass("mceEditor");
        if ( typeof( tinyMCE ) == "object" &&
        typeof( tinyMCE.execCommand ) == "function" ) {
            tinyMCE.execCommand("mceAddControl", false, "etymology");
        }
    });
</script>
使用。。。

    if (function_exists(\'wp_tiny_mce\')) {

        add_filter(\'teeny_mce_before_init\', create_function(\'$a\', \'
            $a["theme"] = "advanced";
            $a["skin"] = "wp_theme";
            $a["height"] = "75";
            $a["theme_advanced_buttons1"] = "bold, italic, pastetext, pasteword,
                bullist, numlist, link, unlink, outdent, indent, charmap, removeformat, spellchecker, fullscreen";

            return $a;\'));

        wp_tiny_mce(true);
    }
他们似乎不在一起工作。TinyMCE编辑器出现在右侧元素上,但它只是默认的WP编辑器,而不是我尝试实现的设置。

所以,我的三个问题是。。。

Question 1在为自定义帖子类型使用元框时,向多个元素添加自定义TinyMCE编辑器的最佳方式是什么(我所说的最佳方式可能是指最灵活、最集成、最不“黑客化”?

Question 2问题1的后续内容。。。如何向这样的设置中添加自定义按钮?

Question 3是否可以更改TinyMCE编辑器的最小高度?它似乎被力限制在100px。

我的研究和尝试表明,WordPress内置的TinyMCE函数无法完成这项工作。对我来说,最好是完全定制,即取消现有tinyMCE脚本的注册并注册我自己的脚本?如果是这样,是否可以仅在我的自定义帖子类型页面上执行此操作?

提前谢谢,为这篇文章道歉!

<小时>MAJOR EDIT - QUESTIONS 1 & 2 RESOLVED好的,感谢Martin的帖子(还有Mike的密码!)我已成功使用自定义按钮设置了多个文本区域:

function meta_genus_species() {
    global $post;

    $genus = get_post_custom_values( \'genus\', $post->ID );
    $species = get_post_custom_values( \'species\', $post->ID );
    $etymology = get_post_custom_values( \'etymology\', $post->ID );
    $family = get_post_custom_values( \'family\', $post->ID );
    $common_names = get_post_custom_values( \'common_names\', $post->ID );

    if (!isset($id)) { $id = "etymology"; }
    if (!isset($temp_min)) { $temp_min = plugins_url(\'images/temp_max.png\' , __FILE__); }
    if (!isset($temp_max)) { $temp_max = plugins_url(\'images/temp_min.png\' , __FILE__); }
    if (!isset($pH_min)) { $pH_min = plugins_url(\'images/pH_max.png\' , __FILE__); }
    if (!isset($pH_max)) { $pH_max = plugins_url(\'images/pH_max.png\' , __FILE__); }

$tinyMCE = <<<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:"75",
                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,|,temp_min,temp_max,pH_min,pH_max",
                theme_advanced_buttons2 : "",
                theme_advanced_buttons3 : "",
                setup : function(ed) {
                    ed.addButton(\'temp_min\', {
                        title : \'Temperature: Minimum\',
                        image : \'{$temp_min}\',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent(\'[temp_min]\');
                        }
                    }),
                    ed.addShortcut("ctrl+1", "temp_min", "temp_min"),
                    ed.addButton(\'temp_max\', {
                        title : \'Temperature: Maximum\',
                        image : \'{$temp_max}\',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent(\'[temp_max]\');
                        }
                    }),
                    ed.addButton(\'pH_min\', {
                        title : \'pH: Minimum\',
                        image : \'{$pH_min}\',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent(\'[pH_min]\');
                        }
                    }),
                    ed.addButton(\'pH_max\', {
                        title : \'pH: Maximum\',
                        image : \'{$pH_max}\',
                        onclick : function() {
                            ed.focus();
                            ed.selection.setContent(\'[pH_max]\');
                        }
                    });
                }
              };
              tinyMCE.execCommand("mceAddControl", true, "{$id}");
            }
        });
    </script>
EOT;
    echo $tinyMCE;

    ?>
<div class="meta_control normal">
    <p>Description of taxonomy.</p>
    <div class="box">
        <label>Genus</label>
        <p>
            <input name="genus" class="text" value="<?php if(isset($genus[0])) { echo esc_attr( $genus[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <div class="box">
        <label>Species</label>
        <p>
            <input name="species" class="text"  value="<?php if(isset($species[0])) { echo esc_attr( $species[0] ); } ?>" />
            <span>Testing...</span>
        </p>
    </div>
    <p>
        <label>Etymology</label>
        <textarea cols="50" rows="5" name="etymology" id="etymology"><?php if(isset($etymology[0])) { echo esc_attr( $etymology[0] ); } ?></textarea>
        <span>Description</span>
    </p>
    <p>
        <label>Family</label>
        <input name="family" class="text"  value="<?php if(isset($family[0])) { echo esc_attr( $family[0] ); } ?>" />
        <span>Description</span>
    </p>
    <p>
        <label>Common Names</label>
        <input name="common_names" class="text"  value="<?php if(isset($common_names[0])) { echo esc_attr( $common_names[0] ); } ?>" />
        <span>Description</span>
    </p>
</div>
    <?php

}

function meta_authored() {
    global $post;

    $species_author = get_post_custom_values( \'species_author\', $post->ID );
    $year_described = get_post_custom_values( \'year_described\', $post->ID );

    ?>
<div class="meta_control side">
    <label>Species Author</label>
    <p>
        <input name="species_author" class="text" value="<?php if(isset($species_author[0])) { echo esc_attr( $species_author[0] ); } ?>" />
    </p>
    <label>Year Described</label>
    <p>
        <input name="year_described" class="text" value="<?php if(isset($year_described[0])) { echo esc_attr( $year_described[0] ); } ?>" />
    </p>
</div>
    <?php
}
我简直是疯了!我一直在努力寻找这些信息。非常感谢马丁:)

Just Question 3 to answer now!

1 个回复
最合适的回答,由SO网友:MartinJJ 整理而成

这是朝着正确的方向吗?。。See Mikes Code

结束

相关推荐

如何在TinyMCE中插入链接图像

WordPress附带的TinyMCE编辑器中没有用于从链接插入图像的按钮。我知道您可以使用上载/插入部分来完成此操作。但我们可以说,我不想让用户上传图像,但希望他们能够通过链接插入图像。如果删除上载功能,上载/插入部分将完全消失在WordPress上已经有这样做的方法了吗?