Wordpress 自定义简码编辑器 [BackboneJS & TinyMCE)答案

【问题标题】：Wordpress custom shortcode editor [BackboneJS & TinyMCE)Wordpress 自定义简码编辑器 [BackboneJS & TinyMCE)
【发布时间】：2014-07-27 18:46:55
【问题描述】：

我使用的是 Wordpress 3.9.1，并且我编写了一个可以正常工作的自定义短代码，但我想对其进行一点自定义当我使用我的简码时，这是管理页面中的渲染：

[toggles title="zaez"]aezaezae[/toggles]

我可以编辑、添加文本或链接到文本“aezaezae”。我想保持这种行为，但让它看起来更漂亮。

所以我使用了一些来自 wordpress 的代码（图库的代码）并做到了：

(function($) {

    var views = {},
        instances = {},
        media = wp.media,
        viewOptions = ['encodedText'];

    // Create the `wp.mce` object if necessary.
    wp.mce = wp.mce || {};

    wp.mce.toggles = {
        shortcode: 'toggles',
        toView: function(content) {
            var match = wp.shortcode.next(this.shortcode, content);

            if (!match) {
                return;
            }

            return {
                index: match.index,
                content: match.content,
                options: {
                    shortcode: match.shortcode
                }
            };
        },
        View: wp.mce.View.extend({
            className: 'editor-toggles',
            template: media.template('editor-toggles'),

            // The fallback post ID to use as a parent for galleries that don't
            // specify the `ids` or `include` parameters.
            //
            // Uses the hidden input on the edit posts page by default.
            postID: $('#post_ID').val(),

            initialize: function(options) {
                this.shortcode = options.shortcode;
            },

            getHtml: function() {
                var attrs = this.shortcode.attrs.named,
                    content = this.shortcode.content,
                    options;

                options = {
                    content: content,
                    title: attrs.title
                };

                return this.template(options);

            }
        })

    };
    wp.mce.views.register('toggles', wp.mce.toggles);
}(jQuery));

这是被调用的模板

<script type="text/html" id="tmpl-editor-toggles">
    <div class="toolbar">
        <div class="dashicons dashicons-edit edit"></div><div class="dashicons dashicons-no-alt remove"></div>
    </div>
    <# if ( data.title ) { #>

            <h2>{{ data.title }}</h2>
            <hr>
            <p data-wpview-pad="1">{{ data.content }}</p>
            <hr>

    <# } #>
</script>

它也可以正常工作，但此时我无法再编辑我的内容了。我查看了图库的功能，但它调用了另一个窗口 (wp.media.gallery)，我希望能够在此默认编辑器中进行编辑...

有人可以告诉我这是否可能并给我一个线索吗？我发现了这个，但就像我说的那样它是用于媒体的（图像...视频） Custom wp.media with arguments support

如果我必须调用一个新窗口来编辑我的简码，我会这样做，但我真的不知道如何..

谢谢！最好的祝福托马斯

【问题讨论】：

你最后是怎么做到的？在这里，您正在创建一个不可编辑的 Mce 视图（这是预期的行为）。您应该在视图中提供编辑工具（例如用 <input> 元素替换文本并通过 JavaScript 控制编辑）。
contenteditable single-line input的可能重复

标签： wordpress backbone.js tinymce editor

【解决方案1】：

这里有一篇关于创建简码的好文章：http://www.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

向下滚动到标题为“Shortcode TinyMCE 编辑器按钮”的部分，您会看到我认为您正在尝试做的示例。

当我们按下简码按钮时，会出现一个对话框提示我们输入简码参数

【讨论】：