about tinymce4

download

예제 소스

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/tinymce/tinymce.min.js"></script> <script type="text/javascript"> tinymce.init({ selector: "#content2", theme: "modern", language: "ko_KR", menubar: false, statusbar: false, toolbar: "insertfile undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image", forced_root_block : "", force_br_newlines : true, force_p_newlines : false, }); </script> <script> $(document).ready(function() { $(".class-event-modify-ok").click(function(){ console.log($("#test").serialize()); tinymce.triggerSave(); console.log($("#test").serialize()); }); }); </script> <form method="post" action="somepage"> <textarea id="content1" style="width:100%">111</textarea> <textarea id="content2" style="width:100%">222</textarea> </form> <div><a href="#" class="class-event-modify-ok">Submit</a></div>

selector 를  textarea로 하면 모든 textarea를 tinymce가 가로채서 보여준다.

별도로 submit 버튼을 이용하는 경우라면 tinymce상의 수정사항은 ajax등 처리하게 전에 반드시 tinymce.triggerSave();를 실행하도록 한다.

특정 textarea에서만 사용하고자 한다면 , textarea 태그에서도 id={id name}으로 설정한 후, seletor = "#{id name}"으로 지정할 수 있다.

toolbar - plugin 이름은 js/tinymce/plugins 이름과 일치한다.

적당히 필요한거 넣고 쓰면 된다.

language: 한글팩은 별도로 다운 받아야 한다. 다운은 여기

statusbar - 하단바

menubar - file 어쩌고...

tinymce를 사용해보면 <p>태그를 알아서 넣어주는데 이것을 사용하지 않으려면 다음을 추가한다.

forced_root_block : "", 

force_br_newlines : true,

force_p_newlines : false,

tinymce로 입력받은 내용은 각종 태그들이 <br /> 처럼 다 들어가 있다. 이를 그대로 textarea로 화면에 쏘면 태그들이 그대로 나타난다. 태그가 태그 역할을 못하고 그냥 텍스트로 인식되고 있는 것이라, 클라이언트에서 javascript등을 활용해서 <br />을 \n 으로 바꿔줘야 한다.

그러나 spring에서 view로 넘겨준 변수 ${contents}를 javascript로 받는 것까지는 알겠는데, 이것을 도대체 어떻게 적절하게 view와 controll을 분리한 상태에서 처리할까 고민하다가(=해봤는데 잘 안되서ㅋ) 그냥 tinymce로 모든 공을 넘겨버렸다.

어차피 tinymce가 에디터로 활용되는 것은 modify 부분이니, detail view만 처리할때는 

readonly : true,

를 추가해서 tinymce가 그냥 <textarea readonly="readonly">를 대신하게 해버렸다 -_-;

속이 시원하다.

tinymce.triggerSave();

이놈 때문에 꼬박 한나절은 씨름했다.

textarea 2개 수정하는데, 도무지 수정사항이 반영이 안되는것이다? 더 열받는 것은 위에 올려둔 소스로 사파리 열어서 실험하면 serialize가 정상적으로 다 되는 것이다; triggerSave()도 정상작동하고.

뭘까 이유가 뭘까 하며 온갖 삽질을 다 하다가 상단 컨텐츠는 수정이 안되고 하단 컨텐츠는 수정이 되는 것을 알았다. -_-;

테스트로 상단만 수정해봤으니 발견했을리가...

또 왜 상단은 수정이 안되고 하단만 수정 되나, 혹시 controlller, dao, model, service 등에서 뭔가 잘못 되었나? 그런거 없었는데 하고 샅샅이 뒤져본 결과 mybatis에 해당 파트 업데이트문에서 하단 컨텐츠만 업데이트 하도록 되어있는것을 발견했다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

아오... 그리고 그때서야 문서 확인해보니 하단만 수정되는게 맞네... 난 도대체 무엇을 위해? ㅠㅠ