Skip to content

Instantly share code, notes, and snippets.

@dungtd91

dungtd91/editor-style.css

Forked from WPsites/editor-style.css
Created December 6, 2018 09:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dungtd91/e3d7c530169fd8117df34a060aa970c8 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dungtd91/e3d7c530169fd8117df34a060aa970c8 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @WPsites WPsites revised this gist Oct 23, 2012. 1 changed file with 24 additions and 0 deletions.
    24 changes: 24 additions & 0 deletions editor-style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@


    /*
    editor styles
    */

    .Bold{
    font-weight:bold;
    }
    .Medium{
    font-size:140%;
    }
    .Large{
    font-size:190%;
    }
    .Orange{
    color:orange;
    }
    .Grey{
    color:grey;
    }
    .Green{
    color:green;
    }
  2. @WPsites WPsites created this gist Oct 23, 2012.
    139 changes: 139 additions & 0 deletions functions.php
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    <?php

    /**
    * -----------------------
    * TINYMCE STYLES DROPDOWN
    * -----------------------
    */


    /*
    Add style select dropdown to tinymce
    */

    add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

    function my_mce_buttons_2( $buttons ) {
    array_unshift( $buttons, 'styleselect' );
    return $buttons;
    }


    /*
    Create some tinymce style definitions for the dropdown
    */

    add_filter( 'tiny_mce_before_init', 'my_mce_before_init' );

    function my_mce_before_init( $settings ) {

    $style_formats = array(
    array(
    'title' => 'Orange',
    'inline' => 'span',
    'classes' => 'Orange'
    ),
    array(
    'title' => 'Orange Bold',
    'inline' => 'span',
    'classes' => 'Orange Bold'
    ),
    array(
    'title' => 'Orange Medium',
    'inline' => 'span',
    'classes' => 'Orange Medium'
    ),
    array(
    'title' => 'Orange Large',
    'inline' => 'span',
    'classes' => 'Orange Large'
    ),
    array(
    'title' => 'Grey',
    'inline' => 'span',
    'classes' => 'Grey'
    ),
    array(
    'title' => 'Grey Bold',
    'inline' => 'span',
    'classes' => 'Grey Bold'
    ),
    array(
    'title' => 'Grey Medium',
    'inline' => 'span',
    'classes' => 'Grey Medium'
    ),
    array(
    'title' => 'Grey Large',
    'inline' => 'span',
    'classes' => 'Grey Large'
    ),
    array(
    'title' => 'Green',
    'inline' => 'span',
    'classes' => 'Green'
    ),
    array(
    'title' => 'Green Bold',
    'inline' => 'span',
    'classes' => 'Green Bold'
    ),
    array(
    'title' => 'Green Medium',
    'inline' => 'span',
    'classes' => 'Green Medium'
    ),
    array(
    'title' => 'Green Large',
    'inline' => 'span',
    'classes' => 'Green Large'
    ),





    );

    /* FURTHER EXAMPLES
    $style_formats = array(
    array(
    'title' => 'Button',
    'selector' => 'a',
    'classes' => 'button'
    ),
    array(
    'title' => 'Callout Box',
    'block' => 'div',
    'classes' => 'callout',
    'wrapper' => true
    ),
    array(
    'title' => 'Bold Red Text',
    'inline' => 'span',
    'styles' => array(
    'color' => '#f00',
    'fontWeight' => 'bold'
    )
    )
    );
    */

    $settings['style_formats'] = json_encode( $style_formats );

    return $settings;

    }

    /*
    Add your editor stylesheet to tinymce so that they can be previewed.
    You'll still need to make sure these styles are represented in your client side less/css
    */

    add_action( 'admin_init', 'add_my_editor_style' );

    function add_my_editor_style() {
    add_editor_style( 'editor-style.css' );
    }
    23 changes: 23 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    /*
    editor styles
    */


    .Bold{
    font-weight:bold;
    }
    .Medium{
    font-size:140%;
    }
    .Large{
    font-size:190%;
    }
    .Orange{
    color:orange;
    }
    .Grey{
    color:grey;
    }
    .Green{
    color:green;
    }