Custom WordPress MCE View and shortcode editor

PHP 45.96% CSS 12.98% JavaScript 35.45% HTML 5.60%

wordpress-mce-view-and-shortcode-editor's Introduction

note: updated to work with WordPress 4.2

WordPress custom TinyMCE view and shortcode editor

This file converts a plain WordPress shortcode....

... into a nice custom MCE view that matches the frontend ...

... and lets you click on it ...

... and easily edit the shortcode through a popup ...

.. also adds a button for inserting a new shortcode:

wordpress-mce-view-and-shortcode-editor's People

Contributors

Stargazers

Watchers

wordpress-mce-view-and-shortcode-editor's Issues

Using the same template in front and in tinymce

Hi.
First, thank for your work !
it help me a lot.

I would like to know with we can imagine a system where we can use the same html template in front and in tinymce.

finding a way to merge this to html

public function dtbaker_shortcode_banner($atts=array(), $innercontent='', $code='') {
        extract(shortcode_atts(array(
            'id' => false,
            'title' => 'Special:',
            'link' => '',
            'linkhref' => '',
        ), $atts));

        $banner_id = strtolower(preg_replace('#\W+#','',$title));

        ob_start();
        ?>
        <div class="full_banner" id="banner_<?php echo $banner_id;?>">
            <span class="title"><?php echo $title;?></span>
            <span class="content"><?php echo $innercontent;?></span>
            <?php if($link && $linkhref){ ?>
            <a href="<?php echo $linkhref;?>" class="link dtbaker_button_light"><?php echo $link;?></a>
            <?php } ?>
        </div>
        <?php
        return ob_get_clean();
    }

and

public function print_media_templates() {
        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;
        ?>
        <script type="text/html" id="tmpl-editor-boutique-banner">
            <div class="boutique_banner_{{ data.type }}"></div>
            <div class="full_banner" id="banner_{{ data.id }}">
                <span class="title">{{ data.title }}</span>
                <span class="content">{{ data.innercontent }}</span>
                <# if ( data.link ) { #>
                    <# if ( data.linkhref ) { #>
                        <a href="{{ data.linkhref }}" class="link dtbaker_button_light">{{ data.link }}</a>
                    <# } #>
                <# } #>
            </div>
        </script>
        <?php
    }

thanks

GetContent fired twice

Hi, i've noticed a stange behavior

when puttin a console.log on the 'getContent' this event is fired twice or more time...

I'm looking for a way to have thie event fired only one time...any idea ?

    public function admin_print_footer_scripts() {
        if ( ! isset( get_current_screen()->id ) || get_current_screen()->base != 'post' )
            return;
        ?>
        <script type="text/javascript">
            (function($){
                var media = wp.media, shortcode_string = 'boutique_banner';
                wp.mce = wp.mce || {};
                wp.mce.boutique_banner = {
                    shortcode_data: {},
                    template: media.template( 'editor-boutique-banner' ),
                    getContent: function() {
                        console.log('getContent')
                            var options = this.shortcode.attrs.named;
                            options['innercontent'] = this.shortcode.content;
                            return this.template(options);
                        },
                    View: {
                        // before WP 4.2:
                        template: media.template( 'editor-boutique-banner' ),
                        ...

It's hard to find any good examples of creating TinyMCE plugins with editor preview, and this is the best one yet. However, it fails with Underscore and wp.media.template in WordPress 4.5.x. Any chance this code can be updated?

Required Fields for mce.views.register

More of a question because youre the only reliable information about this.

I understand the second argument for register accepts a View object for extending. What is the basic requirements for this just to get something in tinymce?

I wish wordpress includes usage docs... :(

Trigger the editor on an shortcode attribute

Is it possible to enable the editor only when an attribute is set?

eg: only enable the editor when the shortcode has the attribute abc: [test abc=1 /]

Typo in file name

Typo.. in file name

/views/dtbake_shortcode_banner_view.php

should be

/views/dtbaker_shortcode_banner_view.php

Problem with editing single type shortcode

Hi,

when I try to use your shortcode without content so something like this.
[boutique_banner title="hello world" link="more" linkhref="#"] it works until I want to edit it.

When I try to edit the shortcode via the popupWindow It will not edit the shortcode, but instead it inserts new one to the editor, so I end up with tho shortcodes instead of one.

dtbaker / wordpress-mce-view-and-shortcode-editor Goto Github PK

wordpress-mce-view-and-shortcode-editor's Introduction

WordPress custom TinyMCE view and shortcode editor

wordpress-mce-view-and-shortcode-editor's People

Contributors

Stargazers

Watchers

Forkers

wordpress-mce-view-and-shortcode-editor's Issues

Recommend Projects

Recommend Topics

Recommend Org