TinyMCE에 스타일(CSS) 추가하기

2017-12-16

김 태영

워드프레스의 TinyMCE는 다양하게 기능을 추가할 수 있다.
그 중 add_editor_style( $stylesheet )을 사용하여 에디터에 Style을 쉽게 추가할 수 있는데, Admin의 에디터에선 스타일이 적용되나, Front의 에디터에는 스타일이 적용되지 않는 문제가 있다.

이 때 사용하면 되는 함수를 기록한다.

테마의 functions.php 편집

우선 에디터에 스타일을 불러오는 add_editor_style( $stylesheet ); 함수를 사용해서 스타일을 추가한다.

add_editor_style( get_theme_file_uri( 'css/editor-style.css' ) );

이렇게 하면 Admin의 에디터에서 해당 스타일을 불러오게 된다.
※ child 테마를 대비해 CSS 파일 경로를 get_theme_file_uri로 감싸줬다.

이제 Front의 에디터에서도 스타일을 불러올 수 있게 다음 코드를 추가하면 된다.

/**
 * TinyMCE
 * https://codex.wordpress.org/TinyMCE
 */
function custom_TinyMCE_format( $in ) {
    $in['content_css'] = get_theme_file_uri( 'css/editor-style.css' );
    return $in;
}
add_filter( 'tiny_mce_before_init', 'custom_TinyMCE_format' );

파일 경로를 add_editor_style과 동일하게 맞춰주면 된다.

참고 자료

WordPress Code Reference의 add_editor_style() 함수: https://developer.wordpress.org/reference/functions/add_editor_style/
WordPress Codex의 TinyMCE 설명: https://codex.wordpress.org/TinyMCE