WP에서 TinyMCE에 여러 버튼을 추가하는 방법?

WP에서 TinyMCE에 여러 버튼을 추가하는 방법?

사용자 지정 버튼을 TinyMCE(http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/) 에 추가하는 방법에 대한 Nettuts의 튜토리얼을 따라왔습니다.

그것은 잘 작동하지만, 나는 많은 버튼을 추가하고 싶고 모든 코드를 반복해서 복제하지 않고 이것을 할 수 있는 현명한 방법이 있는지 궁금합니다.

버튼 추가에 사용하는 코드는 다음과 같습니다.

add_shortcode("quote", "quote");  
function quote( $atts, $content = null ) {  
    return '<div class="right text">"'.$content.'"</div>';  
}

add_action('init', 'add_button');  
function add_button() {  
   if ( current_user_can('edit_posts') &&  current_user_can('edit_pages') )  
   {  
     add_filter('mce_external_plugins', 'add_plugin');  
     add_filter('mce_buttons_3', 'register_button');  
   }  
}  
function register_button($buttons) {  
   array_push($buttons, "quote");  
   return $buttons;  
}  
function add_plugin($plugin_array) {  
   $plugin_array['quote'] = get_bloginfo('template_url').'/js/customcodes.js';  
   return $plugin_array;  
}  

그런 다음 이 코드를 사용하여 customcodes.js 파일을 만듭니다.

(function() {  
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {  
            ed.addButton('quote', {  
                title : 'Add a Quote',  
                image : url+'/image.png',  
                onclick : function() {  
                     ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  

                }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

다시 말하지만, 새 버튼마다 이 모든 코드를 수행하지 않고 어떻게 여러 개의 버튼을 추가할 수 있을까요?

고마워요 :) 세바스찬

더 할 수 .register_button($buttons)그리고.add_plugin($plugin_array)기능?

오래된 질문인 것은 알지만, 기능을 중복하지 않고 할 수 있는 방법이 있습니다.

codes.js 로를 하면 됩니다.init : function(ed, url)를 만들 로 새 수 .됩니다.

init : function(ed, url) {  
             /* your original button */
            ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]'); 
            }  
        }); 
            /* your second button */
            ed.addButton('singlequote', {  
            title : 'Add a Single Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[singlequote]' + ed.selection.getContent() + '[/singlequote]'); 
            }  
        }); 
} 

그래서 필요한 만큼의 버튼이 필요합니다.

에 로 .register_button($buttons) 및 earray_push().

버튼 하나만 추가하면 이렇게 됩니다.

function register_button($buttons) {  
array_push($buttons, "quote");  
return $buttons;  }

새 버튼을 만들었으니 이 기능은 이렇게 보일 겁니다.

function register_button($buttons) {  
array_push($buttons, "quote", "singlequote");  
return $buttons; }  

추가한 새 버튼의 개수에 따라 등이 있습니다.

작은 MCE에 새 버튼을 추가하기 위해 기능을 복제하거나 새 작업 및 필터를 추가할 필요가 없습니다.

에 새 만 하면 됩니다.array_push().

아마도 당신은 당신이 알고 있었을 것입니다.array_push()여러 푸시 값을 허용합니다.다음은 php.net 의 문서입니다.

3단계에서 php를 수정하여 두 번째 버튼을 누릅니다.

//Step 3: Register Our Button
function register_button($buttons) {  
   array_push($buttons, "BOUTON1");  
   array_push($buttons, "BOUTON2");  
   return $buttons;  
}

해당 BOUTON2에 특정 패스를 추가합니다.

//Step 4: Register Our TinyMCE Plugin
    function add_plugin($plugin_array) {  
       $plugin_array['BOUTON1'] = '/yourpathtojs/bouton1.js';  
       $plugin_array['BOUTON2'] = '/yourpathtojs/bouton2.js';  
       return $plugin_array;  
    } 

그러면 각각에 대해 서로 다른 파일이 있습니다. PLUG1과 BUTOON1의 사용법을 보면 '인용'이라는 용어로 구별하지 않았기 때문에 넷튜트에서 사용하는 것보다 낫습니다.

bouton 1.js :

(function() {  
    tinymce.create('tinymce.plugins.PLUG1', {  
        init : function(ed, url) {  
            ed.addButton('BOUTON1', {  
                title : 'You', image : url+'/image.png',  
                onclick : function() { ed.selection.setContent('[thumb from="youtube" code="'+ed.selection.getContent()+'"]'); }  
            });  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('BOUTON1', tinymce.plugins.PLUG1);  
})();

bouton 2.js :

(function() {  
        tinymce.create('tinymce.plugins.PLUG2', {  
            init : function(ed, url) {  
                ed.addButton('BOUTON2', {  
                    title : 'Vim', image : url+'/image.png',  
                    onclick : function() { ed.selection.setContent('[thumb from="vimeo" code="'+ed.selection.getContent()+'"]'); }  
                });  
            },  
            createControl : function(n, cm) {  
                return null;  
            },  
        });  
        tinymce.PluginManager.add('BOUTON2', tinymce.plugins.PLUG2);  
    })();

이미 존재하는 기능 안에 추가 버튼 코드를 추가하는 것 외에는, 당신이 시도하고 있는 것을 할 방법이 없다고 생각합니다.

유감스럽게도 그것은 버튼을 추가하는 코드이므로 다른 버튼을 추가하려면 코드를 다시 추가해야 합니다.

만약 당신이 추가하고 싶었던 버튼들이 거의 모든 면에서 비슷하다면, 당신은 아마도 그것을 하는 것을 피할 수 있을 것입니다.foreach {}뒤에 a.switch(){case '':}데이터를 전송하지만 모든 버튼이 동일한 작업을 수행하지 않는 한 이 작업은 다소 중복된 것으로 보입니다.

당신이 하려는 것은 당신의 기능을 유지하는 것뿐입니다.php file tridy 그러면 저는 각 버튼을 메인 함수와 같은 이름의 별도의 .php 파일에 inc 또는 include라는 템플릿에 포함시킨 후 다음과 같이 포함할 것을 제안합니다.

$temp_path = 'http//www.yourdomain.com/wp-content/theme/yourtheme/includes/';


include $temp_path.'file1.php';
include $temp_path.'file2.php';

어떤 이유에서인지 temp_path 변수를 사용하고 있습니다.bloginfo()그리고.get_bloginfo()함수 파일에서 작동하지 않는 것 같습니다.

참고로, 비록 개인적인 용도이긴 하지만, 훨씬 더 독특한 기능명을 사용해 보십시오.quote그 어느 것일 수도 있다.tinymce_quote_button확실히 그렇습니다.이렇게 하면 나중에 발생할 수 있는 함수 이름 충돌을 방지할 수 있습니다.

모든 버튼이 관련되어 있고 한 번에 추가하려면(즉, 추가할 버튼을 선택하고 선택할 필요가 없음) 초기 호출에서 ed.add Button 호출을 복제할 수 있습니다.각각의 추가 버튼 호출을 자신의 기능으로 캡슐화하는 것이 타당할 것입니다.

(function() {  
    function addQuoteButton(ed, url){
        ed.addButton('quote', {  
            title : 'Add a Quote',  
            image : url+'/image.png',  
            onclick : function() {  
                 ed.selection.setContent('[quote]' + ed.selection.getContent() + '[/quote]');  
            }  
        });  
    }
    function addOtherButton(ed, url){
        // functionality to add another button.
    }
    tinymce.create('tinymce.plugins.quote', {  
        init : function(ed, url) {
            addQuoteButton(ed, url);
            addOtherButton(ed,url);  
        },  
        createControl : function(n, cm) {  
            return null;  
        },  
    });  
    tinymce.PluginManager.add('quote', tinymce.plugins.quote);  
})();

추가 분해를 위해 add*Button 함수를 자신의 파일로 분할할 수 있습니다(@DouglasMarken이 제안한 대로).

언급URL : https://stackoverflow.com/questions/5520492/how-to-add-multiple-buttons-to-tinymce-in-wp