CKEditor in WordPress Comments - full skin

CKeditor를 워드프레스 댓글 편집기로 사용하기

워드프레스에서 CKeditor를 사용할 수 있도록 하는 CKEditor for WordPress와 “Ckeditor With Jquery“와 같은 플러그인이 있습니다. 이러한 플러그인을 사용하지 않고 직접 CKeditor를 다운로드하여 설치한 다음 댓글 시스템과 연결하는 것도 가능합니다. (“Ckeditor With Jquery” 플러그인을 jQuery를 통해 Textarea에 CKeditor를 연동시키는 플러그인입니다. 하지만 예상대로 작동하지 않았고 Ckeditor 버전도 3.6.5로 최신 버전과는 차이가 있습니다.)

CKeditor를 직접 설치하면 원하는 textarea에 쉽게 CKeditor를 사용할 수 있습니다. 그리고 Image Uploader 플러그인을 추가하면 이미지도 업로드가 가능하므로(유료 플러그인이 있음) KBoard 등의 플러그인의 textarea에 CKeditor를 연동시키면 그림 파일도 업로드가 가능할 것 같습니다. 이모티콘, 그림 파일 추가(URL), 표, 하이라이트(형광펜) 등 다양한 기능을 사용할 수 있고 코드 조각(코드 스니핏)도 텍스트 형식으로 삽입할 수 있습니다. 사실 CKeditor를 설치한 이유가 코드 스니핏 삽입 기능 때문입니다. 무심코 워드프레스 댓글에 PHP 코드를 추가하니 예상치 못한 오류가 발생한 적이 있습니다. 그래서 코드 스니핏 추가가 가능한 댓글 입력기를 찾다가 CKeditor를 알게 되었습니다. (비교적 최신 버전에서는 코드 스니핏 추가 기능을 지원합니다.)

CKEditor in WordPress Comments - full skin

CKeditor를 설치하는 방법:

  1. ckeditor.zip 파일을 다운로드합니다.
  2. ckeditor.zip 파일의 압축을 풉니다.
  3. 폴더째 사이트에 업로드합니다. 루트 디렉터리나 아무 디렉터리로 업로드해도 상관 없습니다.)
  4. CKeditor가 사용될 파일을 수정합니다.

ckeditor.zip 파일 다운로드

다음 사이트에서 최신 버전을 다운로드할 수 있습니다: http://ckeditor.com/download. 표준 패키지로 다운로드하면 무난합니다. (여기에 설치된 패키지는 Full Standard 버전입니다.)

Ckeditor에 사용할 플러그인을 선택하여 빌드하려면 다음 빌더 페이지에서 다운로드할 수 있습니다: http://ckeditor.com/builder.

comments.php 파일 수정

다음 두 코드를 comments.php 파일 맨 아래에 추가합니다:

<script type="text/javascript" src="ckeditor/ckeditor.js"></script>

(“ckeditor.js” 파일의 경로는 적절히 수정하시기 바랍니다.)

<script>

CKEDITOR.replace( 'comment' );
</script>

그리고 다음 코드를 함수 파일에 추가합니다:

add_filter( 'comment_form_field_comment', 'my_comment_form_field_comment' );

function my_comment_form_field_comment( $comment_field ) {

$comment_field = '<p class="comment-form-comment">' .
'<textarea id="comment" class="ckeditor" name="comment" cols="45" rows="8" aria-required="true"></textarea>' .
'</p>';
return $comment_field;
}

설치 방법은 이 페이지를 참고하시기 바랍니다.

Ckeditor에서 이미지 표시 문제

이렇게 설정하면 Ckeditor가 정상적으로 작동해야 하지만, 이미지가 제대로 표시되지 않거나 여러 가지 기능이 제대로 작동하지 않을 수 있습니다. 이는 워드프레스에서 특정 태그 사용을 사용하지 못하도록 차단하기 때문입니다. 이 문제를 해결하려면 kses.php(/wp-includes/ 폴더 아래에 있음)에서 다음과 같은 코드를 $allowedtags = array 아래에 추가합니다.

'img' => array ('alt' => array (), 'align' => array (), 'border' => array (), 'height' => array (), 'hspace' => array (), 'longdesc' => array (), 'vspace' => array (), 'src' => array ()),
'h1' => array(
'align' => true,
),
'h2' => array(
'align' => true,
),
'h3' => array(
'align' => true,
),
'pre' => array(
'width' => true,
),

다른 태그도 추가할 수 있습니다. 이제 정상적으로 작동할 것입니다. 스킨은 여러 가지가 있습니다. 마음에 드는 것으로 선택하여 다운로드 받으시기 바랍니다.
CKeditor skins

참고



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.