使用定制tinyMCE按钮创建一个wp_EDITOR实例

时间:2012-04-08 作者:turbonerd

有没有办法定义wp_editor() 使用自定义tinyMCE按钮?

我注意到wp_editor function reference 提到$settings 参数可以是tinymce (array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array().

我的页面使用了许多不同的实例,我想向某些实例添加某些按钮。

例如

Instance #1 : Standard buttons
Instance #2 : bold, italic, ul + (custom) pH, temp
Instance #3 : bold, italic, ul + (custom) min_size, max_size
如果我已经按照注册了tinyMCE插件的按钮,有人知道我会怎么做吗this tutorial?

<小时>

EDIT

以下是我在插件文件中使用的代码,以使其正常工作:

function add_SF_buttons() {
    if ( ! current_user_can(\'edit_posts\') && ! current_user_can(\'edit_pages\') )
        return;
    if ( get_user_option(\'rich_editing\') == \'true\') {
        add_filter(\'mce_external_plugins\', \'add_SF_buttons_plugins\');
    }
}

function add_SF_buttons_plugins($plugin_array) {
    $plugin_array[\'pH\'] = $this->plugin_url . \'/js/tinymce_buttons/pH.js\';
    $plugin_array[\'pH_min\'] = $this->plugin_url . \'/js/tinymce_buttons/pH_min.js\';
    $plugin_array[\'pH_max\'] = $this->plugin_url . \'/js/tinymce_buttons/pH_max.js\';
    return $plugin_array;
}
-

if (isset($SpeciesProfile)) {
    add_action( \'init\' , array (&$SpeciesProfile, \'register_species\' ));
    add_action( \'init\' , array( &$SpeciesProfile, \'register_species_taxonomies\' ));

    add_action( \'init\', array (&$SpeciesProfile, \'add_SF_buttons\' ));
}
-

<?php wp_editor( $distribution, \'distribution\', array( \'theme_advanced_buttons1\' => \'bold, italic, ul, pH, pH_min\', "media_buttons" => false, "textarea_rows" => 8, "tabindex" => 4 ) ); ?>
不幸的是,这不起作用-上面的编辑器只显示与页面上其他实例相同的按钮。

提前谢谢你,

4 个回复
最合适的回答,由SO网友:Tomas Buteler 整理而成

根据描述,你几乎拥有了它。

下面是实例2和3可能需要的内容(例如1,您可以将设置留空以获得默认的按钮集):

实例2:

wp_editor(
    $distribution,
    \'distribution\',
    array(
      \'media_buttons\' => false,
      \'textarea_rows\' => 8,
      \'tabindex\' => 4,
      \'tinymce\' => array(
        \'theme_advanced_buttons1\' => \'bold, italic, ul, pH, temp\',
      ),
    )
);
实例3(显示可以为TinyMCE设置的4行中的每一行):

wp_editor(
    $distribution,
    \'distribution\',
    array(
      \'media_buttons\' => false,
      \'textarea_rows\' => 8,
      \'tabindex\' => 4,
      \'tinymce\' => array(
        \'theme_advanced_buttons1\' => \'bold, italic, ul, min_size, max_size\',
        \'theme_advanced_buttons2\' => \'\',
        \'theme_advanced_buttons3\' => \'\',
        \'theme_advanced_buttons4\' => \'\',
      ),
    )
);
我建议您查看wp-includes/class-wp-editor.php 文件(特别是editor_settings 函数),以了解WP如何解析在WP\\U editor()函数中使用的设置。同时,检查this page 了解更多关于TinyMCE及其init选项的功能(我不认为WP完全支持)。

SO网友:bueltge

您可以通过wp\\u editor()函数上的数组设置参数;一棵枫树

$settings = array(
    \'tinymce\'       => array(
        \'setup\' => \'function (ed) {
            tinymce.documentBaseURL = "\' . get_admin_url() . \'";
        }\',
    ),
    \'quicktags\'     => TRUE,
    \'editor_class\'  => \'frontend-article-editor\',
    \'textarea_rows\' => 25,
    \'media_buttons\' => TRUE,
);
wp_editor( $content, \'article_content\', $settings ); 
您可以通过参数“tinymce”中的数组设置值,“tinymce”=>true,//加载tinymce,可以使用数组()将设置直接传递给tinymce,也可以了解按钮的参数:theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3, theme_advanced_buttons4

array( \'theme_advanced_buttons1\' => \'bold, italic, ul, pH, temp\' )
您还可以通过过滤器挂钩来创建自定义按钮,这也是一个示例

function fb_change_mce_options($initArray) {
    // Comma separated string od extendes tags
    // Command separated string of extended elements
    $ext = \'pre[id|name|class|style],iframe[align|longdesc|name|width|height|frameborder|scrolling|marginheight|marginwidth|src]\';
    if ( isset( $initArray[\'extended_valid_elements\'] ) ) {
        $initArray[\'extended_valid_elements\'] .= \',\' . $ext;
    } else {
        $initArray[\'extended_valid_elements\'] = $ext;
    }
    // maybe; set tiny paramter verify_html
    //$initArray[\'verify_html\'] = false;
    return $initArray;
}
add_filter( \'tiny_mce_before_init\', \'fb_change_mce_options\' );
也可以直接过滤按钮;每一行都有一个each过滤器:mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4

以下参数是挂钩示例的默认参数:tiny_mce_before_init

\'mode\' => \'specific_textareas\'
\'editor_selector\' => \'theEditor\'
\'width\' => \'100%\'
\'theme\' => \'advanced\'
\'skin\' => \'wp_theme\'
\'theme_advanced_buttons1\' => \'bold,italic,strikethrough,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,|,link,unlink,wp_more,|,spellchecker,fullscreen,wp_adv\'
\'theme_advanced_buttons2\' => \'formatselect,underline,justifyfull,forecolor,|,pastetext,pasteword,removeformat,|,media,charmap,|,outdent,indent,|,undo,redo,wp_help\'
\'theme_advanced_buttons3\' => \'\'
\'theme_advanced_buttons4\' => \'\'
\'language\' => \'de\'
\'spellchecker_languages\' => \'English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,+German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv\'
\'theme_advanced_toolbar_location\' => \'top\'
\'theme_advanced_toolbar_align\' => \'left\'
\'theme_advanced_statusbar_location\' => \'bottom\'
\'theme_advanced_resizing\' => true
\'theme_advanced_resize_horizontal\' => false
\'dialog_type\' => \'modal\'
\'relative_urls\' => false
\'remove_script_host\' => false
\'convert_urls\' => false
\'apply_source_formatting\' => false
\'remove_linebreaks\' => true
\'gecko_spellcheck\' => true
\'entities\' => \'38,amp,60,lt,62,gt\'
\'accessibility_focus\' => true
\'tabfocus_elements\' => \'major-publishing-actions\'
\'media_strict\' => false
\'paste_remove_styles\' => true
\'paste_remove_spans\' => true
\'paste_strip_class_attributes\' => \'all\'
\'wpeditimage_disable_captions\' => false
\'plugins\' => \'safari,inlinepopups,spellchecker,paste,wordpress,media,fullscreen,wpeditimage,wpgallery,tabfocus\'
请参见上的this link 有关此筛选器的更多信息。

SO网友:Sam

只是为了更新这个,因为我必须挖掘wp源文件

$settings = array(
    \'tinymce\' => array(
        \'toolbar1\' => \'bold, italic\',
        \'toolbar2\' => \'\',
    ),
    \'wpautop\' => false,
    \'media_buttons\' => false,
);
我认为Tinymce 4改变了这一点。

SO网友:Mr. HK
$args = array(
    \'tinymce\'       => array(
        \'toolbar1\'      => \'bold,italic,underline,separator,alignleft,aligncenter,alignright,separator,link,unlink,undo,redo\',
        \'toolbar2\'      => \'\',
        \'toolbar3\'      => \'\',
    ),
);
wp_editor( $content, $editor_id, $args );
结束

相关推荐

在前端使用时,如何获取TinyMCE编辑器的输入?

我不知道为什么我没有找到这个,但是有人知道如何获得TinyMCE编辑器的输入吗?我在前端使用它,希望能够将用户在TinyMCE中键入的任何内容保存到数据库中,但无法找到获取该值的最佳方法。我成功实施的两个解决方案是:tinyMCE.activeEditor.getContent(); - 这一个似乎只获取可视化编辑器的值,因此如果我在HTML编辑器中进行更改然后保存,则不会获取它们。$(\'#html_text_area_id\').val(); - 这一个正好相反,它似乎只获得HTML编辑器的值。我知道