[TinyMCE] Content appearance options 종류 (에디터에 커스텀 스타일 적용하는 방법)

https://www.tiny.cloud/docs/configure/content-appearance/

TinyMCE | Content appearance options

먼저 tinyMCE 공식 문서에서 Content appearance options를 테스트하던 중 body_class와 body_id 옵션이 자꾸 적용되지 않았다. 결론적으로 해결방안은 content_css 옵션으로 외부 css파일을 등록하고 그 css파일에 있는 클래스명이나 아이디값을 body_class나 body_id 옵션의 값으로 넣어주면 된다.

TinyMCE 에디터 자체가 textarea에 적용된 것처럼 보이기는 하지만 iframe으로 구성되어 있기 때문에 intenal 방식의 css는 적용되지 않는다. 만약 에디터의 스타일을 커스터마이징하고 싶다면 external 방식으로 css를 작성해야한다.

 

content_css: 'path' or 'path, path' or ['path', 'path']

• 외부 css파일의 경로를 넣어주면 된다.
• String안의 ',' 콤마나 배열로 여러개의 css파일을 등록 가능하다.

 

body_class: 'class name' or 'elem1=class name, elem2=class name, ...'

• 생성되는 에디터의 body태그에 클래스명을 추가할 수 있다.
• 요소의 클래스명을 추가할 수 있는 것 같은데 안된다.

 

body_id: 'id name' or 'elem1=id name, elem2=id name, ...'

• 생성되는 에디터의 body태그에 아이디명을 추가할 수 있다.
• 요소의 아이디명을 추가할 수 있는 것 같은데 안된다.

 

content_style: 'elem{property: val}' + 'elem2{property: val}' + ...

 

• iframe으로 생성되는 에디터에 internal 방식의 css를 넣을 수 있게 한다.

예제 코드

content_style: 'body{background-color: yellow}'
            + 'p{background-color:gray; color:red;}'

 

color_map: ['colorcode1', 'customname', 'colorcode2', 'customname' ...]

 

• forecolor, backcolor에 나타나는 색상을 커스터마이징 할 수 있다.

예제 코드

color_map: [
    "000000", "customBlack",
    "808080", "Gray",
    "FFFFFF", "White",
    "FF0000", "Red",
    "FFFF00", "Yellow",
    "008000", "Green",
    "0000FF", "Blue"
]

 

custom_colors: boolean 값

• false 시 사용자 정의 컬러 선택기를 비활성화 한다.