워드프레스 커스텀 숏코드 편집기 [백본JS & TinyMCE)

워드프레스 커스텀 숏코드 편집기 [백본JS & TinyMCE)

Wordpress 3.9.1을 사용하고 있고 작동하는 사용자 지정 단축코드를 작성했지만 사용자 지정을 조금 하려고 합니다. 단축코드를 사용할 때 관리 페이지의 렌더입니다.

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

편집, 텍스트 추가 또는 "애자재" 텍스트에 링크를 할 수 있습니다.그리고 저는 이 행동을 유지하면서도 더 보기 좋게 만들고 싶습니다.

그래서 워드프레스(갤러리의 코드)의 코드를 사용해서 이렇게 했습니다.

(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), 그리고 이 기본 편집기에서 편집할 수 있으면 좋겠습니다.

누가 가능한지 말해주고 단서를 줄 수 있나요?이걸 찾긴 했지만 제가 말한 것처럼 미디어를 위한 것입니다. (이미지)video) 인수가 지원되는 사용자 지정 wp.media

쇼트 코드를 편집하기 위해 새 창을 호출해야 하는 경우 수행하겠지만 방법을 잘 모르겠습니다.

고마워요! 토마스에게 안부를 전합니다.

쇼트코드 생성에 관한 훌륭한 기사가 있습니다. http://www.smashingmagazine.com/2012/05/01/wordpress-shortcodes-complete-guide/

"Shortcode TinyMCE Editor Button"(짧은 코드 TinyMCE Editor Button) 섹션으로 스크롤하면 내가 생각하기에 당신이 하려는 일의 예를 볼 수 있을 것입니다.

쇼트코드 버튼을 누르면 쇼트코드 파라미터를 입력하라는 대화상자가 나타납니다.

언급URL : https://stackoverflow.com/questions/24082825/wordpress-custom-shortcode-editor-backbonejs-tinymce