Snippets

Red Six nezjpK: Untitled snippet

Created by Frank Parent
admin.js
Raw 
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
(function() {
    'use strict';

    tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
        editor.addButton( 'my_mce_button', {
            title: 'Red Six Components',
            icon: 'icon redsix-mce-icon',
            type: 'menubutton',
            menu: [
                {
                    text: 'Containers',
                    menu: [
                        {
                            text: 'Spotlight Boxes',
                            onclick: function() {
                                editor.windowManager.open( {
                                    title: 'Insert a spotlight box',
                                    body: [
                                        {
                                                type: 'textbox',
                                                name: 'txtTitle',
                                                label: 'Box Title',
                                                value: ''
                                        },
                                        {
                                                type: 'textbox',
                                                name: 'txtContent',
                                                label: 'Box Content',
                                                value: '',
                                                multiline: true,
                                                minWidth: 300,
                                                minHeight: 100
                                        },
                                        {
                                                type: 'textbox',
                                                name: 'txtURL',
                                                label: 'Box URL',
                                                value: ''
                                        }
                                    ],
                                    onsubmit: function( e ) {
                                        editor.insertContent( '[spotlightbox title="' + e.data.txtTitle + '" text="' + e.data.txtContent + '" url="' + e.data.txtURL + '"]');
                                    }
                                });
                            }
                        }
                    ]
                },
                {
                    text: 'Layouts',
                    menu: [
                        {
                            text: 'Half (1/2)',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<div class="col-sm-6">' + editor.selection.getContent() + '</div>');
                            }
                        },
                        {
                            text: 'One Third (1/3)',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<div class="col-sm-4">' + editor.selection.getContent() + '</div>');
                            }
                        },
                        {
                            text: 'Two Thirds (2/3)',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<div class="col-sm-8">' + editor.selection.getContent() + '</div>');
                            }
                        }
                    ]
                },
                {
                    text: 'Titles',
                    menu: [
                        {
                            text: 'Section Title',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<h2 class="section-title">' + editor.selection.getContent() + '</h2>');
                            }
                        },
                        {
                            text: 'Small Title',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<h3 class="small-title">' + editor.selection.getContent() + '</h3>');
                            }
                        }
                    ]
                },
                {
                    text: 'Font Size',
                    menu: [
                        {
                            text: 'Text Small',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<span class="fs-14">' + editor.selection.getContent() + '</span>');
                            }
                        },
                        {
                            text: 'Text Medium',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<span class="fs-22">' + editor.selection.getContent() + '</span>');
                            }
                        },
                        {
                            text: 'Text Large',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<span class="fs-36">' + editor.selection.getContent() + '</span>');
                            }
                        },
                        {
                            text: 'Text X-Large',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<span class="fs-48">' + editor.selection.getContent() + '</span>');
                            }
                        }
                    ]
                },
                {
                    text: 'Menu',
                    menu: [
                        {
                            text: 'Menu Prices',
                            onclick : function() {
                                editor.focus();
                                editor.selection.setContent('<span class="menu-price">' + editor.selection.getContent() + '</span>');
                            }
                        },
                    ]
                },
            ]
        });
    });
})();
editor-style.css
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
//*******************************************************************************
// TINYMCE VISUAL STYLES
// This stylesheets contains only the styles that will be applied in the TinyMCE
// wysiwyg editor in the WordPress Admin. Useful to differenciate the content
// that had some custom styling applied on it from the normal stuff.
//*******************************************************************************/


#tinymce.wp-editor {
    font-family: Arial, Helvetica, sans-serif;
    margin: 10px;
}

#tinymce.wp-editor a {
    color: #4CA6CF;
}

#tinymce.wp-editor .big-title {
  font-size: 16px;
  font-weight: bold;
}

#tinymce.wp-editor .page-title {
  background-color: #2fa568;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 10px;
  margin: 4px 0 10px;
}

#tinymce.wp-editor .small-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
  margin: 4px 0 10px;
}

#tinymce.wp-editor .small-title {
  display: block;
  font-size: 12px;
  text-decoration: uppercase;
  text-decoration: underline;
  margin: 4px 0;
}

#tinymce.wp-editor .fs-14 { font-size: 10px; }
#tinymce.wp-editor .fs-16 { font-size: 14px; }
#tinymce.wp-editor .fs-18 { font-size: 16px; }
#tinymce.wp-editor .fs-22 { font-size: 20px; }
functions.php
Raw 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// Tell the TinyMCE editor to use a custom stylesheet
add_editor_style('/assets/css/editor-style.css');


/**
 * Add the custom TinyCME button for the Red Six shortcodes
 */
function my_add_mce_button() {
    // check user permissions
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    // check if WYSIWYG is enabled
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_add_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
add_action('admin_head', 'my_add_mce_button');


// Declare script for new button
function my_add_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() .'/assets/js/admin.js';
    return $plugin_array;
}


// Register new button in the editor
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.