Dodanie przycisków do edytora wordpress wysiwyg
Przyciski dodawania TinyMCE WordPress. Jak powiedziałem w tekście wprowadzającym, domyślny edytor zawiera tylko wymagane elementy. Możesz dodać funkcjonalność, dodając nowe przyciski. Poniżej przedstawiam kod dodawania przycisku do edytora:
|
1 2 3 4 5 |
function add_mce_buttons($buttons){ array_push($buttons, "hr"); return $buttons; } add_filter("mce_buttons", "add_mce_buttons"); |
Tutaj TUTAJ pełna lista wszystkich przycisków. Dodaj kod do swojego motywu w pliku function.php. Przycisk można również dodać w 2. lub 3. linii w następujący sposób:
|
1 2 |
add_filter ( "mce_buttons_2" , "add_mce_buttons" ); add_filter ( "mce_buttons_3" , "add_mce_buttons" ); |
Tworzenie niestandardowych przycisków w edytorze TinyMCE:
Jeśli używasz krótki kod lub klasy dla tekstu, zobrazowanie, guziki, które również można stworzyć.
Tutaj zamierzam utworzyć przycisk w trzecim rzędzie, przycisk zadziała tylko wtedy, gdy użytkownik ma uprawnienia do edycji postów lub stron.
Dodaj poniższy kod w funkcji.php:
|
1 2 3 4 5 6 7 8 |
add_action('init', 'custom_mce_button'); function custom_mce_button() { if ( current_user_can('edit_posts') && current_user_can('edit_pages') ) { add_filter('mce_buttons_3', 'add_button'); add_filter('mce_external_plugins', 'add_plugin'); } } |
Stwórzmy kolejny przycisk, który zamienia wybrany tekst na krótki kod:
Funkcja dodawania przycisku:
function add_button($buttons){ array_push($buttons,"blcss");return $buttons;}
Dodaj więcej kodu, który uzyska dostęp do edytora TinyMCE i WordPress:
|
1 2 3 4 |
function add_plugin($plugin_array) { $plugin_array['blist'] = get_bloginfo('template_url').'/scripts/customcodes.js'; return $plugin_array; } |
Wykonać zadanie, dodanie następującego kodu do pliku o nazwie customcodes.js . Zapisz go w ścieżce określonej powyżej.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
(function(){ tinymce.PluginManager.requireLangPack('blist'); tinymce.create('tinymce.plugins.blist', { init : function(ed, url){ ed.addCommand('cmd_css', function(){ ilc_sel_content = tinyMCE.activeEditor.selection.getContent(); tinyMCE.activeEditor.selection.setContent('' + ilc_sel_content + ''); // замените на квадратные скобки }); ed.addButton('blcss', { title: 'CSS Wrap', image: 'https://plugins.jasonbahl.com/wp-content/plugins/j2_anything_slider/js/menu_icon.png', cmd: 'cmd_css' }); }, createControl : function(n, cm){ return null; }, }); tinymce.PluginManager.add('blist', tinymce.plugins.blist); })(); |
Ukrywanie niechcianych przycisków za pomocą opcji edytora TinyMCE
Jeśli chcesz usunąć niechciane przyciski w edytorze, następnie po prostu podaj następujący kod:
|
1 2 3 4 5 |
function disable_mce_buttons( $opt ) { $opt['theme_advanced_disable'] = 'bold,italic'; return $opt; } add_filter('tiny_mce_before_init', 'disable_mce_buttons'); |
Możesz także ustawić specjalny parametr i pokazać tylko te elementy, który chcesz:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function custom_options( $opt ) { //format drop down list $opt['theme_advanced_blockformats'] = 'p,pre,code,h3,h4'; //font list $opt['theme_advanced_fonts'] = 'Arial=arial,helvetica,sans-serif;Courier New=courier new,courier,monospace'; //font size $opt['theme_advanced_font_sizes'] = '10px,12px,14px,16px,24px'; //default foreground color $opt['theme_advanced_default_foreground_color'] = '#000000'; //default background color $opt['theme_advanced_default_background_color'] = '#FFFFFF'; return $opt; } add_filter('tiny_mce_before_init', 'custom_options); |
Pracuj także z przyciskami edytora TinyMCE możliwe w pliku wp-includes/js/quicktags.js ale nie polecam, kiedy zaktualizujesz silnik, twoje ustawienia po prostu znikną.
Artykuł został pobrany i przetłumaczony ze strony: sumtips.com
Podziękowania i poprawki można przesyłać w komentarzach.
Postaram się wszystkim szybko odpowiedzieć.
Sam używam tego kodu, więc dodanie przycisków do edytora TinyMCE w WordPressie powinno działać idealnie.
Postaram się w najbliższym czasie opublikować kolejny artykuł na temat dodawania przycisków w trybie edycji kodu w WordPress.
