将wp图库快捷代码插入到自定义文本区

时间:2013-01-27 作者:resa.r

有没有办法将wp gallery短代码插入到自定义metabox文本区域?我想要这样的东西:

在带有文本区域的帖子/页面中新建元框,文本区域下方有一个按钮可打开wp browse media gallery lightbox。然后,当我们选择少量图像作为库时,单击“插入库”按钮将向textarea自定义字段插入短代码。

有可能吗?

谢谢

====== Update: ======

我能够显示媒体库,现在我不知道如何在单击按钮“插入库”时将快捷码插入自定义文本区域

以下是我目前的代码:

HTML

<div class="uploader">
 <textarea name="settings[_cs_shortcode_gallery]" id="_cs_shortcode_gallery"></textarea>
 <input class="button tf-browse-btn" name="_cs_shortcode_gallery_button" id="_cs_shortcode_gallery_button" value="Browse Gallery"/>
</div>
JS公司

var _custom_media = true,
      _orig_send_attachment = wp.media.editor.send.attachment;
  $(\'.tf-browse-btn\').live(\'click\', function(e) {
    var send_attachment_bkp = wp.media.editor.send.attachment;
    var button = $(this);
    var id = button.attr(\'id\').replace(\'_button\', \'\');
    _custom_media = true;
    wp.media.editor.send.attachment = function(props, attachment){
      if ( _custom_media ) {
        $("#"+id).val(attachment.url);
      } else {
        return _orig_send_attachment.apply( this, [props, attachment] );
      };
    }
    wp.media.editor.open(button);
    return false;
  });
  $(\'.add_media\').on(\'click\', function(){
    _custom_media = false;
  });
我现在想要实现的是:

打开模式时如何将“创建库”选项卡设置为默认选项卡将库快捷码插入到自定义文本区域请参见下面的屏幕截图了解详细信息

screenshot 1

screenshot 2

2 个回复
SO网友:Simon Blackbourn

我相信这是可能的,但需要同时使用PHP和jQuery。This plugin by Thomas Griffin 将图像插入元框将是一个很好的起点。

您需要在中的js文件中进行一些挖掘wp-admin/js 并且在wp-admin/includes/media.php.

SO网友:Diosney

是的,这是可能的:)我只需要实现这个功能,然后随你的帖子一起来。

假设你有这个HTML:

<input type="hidden" name="shortcode" value="{{ options.shortcode }}"/>
<br />
<a href="#" class="btn gallery-configure">
     Configure Gallery
</a>
匹配JS 要触发Gallery edit(库编辑)模式并将短代码保存到适当的字段中,请执行以下操作:

/**
 * Gets initial gallery-edit images. Function modified from wp.media.gallery.edit
 * in wp-includes/js/media-editor.js.source.html
 *
 * @params {*} shortcode
 * @return {*}
 */
function select(shortcode) {
    var shortcode = wp.shortcode.next(\'gallery\', shortcode);
    var defaultPostId = wp.media.gallery.defaults.id;
    var attachments;
    var selection;

    // Bail if we didn\'t match the shortcode or all of the content.
    if (!shortcode) {
        return;
    }

    shortcode = shortcode.shortcode;

    if (typeof shortcode.get(\'id\') != \'undefined\' && typeof defaultPostId != \'undefined\') {
        shortcode.set(\'id\', defaultPostId);
    }

    attachments = wp.media.gallery.attachments(shortcode);
    selection = new wp.media.model.Selection(attachments.models, {
        props   : attachments.props.toJSON(),
        multiple: true
    });

    selection.gallery = attachments.gallery;

    /*
     * Fetch the query\'s attachments, and then break ties from the query to allow for sorting.
     */
    selection.more().done(function () {
        // Break ties with the query.
        selection.props.set({
            query: false
        });
        selection.unmirror();
        selection.props.unset(\'orderby\');
    });
    return selection;
}

var $body = jQuery(\'body\');

// Media uploaders.
$body.on(\'click\', \'.gallery-configure\', function () {
    var $this_button = jQuery(this);

    jQuery(\'.media-modal-close\').trigger(\'click\');

    var selection = var selection = select($this_button.parent().find(\'[name="shortcode"]\').val()); // Get the saved selection here.
    var frame = wp.media({
        frame   : \'post\',
        title   : wp.media.view.l10n.editGalleryTitle,
        multiple: false,
        state   : \'gallery-edit\',
        editing : true,

        selection: selection
    });

    frame.on(\'update\', function () {
        var controller = frame.states.get(\'gallery-edit\');
        var library = controller.get(\'library\');
        var new_shortcode = wp.media.gallery.shortcode(library).string(); // Get the new/updated shortcode here.

        $this_button.parent().find(\'[name="shortcode"]\').val(new_shortcode);
    });

    frame.open();
    return false;
});
希望这对您有所帮助,我花了一些时间才弄明白:)

结束

相关推荐

通过ShortCode属性传递标记

祝大家节日快乐。希望有人能帮助我思考我遇到的问题。我有一个插件Im building,允许用户从maps API中提取地址数据,即它验证地址,如果是业务,则提取标记图标、地址详细信息、web链接等,并构建一个短代码以在前端呈现地图。目前正在构建短代码,并通过tinyMCE模式窗口预览结果。创建地图标记内容(标记信息气泡)是导致我变灰的原因。我希望用户能够添加或操作此块的内容,但最终的结果是相当多的标记。到目前为止,我已尝试通过以下其中一个快捷码属性传递生成的标记:[my_gmaps id=\"map\"