使用自定义tinyMCE按钮创建wp_editor实例


19

有没有一种wp_editor()使用自定义tinyMCE按钮进行定义的方法?

我注意到wp_editor函数参考提到其中一个$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插件,谁知道我会怎么做?


编辑

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

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 ) ); ?>

不幸的是,这不起作用-上面的编辑器仅在页面上显示与其他所有实例相同的按钮。


提前致谢,

Answers:


13

根据说明,您几乎拥有了它。

这是您在实例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第126行的函数),以了解WP如何解析您在wp_editor()函数中使用的设置。另外,请检查此页面以了解有关TinyMCE的功能及其init选项(我不认为WP会完全支持)的更多信息。


大家好 感谢您的回复。我在原始帖子中添加了一些代码,从您的回答来看,我认为该代码应该可以工作-但不可行。你可以看看吗?
2012年

我忘了将tinymce特定的参数包装到它们自己的数组中。我已经编辑了答案,并添加了您知道的其他参数。让我知道事情的后续?
Tomas Buteler 2012年

1
还请记住,其他人(我!)想知道如何自己执行此操作,因此请不要陷入对dunc(仅dunc)特定的答案。您可以添加指向任何相关WP / TinyMCE文档的链接吗?
汤姆·J·诺维尔

太好了,这似乎可行。不幸的是我的按钮不是,但这是一个单独的问题:)谢谢tbuteler。
2012年

别客气!@TomJNowell,我在最后一段添加了推荐阅读,感谢您的建议!
Tomas Buteler 2012年

9

您可以通过wp_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,可以使用array()将设置直接传递给TinyMCE,也有可能获得按钮: theme_advanced_buttons1theme_advanced_buttons2theme_advanced_buttons3theme_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' );

您也可以直接过滤按钮;每一行有一个每个滤光器: mce_buttonsmce_buttons_2mce_buttons_3mce_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'

此链接上查看有关此过滤器的更多信息。


7

只是为了更新它,因为我不得不在wp源文件中进行挖掘

$settings = array(
    'tinymce' => array(
        'toolbar1' => 'bold, italic',
        'toolbar2' => '',
    ),
    'wpautop' => false,
    'media_buttons' => false,
);

我认为随着Tinymce 4的改变。


1
$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 );
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.