Làm cách nào để thêm nhiều nút vào TinyMCE?


7

Tôi đã làm theo hướng dẫn về Nettuts về cách thêm nút tùy chỉnh vào TinyMCE ( http://net.tutsplus.com/tutorials/wordpress/wordpress-shortcodes-the-right-way/ )

Nó hoạt động tuyệt vời và tất cả, nhưng tôi muốn thêm nhiều nút và tôi tự hỏi liệu có cách nào thông minh để làm điều này mà không phải lặp đi lặp lại tất cả các mã.

Đây là mã tôi sử dụng để thêm một nút:

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;  
}

Và sau đó tôi tạo một tệp customcodes.js với mã này trong:

(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);  
})();

Vì vậy, một lần nữa, làm thế nào tôi có thể thêm nhiều nút mà không phải thực hiện tất cả mã này cho mỗi nút mới?

Cảm ơn :) Sebastian

Câu trả lời:


5

Đầu tiên thêm các nút bổ sung của bạn bên trong các nút gọi lại ..

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

Sau đó thêm chức năng nút bổ sung bên trong plugin javascript ..

    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]');  
            }  
        });
        ed.addButton('wpse-rules', {  
            title : 'WPSE Rules',  
            image : url+'/image.png',  
            onclick : function() {  
                 alert( 'WPSE Rules!' ); 
            }  
        });  
    },

Và như vậy, cho bất kỳ nút bổ sung nào bạn muốn ..


0

Hãy đọc qua và / hoặc tải xuống các tập tin trong hướng dẫn của tôi về điều này . Lý do tôi đề xuất điều này là vì tôi đã đưa tất cả vào một lớp để bạn thực sự không cần phải viết mã nhiều lần cho mỗi nút!

Bây giờ, lớp về cơ bản sẽ viết mã cho bạn mỗi khi bạn khởi tạo nó ở phía WordPress, nhưng bạn vẫn sẽ cần phải viết các chức năng javascript cho mỗi nút.

Việc tạo ra một nút là cùng một quy trình cho dù bạn cần bao nhiêu. Chức năng của mỗi nút sẽ là duy nhất, đó là lý do tại sao bạn cần một lệnh gọi javascript duy nhất cho mỗi nút.


0

Hãy xem QuickTag của wordpress, nếu bạn muốn thêm các nút trên phần trình soạn thảo văn bản (mặc dù không hoạt động trên phần trình soạn thảo trực quan)

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.