Wordpress 4.1 TinyMce 按钮插件

Question

我正在尝试在 wordpress 的 tinymce 编辑器上添加一个按钮

Wordpress 版本：4.1

我遵循了这个教程： http://code.tutsplus.com/tutorials/guide-to-creating-your-own-wordpress-editor-buttons--wp-30182

但它不起作用。我在谷歌上进行了分配，至少我试图找到一些东西，但没有结果。

有人知道那个教程有什么问题吗！？

我要做的只是在 tinymce 上添加一个按钮，该按钮获取一个 youtube url，并在光标所在的位置添加一个带有链接的自定义 html。

提前致谢，我对 php、wordpress、tinymce 很陌生。

编辑：

尝试@Kaloyan Ivanov 建议的教程 链接：https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

我的步骤：

1.我在我的主题的functions.php末尾添加了前4个php代码

        //add custom plugin to tinymce
        add_action('admin_head', 'gavickpro_add_my_tc_button');

        function gavickpro_add_my_tc_button() {
            global $typenow;
            // check user permissions
            if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') ) {
            return;
            }
            // verify the post type
            if( ! in_array( $typenow, array( 'post', 'page' ) ) )
                return;
            // check if WYSIWYG is enabled
            if ( get_user_option('rich_editing') == 'true') {
                add_filter("mce_external_plugins", "gavickpro_add_tinymce_plugin");
                add_filter('mce_buttons', 'gavickpro_register_my_tc_button');
            }
        }

        function gavickpro_add_tinymce_plugin($plugin_array) {
            $plugin_array['gavickpro_tc_button'] = plugins_url( '/text-button.js', __FILE__ ); // CHANGE THE BUTTON SCRIPT HERE
            return $plugin_array;
        }

        function gavickpro_register_my_tc_button($buttons) {
           array_push($buttons, "gavickpro_tc_button");
           return $buttons;
        }

2.然后我在functions.php所在主题的同一文件夹中创建了一个名为text-button.js的文件并添加了代码

            (function() {
                tinymce.PluginManager.add('gavickpro_tc_button',   function( editor, url ) {
                    editor.addButton( 'gavickpro_tc_button', {
                        text: 'My test button',
                        icon: false,
                        onclick: function() {
                            editor.insertContent('Hello World!');
                        }
                    });
                });
            })();

但这不起作用，它会从编辑器中删除所有 tinymce 按钮

最终按照 Kaloyan Ivanov 的建议进行一点点改动：

换行：

$plugin_array['gavickpro_tc_button'] = plugins_url( '/text-button.js', __FILE__ );

与：

$plugin_array['gavickpro_tc_button'] = get_bloginfo( 'stylesheet_directory' ) . '/text-button.js';

感谢 Kaloyan Ivanov 和 gavick.com/blog 这适用于 wordpress 4.1 的新 tinymce 编辑器

Answer 1

查看以下教程，它似乎适用于最新版本的 TinyMCE（并且最近更新了）。

https://www.gavick.com/blog/wordpress-tinymce-custom-buttons

您链接的教程可能适用于 WordPress 3.9 之前的 TinyMCE。

编辑：做了一个快速测试。似乎正在工作。 :)

---

让它工作的快速指南：

1. 打开https://www.gavick.com/blog/wordpress-tinymce-custom-buttons#tmce-section-1
2. 将php的四个代码粘贴到你的functions.php文件中
3. 将plugins_url( '/text-button.js', __FILE__ ); 替换为get_bloginfo('stylesheet_directory') . /text-button.js（如果文件位于子目录中，可能需要调整）。
4. 将第五个块中的 javascript 代码粘贴到您创建的 javascript 文件中。

（请注意，这只是在 主题 中实现它的一个简单示例，因此您可以了解主要思想，如果您实际上正在构建插件，则应使用 plugins_url( '/text-button.js', __FILE__ ) 语法）。

http://codex.wordpress.org/Function_Reference/plugins_url