可以在WordPress编辑器中创建可点击的占位符图像(是否应调出上传程序)?

时间:2013-01-27 作者:INT

在一个项目中,我希望在实际的视觉编辑器区域中有按钮,用户可以单击占位符图像,并打开上载对话框。

我看到人们创建自己的按钮来添加框,然后用户应该用鼠标选择框,然后单击添加媒体上传。对我来说,这似乎注定会带来糟糕的用户体验。因此,我想看看是否有人见过这样的插件。

http://s-plugins.wordpress.org/visual-editor-custom-buttons/assets/screenshot-4.png?rev=641514

想象一下,你可以点击“在这里插入图像”,并打开一个上传对话框。

1 个回复
最合适的回答,由SO网友:kaiser 整理而成

随着TinyMCE的更新和API的变化,WordPress更新后,这样的答案可能会变得不可行/不可用 - by @TomJNowell

虽然我同意Tom的观点,但仍然有一个笼统的答案来解释一般概念和不移动的部分。

设置默认内容的PHP插件首先必须有一些默认内容。还有一个过滤器:

<?php
/* Plugin Name: (#83397) Default TinyMCE Content */

add_filter( \'default_content\', \'wpse83397_add_editor_default_content\' );
public function wpse83397_add_editor_default_content( $content )
{
    if ( "your_post_type" !== get_current_screen()->post_type )
        return $content;

    return sprintf(
        \'<img src="%s" title="Placeholder" />\', 
        plugin_dir_path( __FILE__ ).\'placeholder.png\'
    );
}
然后您只需添加一个事件监听器。实例from the official documentation.

tinymce.activeEditor.on( \'GetContent\', function( e ) {
    console.log( e.content );
} );
全球WordPresswp 对象最后,您只需将“媒体打开”对话框操作附加到内容本身。这是wp 对象,它保存了WordPress核心js的大部分内容。仅键入wp 进入控制台,您将看到在DOM准备好执行以下操作后,您具有全局访问权限:

主干网:Objectfunction ( options )ObjectObjectHeartbeatObjectfunction ( attributes )function ( options )functionmedia 和Backbone 也刚刚击中wp.media. 进入(例如)Chrome开发工具控制台,您将看到自动完成功能,告诉您可用的内容。此外,《媒体图书馆》的作者多米尼克·席林a nice set of demos for the WP Media library on GitHub.

结束