Crearea unei instanțe wp_editor cu butoane tinyMCE personalizate

9 apr. 2012, 01:24:49
Vizualizări: 38.7K
Voturi: 21

Există vreo modalitate de a defini wp_editor() cu butoane tinyMCE personalizate?

Am observat că referința funcției wp_editor menționează că unul dintre argumentele $settings poate fi tinymce (array) (opțional) Încarcă TinyMCE, poate fi folosit pentru a transmite setări direct către TinyMCE folosind un array().

Pagina mea folosește mai multe instanțe diferite și aș dori să adaug anumite butoane la anumite instanțe.

De exemplu,

Instanța #1 : Butoane standard
Instanța #2 : bold, italic, ul + (personalizat) pH, temp
Instanța #3 : bold, italic, ul + (personalizat) min_size, max_size

Știe cineva cum aș putea face acest lucru dacă am înregistrat deja butoanele ca plugin-uri tinyMCE conform acestui tutorial?


EDITARE

Iată codul pe care îl folosesc în fișierul meu plugin pentru a face acest lucru să funcționeze:

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

Din păcate, acest lucru nu funcționează - editorul de mai sus afișează aceleași butoane ca orice altă instanță din pagină.


Mulțumesc anticipat,

0
Toate răspunsurile la întrebare 4
7
15

Aproape că ai reușit, conform descrierii.

Iată ce ai putea căuta pentru instanțele 2 și 3 (pentru instanța 1 poți lăsa setările goale pentru a obține setul implicit de butoane):

Instanța 2:

wp_editor(
    $distribution,
    'distribution',
    array(
      'media_buttons' => false,
      'textarea_rows' => 8,
      'tabindex' => 4,
      'tinymce' => array(
        'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp',
      ),
    )
);

Instanța 3 (afișând fiecare dintre cele 4 rânduri pe care le poți seta pentru TinyMCE):

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' => '',
      ),
    )
);

Îți recomand să consulți fișierul wp-includes/class-wp-editor.php (în special funcția editor_settings de la linia 126) pentru a înțelege cum WP parsează setările pe care le folosești în funcția wp_editor(). De asemenea, verifică această pagină pentru a înțelege mai multe despre funcționalitatea TinyMCE și opțiunile sale de inițializare (pe care nu cred că WP le suportă pe deplin).

12 apr. 2012 03:01:42
Comentarii

Salut! Mulțumesc pentru răspuns. Am adăugat niște cod în postarea mea originală care, judecând după răspunsul tău, ar trebui să funcționeze - dar nu merge. Poți să arunci o privire?

turbonerd turbonerd
12 apr. 2012 11:52:32

Am uitat să încapsulez parametrii specifici lui tinymce în propriul lor array. Am editat răspunsul și am adăugat ceilalți parametri pe care i-ai inclus acum în întrebarea ta. Spune-mi cum merge?

Tomas Buteler Tomas Buteler
12 apr. 2012 13:29:28

Ține minte că și alții (eu inclusiv!) am vrea să știm cum să facem asta singuri, așa că încearcă să nu transformi răspunsul într-unul specific doar pentru dunc. Poți să adaugi link-uri către documentația relevantă WP/TinyMCE?

Tom J Nowell Tom J Nowell
12 apr. 2012 13:38:03

Grozav, se pare că funcționează. Din păcate, butoanele mele nu funcționează, dar asta e o altă problemă :) Mulțumesc tbuteler.

turbonerd turbonerd
12 apr. 2012 16:50:46

Cu plăcere! @TomJNowell, am adăugat un ultim paragraf cu lecturi recomandate, mulțumesc pentru sugestie!

Tomas Buteler Tomas Buteler
12 apr. 2012 17:30:33

Aproape am uitat să-ți acord recompensa :) Am pus o nouă întrebare aici dacă ai vreo idee: http://wordpress.stackexchange.com/questions/48782/registering-custom-tinymce-buttons-for-admin-area-to-work-with-custom-instance

turbonerd turbonerd
13 apr. 2012 22:04:55

Denumirile barelor de instrumente s-au schimbat: acum ar trebui să folosești toolbar1, 2, 3 și 4 :-)

Erenor Paz Erenor Paz
5 nov. 2020 19:09:32
Arată celelalte 2 comentarii
0
10

puteți seta parametrii prin intermediul unui array în funcția wp_editor(); un exemplu

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

Puteți seta valorile prin array în parametrul 'tinymce', 'tinymce' => true, // încarcă TinyMCE, poate fi folosit pentru a transmite setări direct către TinyMCE folosind un array() De asemenea, este posibil să obțineți informații despre parametrii butoanelor: theme_advanced_buttons1, theme_advanced_buttons2, theme_advanced_buttons3, theme_advanced_buttons4

array( 'theme_advanced_buttons1' => 'bold, italic, ul, pH, temp' )

de asemenea, puteți utiliza un filtru hook pentru a crea butoane personalizate, iată un exemplu

function fb_change_mce_options($initArray) {
    // Șir de caractere separat prin virgulă pentru tag-uri extinse
    // Șir de caractere separat prin virgulă pentru elemente extinse
    $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;
    }
    // opțional; setează parametrul tiny verify_html
    //$initArray['verify_html'] = false;
    return $initArray;
}
add_filter( 'tiny_mce_before_init', 'fb_change_mce_options' );

de asemenea, puteți filtra butoanele direct; fiecare linie are propriul filtru: mce_buttons, mce_buttons_2, mce_buttons_3, mce_buttons_4

următorii parametri sunt cei impliciți pentru exemplul de hook: 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'

consultați acest link pentru mai multe informații despre acest filtru.

12 apr. 2012 14:10:17
0

Doar pentru a actualiza acest lucru, a trebuit să sap în fișierele sursă wp

$settings = array(
    'tinymce' => array(
        'toolbar1' => 'bold, italic', // bold, italic
        'toolbar2' => '', // bara de unelte 2 goală
    ),
    'wpautop' => false, // dezactivează formatarea automată a paragrafelor
    'media_buttons' => false, // dezactivează butoanele media
);

Cred că acest lucru s-a schimbat odată cu Tinymce 4.

30 ian. 2017 10:03:01
0
$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 );
Acest cod PHP configurează și inițializează editorul TinyMCE în WordPress. Iată explicația parametrilor: - `$args` - definește setările pentru editor - `tinymce` - specifică configurația pentru bara de unelte TinyMCE - `toolbar1` - conține butoanele pentru prima linie de unelte: * `bold` - îngroșat * `italic` - cursiv * `underline` - subliniat * `separator` - separator vizual * `alignleft` - aliniere la stânga * `aligncenter` - aliniere centrată * `alignright` - aliniere la dreapta * `link` - inserare link * `unlink` - eliminare link * `undo` - anulare acțiune * `redo` - refacere acțiune - `toolbar2` și `toolbar3` - sunt lăsate goale (nu conțin butoane) - `wp_editor()` - funcția WordPress care afișează editorul, primind: * `$content` - conținutul existent * `$editor_id` - ID-ul unic al editorului * `$args` - argumentele de configurare definite mai sus
14 feb. 2018 09:15:07