워드프레스에서 텍스트/HTML 에디터로 NicEdit 사용하기

NicEdit는 textarea를 대체하는 WYSIWYG 에디터입니다.

적용하는 방법도 간단합니다. http://nicedit.com/에 나와있는 코드를 페이지 맨 아래에 붙여넣기만 하면 모든 textarea가 NicEdit로 바뀝니다.

<script src="http://js.nicedit.com/nicEdit-latest.js" type="text/javascript"></script>
<script type="text/javascript">bkLib.onDomLoaded(nicEditors.allTextAreas);</script>

위 코드를 삽입하면 해당 페이지에만 적용되는 것으로 이해했지만, 실제로는 사이트의 모든 textarea를 NicEdit로 변경해버리네요. 그래서 다음과 같은 코드를 사용하면 ID가 'myNicEditor'인 모든 textarea가 NicEdit로 바뀝니다.

<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() {
nicEditors.editors.push(
new nicEditor().panelInstance(
document.getElementById('myNicEditor')
)
);
});
//]]>
</script>

저는 myNicEditor를 comment로 바꾸어서 코멘트(댓글) 입력란을 NicEdit로 사용하고 있습니다. (당분간 사용해보다가 더 좋은 것이 있으면 바꿀 예정입니다.)

그리고 워드프레스 게시판 플러그인인 Kboard의 경우 아직 인라인으로 그림을 올리는 기능이 없습니다(추후 업데이트에서는 아마 추가될 가능성도 있을 것 같습니다). 이 기능을 구현하려면 외부 에디터를 연동시켜야 하는데, 그 중 하나가 네이버 스마트에디터입니다. 하지만 스마트에디터는 연동시키는 것이 꽤 까다로운 편입니다. NicEdit는 쉽게 연동이 가능합니다.

NicEdit를 사용하면 글 중간에 그림을 쉽게 업로드할 수 있습니다. 그림이 어디로 저장될까 궁금해서 업로드된 그림의 경로를 보니 http://i.imgur.com/ghxjWma.jpg 식으로 되어 있네요. 즉, 무료 그림 업로드 사이트인 imgur.com에 업로드되네요. http://imgur.com/ 사이트는 비회원도 이미지를 제한 없이 올릴 수 있지만 비회원의 경우 관리가 불가능하다고 하네요. 그러므로 NicEidt을 사용하여 그림을 올리면 추후 관리가 안 되는 점은 염두에 두어야 할 것 같습니다. 아래 스크린샷과 같이 KBoard 등에서 그림을 쉽게 글 중간에 (즉, 인라인으로) 삽입이 가능합니다.

Ckeditor에 비해 기능은 별로 없지만 그림 삽입 기능은 마음에 드네요.

기본 Textarea를 대체할 특별한 Editor를 찾고 계신다면 NicEdit를 고려해보시기 바랍니다. 이외에도 여기에서 다양한 WYSIWYG 텍스트/HTML 에디터를 살펴볼 수 있습니다.

추가

NicEdit, Ckeditor 등을 사용하면 워드프레스에서 기본적으로 span 등의 HTML 코드를 차단하는 것 같습니다. 이 경우 이미지 업로드나 형광펜 등의 기능을 제대로 이용하지 못할 수 있습니다. 이런 문제가 발생하면 다음 함수를 사용하여 span 등의 코드를 허용하도록 설정해 보시기 바랍니다.

add_filter( 'wp_kses_allowed_html', 'my_allowed_html', 10, 2 );
function my_allowed_html( $tags, $context ){
$tags['span'] = array(
'style' => array(),
'dir' => true,
'align' => true,
'lang' => true,
'xml:lang' => true,
'class' => array(),
);
return $tags;
}

위 함수가 잘 작동하지 않는 경우에는 kses.php(/wp-includes/ 폴더 아래에 있음)에서 해당 태그의 코드를 $allowedtags = array 아래에 추가합니다. (미리 입력되어 있는 코드 형식과 비슷하게 추가하면 됩니다.)