使用所见即所得编辑器插入时修改链接

时间:2014-12-09 作者:luke

是否有可能连接到WordPress的编辑器中,以便在通过WYSIWYG编辑器插入指向内部内容的链接时,将该链接帖子的帖子id作为数据属性添加到链接中?

1 个回复
SO网友:birgire

插入的内部链接的HTML是由Javascript生成的,所以我不知道有什么简单的方法可以更改它。

HTML生成由wpLink.htmlUpdate 方法(HTML模式)和wpLink.mceUpdate 方法(TinyMCE模式),在/wp-includes/js/wplink.js 文件

以下是一些想法:

向插入的链接添加查询参数:

我们可以向插入链接的url添加包含帖子ID信息的查询参数,例如:

http://example.dev/hello-world/?wpse_pid=475
具有以下功能:

/**
 * Append the wpse_pid query argument to inserted links
 *
 * @see http://wordpress.stackexchange.com/a/170836/26350
 */

add_filter( \'wp_link_query_args\', function( $query ) {
    add_filter( \'post_link\', \'wpse_post_link\', 10, 2 );
    return $query;
});

add_filter( \'wp_link_query\', function( $query ) {
    remove_filter( \'post_link\', \'wpse_post_link\', 10 );
    return $query;   
});

function wpse_post_link( $permalink, $post )
{
    if( false === stripos( $permalink, \'?p=\' ) )
            $permalink = add_query_arg( array( \'wpse_pid\' => $post->ID ), $permalink );
    return $permalink;
}
下面的屏幕截图显示了这一点:

link with the wpse_pid parameter

覆盖wpLink.mceUpdate 方法:

以下黑客只是为了好玩,因为这种方法将来可能会改变。

这是对上述代码段的补充。

/** 
 * Override the wpLink.mceUpdate method to modify the inserted link HTML.
 *
 * @see http://wordpress.stackexchange.com/a/170836/26350
 */

add_action( \'admin_footer-post.php\', function(){
?>
<script>
jQuery( document ).ready( function( $ ){
    wpLink.mceUpdate = function(){
            var link,
            attrs = wpLink.getAttrs(),
            editor = tinyMCE.activeEditor;

            wpLink.close();
            editor.focus();

            if ( tinymce.isIE ) {
                editor.selection.moveToBookmark( editor.windowManager.bookmark );
            }
            link = editor.dom.getParent( editor.selection.getNode(), \'a[href]\' );

            // If the values are empty, unlink and return
            if ( ! attrs.href || attrs.href == \'http://\' ) {        
                editor.execCommand( \'unlink\' );
                return;
            }

            // Set the class attribute.
            attrs.class = \'wpse_pid\';

            // Grab the value of the wpse_pid parameter and use as id attribute.
            // Modified version of http://www.sitepoint.com/url-parameters-jquery/
            var results = new RegExp(\'[\\?&]wpse_pid=([^&#]*)\').exec( attrs.href );
            attrs.id = ( results != null ) ? \'wpse_pid_\' + results[1] : \'\'

            // Remove the ?wpse_pid=* part
            // Modified version of http://stackoverflow.com/a/7126657/2078474
            attrs.href = attrs.href.replace(/[\\?&]?wpse_pid=([^&]$|[^&]*)/i, "");

            if ( link ) {
                editor.dom.setAttribs( link, attrs );
            } else {
                editor.execCommand( \'mceInsertLink\', false, attrs );
            }

            // Move the cursor to the end of the selection
            editor.selection.collapse();
    }
});
</script>
<?php
}, 99 );
插入链接的HTML现在具有以下格式:

<a id="wpse_pid_475" 
   class="wpse_pid"  
   title="Hello World" 
   href="http://example.dev/hello-world/">Hello World</a>
其中未修改的链接为:

<a title="Hello World" 
   href="http://example.dev/hello-world/">Hello World</a>
这里我用了class 和id属性,因为它们似乎是tinyMCE编辑器支持的属性。我试过了attrs.data 但那没用。你可能想更深入地了解这一点。

它应该类似于覆盖wpLink.htmlUpdate 方法但这只是概念的证明;-)

另一个想法是在更新期间扫描帖子内容的链接,并使用一些巧妙的regexp替换或一些PHP-DOM修改来修改它们。

希望您可以进一步了解这一点,并根据您的需要进行修改。

结束

相关推荐

是创建多个页面模板,还是创建几个通过TinyMCE添加自定义HTML的基本模板更好?

我在这个问题上犹豫了一段时间,在最近与TinyMCE的一场斗争之后,我想得到一些意见。如果我正在创建具有独特javascript交互、css和标记/内容的非常不同的页面,那么最好创建一个“空白”基础模板,用作画布,通过TinyMCE中添加的标记创建页面,还是创建几个仅由单个页面使用的页面模板?“模板”的命名让我觉得从语义上来说,这是错误的方法,应该使用这样的功能来创建可以插入内容的模板。当我有非常复杂的页面内容,包括嵌套的div、表和自定义UI功能时,我的问题就来了。这些功能通过TinyMCE处理得很糟糕