wp.editor.initialise not respecting editor-style.css

Question

It seems when loading an editor with the JavaScript API, editor styles are not respected like they are when it’s loaded with PHP. The documentation on the JS API for the editor seems vague to me but I’m assuming there’s a parameter I’m missing. Still, looking into but wondered if anyone else ran into a fix for this?

My current code is:

<?php
/**
 * Outputs a WYSIWYG TinyMCE editor with support for shortcodes.
 *
 * @since 1.0.0
 */
public function editor( $name, $id, $option, $args ) {

    wp_enqueue_editor();
    wp_enqueue_media();

    $default = isset( $args['default'] ) ? $args['default'] : '';
    $option = ! empty( $option ) ? $option : $default;
    $id_parts = explode( '_', $id );
    $textarea_name = $id_parts[0] . '_' . $id_parts[1] . '[' . $id_parts[2] . '][' . $id_parts[3] . ']';
    ?>
    <textarea class="wp-editor-area" rows="10" autocomplete="off" cols="40" name="<?php echo esc_attr( $textarea_name ); ?>" id="<?php echo esc_attr( $id ); ?>"><?php echo wp_kses_post( $option ); ?></textarea>
    <?php
    add_action( 'admin_footer', function () use ( $id ) {
        ?>
        <script>
        document.addEventListener( 'DOMContentLoaded', () => {
            wp.editor.initialize(
                <?php echo wp_json_encode( $id ); ?>, {
                    tinymce: {
                        wpautop: true,
                        height: 'auto',
                        block_formats: 'Paragraph=p; Heading 2=h2; Heading 3=h3; Heading 4=h4; Heading 5=h5; Heading 6=h6; Preformatted=pre',
                        plugins: 'charmap colorpicker compat3x directionality fullscreen hr image lists media paste tabfocus textcolor wordpress wpautoresize wpdialogs wpeditimage wpemoji wpgallery wplink wptextpattern wpview',
                        toolbar1: 'formatselect bold italic bullist numlist blockquote alignleft aligncenter alignright link wp_more wp_adv'
                    },
                    quicktags: true,
                    mediaButtons: true
                }
            );
        } );
        </script>
        <?php
    }, 100 );
}
0
Stephen Sabatini 4 months 0 Answers 15 views 0

Leave an answer