OpenMaru에서 제공하는 Xquared 라이브러리를 사용하여 입력 폼을 만들었습니다. 전에는 miniwini.VisualEditor를 사용했었는데, IE에서 밖에 안 된다는 단점이 있습니다. 이번에 사이트 디자인을 좀 바꾸면서 새로운 web 입력툴을 찾아보았는데, Xquared라는 멋진 입력툴이 공개프로젝트로 개발되고 있더군요.
적용하는 방법은 간단합니다. 아래 내용은 굵직한 흐름입니다.
1. 먼저 editor 입력란을 만듭니다. Xquared 한글 홈에 있는 튜토리얼을 보고 따라하면 쉽게 만들 수 있습니다. 배포 바이너리 안에 들어있는 예제 파일을 참조해도 됩니다.
2. form을 디자인합니다. 작성한 글을 memo란 이름으로 폼에 넣어 전송하려면 다음과 같이 폼을 만듭니다. 실제론 글 내용 뿐만 아니라 제목이나 글 쓴이 등, 폼에 들어가야 할 내용이 더 많아지겠지요.
<form id='my_form' action='action.php' method='post'>
<input type='hidden' name='memo' id='memo'>
</form>
3. 전송 버튼을 만듭니다. 물론 버튼으로 하지 않고 적당한 이벤트에 대해서 반응하게 하면 됩니다.
<input type='button' value='Submit' onclick='check_submit()'>
4. 전송하는 스크립트를 작성해줍니다. 여기에서는 버튼을 눌렀을 때 실행할 check_submit()함수를 만들면 되겠죠. 에디터는 xquared 예제 파일에 있는대로 xed 라는 이름으로 생성했다고 가정합니다.
<script>
function check_submit()
{
var obj = document.getElementById("memo");
obj.value = xed.getCurrentContent(true); // memo에 에디터 내용 입력 document.getElementById('my_form').submit(); // my_form 전송
}
</script>
5. 마지막으로 action.php에서 다음과 같이 받아서 처리하면 됩니다. 아래와 같이 하면 입력한 내용의 HTML 내용이 브라우저 화면에 출력될 것입니다.
$memo = $_POST['memo'];
echo $memo;
아직은 툴바를 제대로 구비해 놓지 않아서 기본 기능만 처리 가능합니다. 코드 디스플레이나 목록 등을 처리할 수 있도록 툴바를 보완해야겠습니다. 아 그리고 좀 아쉬운건, 소스 코드레벨로 에디트할 수 있도록 에디터 차원에서 제공을 해 주면 어떨까 하는 생각이 듭니다. HTML 소스코드를 수정하도록 하려면 또 손이 많이 갈 듯 하네요.
Trackback (1)
Comment (4)