Snippets

Red Six nezjpK: Untitled snippet

Created by Frank Parent
View revision

File admin.js Added

  • Ignore whitespace
  • Hide word diff 
+(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>');
+                            }
+                        },
+                    ]
+                },
+            ]
+        });
+    });
+})();

File editor-style.css Added

  • Ignore whitespace
  • Hide word diff 
+//*******************************************************************************
+// 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; }

File functions.php Added

  • Ignore whitespace
  • Hide word diff 
+// 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;
+}
HTTPS SSH

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