This topic contains 5 replies, has 2 voices, and was last updated by  mcmaster 3 years, 7 months ago.

  • Author
    Posts
  • #4657

    mcmaster
    Participant

    I’ve never used the editor_css option before. It’s defined on https://piklist.com/user-guide/docs/fields/editor/ as “Additional CSS styling applied for both visual and HTML editors buttons, needs to include style tags, can use “scoped”.”

    So, being in a hurry to test something, I tried it:

    array(
    	'type' => 'editor',
    	'field' => 'newsletter_highlights',
    	'label' => __( 'Highlights of this issue' ),
    	'columns' => 12,
    	'options' => array (
    		'media_buttons' => false,
    		'editor_css' => 'style="height: 240px;"',
    		'teeny' => true,
    	),
    ),
    

    But the editor_css value is output between the elements:

    <div id="wp-_post_meta_newsletter_archive_0_newsletter_highlights_0-wrap" class="wp-core-ui wp-editor-wrap tmce-active" style="width: 100%;">
        style="height: 240px;"
        <div id="wp-_post_meta_newsletter_archive_0_newsletter_highlights_0-editor-container" class="wp-editor-container">...</div>
        <div class="uploader-editor">...</div>
    </div>
    

    Am I misunderstanding the usage, or is this a bug?

    Thanks,
    Donna

  • #4658

    mcmaster
    Participant

    Also, is there a better way to limit the height of an editor field? I tried

    	'attributes' => array (
    		'rows' => 3,
    	),
    

    But that doesn’t work.

    Thanks!
    Donna

  • #4659

    mcmaster
    Participant

    And I know I can use editor_class. Just wondering if there is a method that doesn’t require setting up a CSS file. Lazy. 😉

  • #4660

    mcmaster
    Participant

    Okay, so I defined a CSS class and put it into a file in the parts/css folder:

    .mcw-editor-short {
    	height: 140px;
    }

    And then I added editor_class to an editor field:

    		array(
    			'type' => 'editor',
    			'field' => 'newsletter_highlights',
    			'label' => __( 'Highlights of this issue' ),
    			'columns' => 12,
    			'options' => array (
    				'media_buttons' => false,
    				'editor_class' => 'mcw-editor-short',
    				'teeny' => true,
    			),
    		),
    

    But the class is applied to a textarea that is display: none, so it doesn’t affect the height of the editor box. See attached Firebug screenshot.

    Again, could be pilot error … so set me straight if I’m goofing up! 🙂

    Donna

    Attachments:
    You must be logged in to view attached files.
  • #4666

    Steve
    Keymaster

    @mcmaster– These attributes are core WordPress, not Piklist specific. You can see them listed on the wp_editor() page in the codex.

    Here’s an example from WooCommerce:
    'editor_css' => '<style>#wp-excerpt-editor-container .wp-editor-area{height:175px; width:100%;}</style>'

  • #4668

    mcmaster
    Participant

    Ah, I see. I’ll play with that. Thanks!

The topic ‘how to use editor_css?’ is closed to new replies.