Wordpress/TinyMCE - 挂钩/过滤器以在 url 中添加 Target =“_blank”

Question

自过去 6 小时以来我一直在尝试它，但似乎没有什么对我有用。我想在单击 Wordpress 编辑器 -TinyMce 中的按钮时添加 target="_blank"。

这是我到目前为止所做的：

参考：https://wordpress.stackexchange.com/questions/141344/add-button-in-tinymce-editor-to-insert-text

functions.php

    add_action( 'init', 'droid_buttons' );
function droid_buttons() {
    add_filter( "mce_external_plugins", "droid_add_buttons" );
    add_filter( 'mce_buttons', 'droid_register_buttons' );
}

function droid_add_buttons( $plugin_array ) {
    $plugin_array['droid'] = get_template_directory_uri() . '/js/text-button.js';
    echo get_template_directory_uri();
    return $plugin_array;
}

function droid_register_buttons( $buttons ) {
    array_push( $buttons, 'droid_title'); // droid_title
    return $buttons;
}

text-button.js

    (function() {
    tinymce.create('tinymce.plugins.Droid', {
    init : function(editor, url) {
    editor.addButton('droid_title', {
    title : 'Droid Title',
    cmd : 'droid_title',
    image : ''
    });

    editor.addCommand('droid_title', function() {
    var selected_text = editor.selection.getContent();
    var element = "http://www.google.com";
    var return_text = "";
    return_text = '<a href="'+element+'" class="droid_title" target="_blank">' + selected_text + '</span>';
    editor.execCommand('mceInsertContent', 0, return_text);
    });

    },

    });

    // Register plugin
    tinymce.PluginManager.add( 'droid', tinymce.plugins.Droid );
})();

所以在我的functions.php文件和text-button.js文件中添加上述代码后，它会在wordpress编辑器中添加一个按钮来添加target="_blank"在所选文本中插入链接的顶部。

当我在编辑器中单击 插入/编辑链接 后插入 url 时，它会显示为：

但是在点击按钮后.. 网址将更改为 www.google.com，如代码中所示。

我试图弄清楚我应该在 js 文件中给出什么作为我的 元素变量，但无法弄清楚。

我通过了这里给出的解决方案：

WordPress hook / filter to process link inside a post

这里：

How to set target attribute in tinyMCE

但无法找出问题所在。任何帮助都会非常显着。提前非常感谢。

Answer 1

根据插件的documentation，您需要在 addButton 事件中添加一个回调函数。在这个回调中，你应该完成你想要的。 更新：请确保您在functions.php文件中拥有正确的js文件路径。在我的情况下似乎是$plugin_array['droid'] = get_template_directory_uri() . '/assets/js/text-button.js';您可能错过了资产目录？ p>

试试这样：

(function() {
        tinymce.create('tinymce.plugins.Droid', {
        init : function(editor, url) {
        editor.addButton('droid_title', {
        title : 'Droid Title',
        cmd : 'droid_title',
        image : '',
        onclick: function() {
            var selected_text = editor.selection.getContent();
            var element = "http://www.google.com";
            var return_text = "";
            return_text = '<a href="'+element+'" class="droid_title"  target="_blank">' + selected_text + '</span>';
            editor.insertContent(return_text);
           }
        });

工作示例demo