====== Ckeditor ======
<WRAP left notice 80%>
  * description : Ckediotr 관련 내용 기술
  * author      : 주레피
  * email       : dhan@repia.com
  * lastupdate  : 2020-03-24
</WRAP>
<WRAP clear/>

===== 이미지 업로드 =====
[[https://jskimmail.blog.me/221600848149|ckeditor  4 + spring + 파일 업로드]] - (주레피) 확인된 자료
[[https://offbyone.tistory.com/78|전자정부 표준프레임워크 - CKEditor 적용하기]]


===== Example =====
[[https://ckeditor.com/docs/ckeditor4/latest/examples/|ckeditor4 example]] \\
[[https://o7planning.org/en/10369/ckeditor-tutorial|ckeditor-tutorial]] \\
[[https://o7planning.org/en/11001/client-side-programming|client-side-programming]] \\

===== Getter, Setter =====
내용 입력 \\
<code javascript>
CKEDITOR.instances.${editor ID}.setData('<p>데이터</p>');
</code>

내용 가져 오기 \\
<code javascript>
CKEDITOR.instance.${editor ID}.getData();
</code>
[[https://qkrrjsgh.tistory.com/34|ckeditor, 자바스크립트로 내용 집어넣기(전체 내용 바꾸기)]]



===== Tip =====
Ajax로 Form 데이터를 전송할 때 CKEDIOTR로 변환 된 textarea값을 \\
다시 변경해야 데이터가 전달된다. \\
<code javascript>
function CKupdate()
{
  for(instance in CKEDITOR.instances)
    CKEDITOR.instances[instance].updateElement();
}
</code>

===== Troubleshooting ======
  * [[https://ckeditor.com/old/forums/Support/Problems-callback-focus|Problems with callback "focus"]]
  * [[https://hybrid1006.tistory.com/entry/ajax-form-submit|ajax form submit]]

===== Ref =====
  * [[https://stackoverflow.com/questions/7658319/set-caret-to-end-after-focus-ckeditor|Set caret to end after focus CKEditor [duplicate]]]
  * [[http://itsys.hansung.ac.kr/cgi-bin/kplus/board/include/PRINT.php3?table=lec_webserverprog&l=24&PERMISION=|자신의 게시판에 CKEditor HTML 편집기 추가하기]]
  * [[https://blog.naver.com/PostView.nhn?blogId=jeep8038&logNo=221359752944&redirect=Dlog&widgetTypeCall=true&directAccess=false|CKEditor를 이용해서 이미지 업로드하기]]
  * [[https://mine-it-record.tistory.com/277|CKEditor4 사용하기 2 (적용 및 이미지 업로드)]]
  * [[https://syaku.tistory.com/270|스프링 파일업로드 - 스프링 프레임워크 게시판 : Spring Framework FileUpload]]
{{tag>주레피 천호동밤안개 ckeditor}}