Wordpress/TinyMCE - Hook/Filter 在 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;
}

正文-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 编辑器中添加一个 button 来添加 target="_blank" 在所选文本中插入的 link 之上。

当我在编辑器中单击 insert/edit link 后插入 url 时，它显示为：

但是在单击按钮后..url 正在更改为 www.google.com，如代码中给出的那样。

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

我完成了此处给出的解决方案：

这里：

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'; 你错过了资产目录可能是？

这样试试：

(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

Wordpress/TinyMCE - Hook/Filter 在 url 中添加 Target ="_blank"

Wordpress/TinyMCE - Hook/Filter to add Target ="_blank" in a url

javascript

php

wordpress

tinymce

tinymce-4