본문 바로가기

tinymce5

[TinyMCE] Content appearance options 종류 (에디터에 커스텀 스타일 적용하는 방법) https://www.tiny.cloud/docs/configure/content-appearance/ TinyMCE | Content appearance options Configure the appearance of content inside TinyMCe's editable area. www.tiny.cloud 먼저 tinyMCE 공식 문서에서 Content appearance options를 테스트하던 중 body_class와 body_id 옵션이 자꾸 적용되지 않았다. 결론적으로 해결방안은 content_css 옵션으로 외부 css파일을 등록하고 그 css파일에 있는 클래스명이나 아이디값을 body_class나 body_id 옵션의 값으로 넣어주면 된다. TinyMCE 에디터 자체가 textar.. 2020. 5. 29.
[TinyMCE] User Interface options 종류 tinymce.init({ selector: 'css선택자', ui options... }); branding: boolean 값 false 시 하단의 'Powered by Tiny'문구를 삭제할 수 있다. premium 유저들에게만 선택적이다. draggable_modal: boolean 값 true 시 생성되는 모달창을 드래그로 움직일 수 있게 된다. elementpath: boolean 값 false 시 하단에 표시되는 요소선택자가 안보이게 된다. font_foramts: 'custom font name=origin font name, sub1, sub2...; other...;' 폰트명을 설정할 수 있다. 하나의 폰트명에 여러개의 폰트를 정할 수 있고 맨앞의 폰트가 없을 시 뒤에 있는게 설정되는 .. 2020. 5. 28.
[TinyMCE] Integration options 종류 tinymce.init({ selector: 'css선택자', integration options... }); auto_focus: '요소의 id값' 에디터가 생성된 후 포커스를 해당 에디터로 자동으로 맞춰준다. init_instance_callback : function(editor) {} 에디터 객체가 초기화 된 후의 콜백함수를 지정할 수 있다. plugins TinyMCE가 로드할 때 로드할 플러그인을 지정한다. 기본적으로 TinyMCE는 플러그인을 로드하지 않는다. 여러개의 플러그인을 로드할 때는 구분자를 ' ' 공백으로 작성한다. 자주 사용하는 플러그인 목록 plugins: [ 'advlist autolink link image lists charmap print preview hr anchor.. 2020. 5. 27.
[TinyMCE] textarea 값 가져오는 방법 TinyMCE 홈페이지를 보면 textarea를 form태그로 감싸 post방식으로 전송하라고 되어있다. 그래서 post방식으로 전송을 해보면 textarea적혀있는 값과 형태에 맞는 태그들이 전부 그대로 전송된다. 그런데 페이지이동없이 처리하는 ajax로 처리하려면 textarea안의 값을 추출해야하는데 javascript의 value로 해보면 textarea의 초기값만 추출되고 수정된 값들은 추출되지 않는다. 에디터를 다음과 같이 수정한 뒤 개발자 도구에서 textarea의 값을 확인해보면 안의 값은 바뀌지 않는걸 확인할 수 있다. TinyMCE는 textarea가 아닌 iframe을 올려 그 안에서 변경되는 값을 적용하기 때문에 textarea의 값은 초기값만 적용된다. 에디터안의 수정된 내용을 가.. 2020. 5. 27.
[TinyMCE] 라이브러리로 textarea 변경하기 TinyMCE 라이브러리는 textarea태그나 div태그의 편집을 도와주는 도구입니다. 라이브러리를 적용하면 기존의 textarea가 다음과 같은 화면으로 출력됩니다. 블로그나 카페에서 많이 사용하던 편집기의 기능들이 대부분 담겨있습니다. 다음은 TinyMCE 공식 홈페이지입니다. TinyMCE의 자세한 설명과 소개글을 확인할 수 있습니다. https://www.tiny.cloud/ The Most Advanced WYSIWYG HTML Editor | TinyMCE Download TinyMCE for free, the most advanced WYSIWYG HTML editor designed to simplify website content creation. www.tiny.cloud 먼저 위의 .. 2020. 5. 27.