환경:
OS: Mac OSX 10.8.2 (Mountain lion)
WAS: Python Django 1.4.1
DBMS: MySQL 5.5 community edition
Browser: Chrome 버전 23.0.1271.64 (OSX용)
TinyEditor는 굉장히 가벼운 wisywig richtext editor이다. 이리저리 검색을 해보다가 사용하게 되었다.
홈페이지: http://www.scriptiny.com/2010/02/javascript-wysiwyg-editor/
사용법도 간단하고, 쉬운데 언제나 wisywig에디터의 문제인 'post'였다. 많은 wisywig에디터를 이용해보았고, 대부분 post, dosubmit 등의 함수가 있는데. TinyEditor는 그대로 쳤는데 안되는 것.
tinyeditor 홈페이지에는 다음과 같이 기재되어 있다.
삽입 예제: http://www.scriptiny.com/qa/2134/tinyeditor-php-integration-help
form에서 onsubmit에서 에디터의 instance.post() 함수를 호출하는 것.
<form id='editor' action=admin.php method=post onsubmit='editor.post();'>
와 같은 식으로 호출을 하게 했다. 여기서 editor라는 instance는, 아래에서 알 수 있다. tinyeditor를 생성하는 부분을 살펴보자.
new TINY.editor.edit('editor',{ id:'input', width:584,위에서 굵게 처리한 'editor'가 바로 인스턴스 이름인데, 저렇게 해서는 넘어오지 않는다. (크롬의 문제인가? 내 mac에는 webkit기반의 browser밖에 깔려있지 않고, 다른건 귀찮아서 테스트해보지 못하겠다. 이제 webkit의 세상이 온다구요. 하하.)
하지만 저렇게 해서는 TextArea는 value를 얻어오지 못한다. 네트워크 통신을 감시해도 넘어오는 값이 없다는 것을 쉽게 알 수 있다.
그래서 자바스크립트콘솔을 이용해서 좀 지질하게 파싱해본 결과.
onsubmit에 함수를 하나 매핑해서 처리했다.
<!-- form definition -->
<form id="sendForm" method="POST" action="/result/" enctype="multipart/form-data" onsubmit="dosubmit()">
//Javascript function definition
function dosubmit(){
var fileName = document.getElementById("img").src;
fileName = fileName.substr(fileName.lastIndexOf('/')+1);
document.getElementById("filename").value = fileName;
tinyeditor_contents.post();
$("#desc").val(tinyeditor_contents.t.value);
}
//TinyEditor create
var my_instance = new TINY.editor.edit('tinyeditor_contents', {
id: 'tinyeditor',
width: 584,
저런식으로 사전에 post()함수를 호출해준 후에 instance.t.value 로 호출을 하면 값을 얻을 수 있다.
관련된 정보를 명확히 얻을 수 없기에 기재한다.
