썸머노트 에디터 사용?

개발자님께,

 

지금 이곳 에디터도 보니 썸머노트를 사용하신 것 같습니다.

Kboard에 깔끔한 썸머노트를 같이 사용할 수 있다면 정말 좋을 것 같은데요

혹시 썸머노트 설치 가이드를 만드실 계획이 있으신가요? 

혼자서 설치하기에는 능력이 조금 모자라는지라 혹시나 싶어 문의 드립니다.

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기
워드프레스 에러 기술지원 서비스 전문가에게 맡기세요
  • 안녕하세요~^^

    코스모스팜 공식 사이트는 워드프레스가 아닌 자체 기술로 구축된 사이트입니다.

    또한 에디터는 CKEditor를 활용하고 있습니다.

     

    데모 페이지에는 KBoard 기본 스킨에만 썸머노트 에디터가 적용되어 있습니다.

     

    최신 버전의 KBoard 플러그인에서 글쓰기 에디터는 기본적으로

    textarea, 워드프레스 내장 에디터, 썸머노트를 지원하고 있습니다.

    현재는 최신 버전에 포함된 스킨에서만 사용하실 수 있습니다.

     

    KBoard 플러그인 최신 버전을 이용 중이시라면 별도의 설치 과정은 필요없으며

    워드프레스 관리자 -> KBoard -> 게시판 목록 -> 게시판 선택 -> 기본설정 탭에서

    글 작성 에디터를 설정하실 수 있습니다.

     

    KBoard 플러그인 업데이트 방법은 아래의 링크를 참고해보세요.

    KBoard(케이보드) 플러그인 업데이트 방법

    고맙습니다.

  • 빠른 답변 감사 드립니다.

    제가 스킨 업데이트를 안하고 플러그인 업데이트만 해서 editor가 적용안된 것 같습니다. ^^;;

    혹시 스킨 업데이트를 안했다면 스킨 파일의 어떤 부분을 수정하면 썸머노트를 적용할 수 있을까요??

  • 안녕하세요.

    스킨에 따라 코드가 다를 수도 있습니다.

    Default 게시판 스킨으로 안내해드리겠습니다.

    FTP로 접속해서 /wp-content/plugins/kboard/skin/사용중인스킨/editor-fields.php 파일에

    아래의 코드를 찾아서

    <div class="kboard-content">
    	<?php if($board->use_editor):?>
    		<?php wp_editor($content->content, 'kboard_content', array('media_buttons'=>$board->isAdmin(), 'editor_height'=>400))?>
    	<?php else:?>
    		<textarea name="kboard_content" id="kboard_content" class="<?php echo esc_attr($required)?>"<?php if($placeholder):?> placeholder="<?php echo esc_attr($placeholder)?>"<?php endif?>><?php echo esc_textarea($content->content)?></textarea>
    	<?php endif?>
    </div>

    아래의 코드로 교체해보세요.

    <div class="kboard-content">
    	<?php
    	echo kboard_content_editor(array(
    		'board' => $board,
    		'content' => $content,
    		'required' => $required,
    		'placeholder' => $placeholder,
    		'editor_height' => '400',
    	));
    	?>
    </div>

    editor-fields.php 파일이 없는 스킨에서는 editor.php 파일에서 수정해주셔야 할 듯합니다.

     

    /wp-content/plugins/kboard/skin/사용중인스킨/style.css 파일에

    아래의 코드를 찾아서

    #kboard-default-editor .kboard-content { float: left; margin: 0; padding: 9px 0; width: 100%; text-align: center; background-color: white; }
    #kboard-default-editor .kboard-content textarea { display: inline; margin: 0; padding: 0; width: 100%; min-width: 100%; max-width: 100%; height: 250px; min-height: 0; font-size: 13px; border: 1px solid #dcdcdc; box-shadow: none; background: none; background-color: transparent; box-sizing: border-box; }

    아래의 코드로 교체해보세요.

    #kboard-default-editor .kboard-content { float: left; margin: 0; padding: 9px 0; width: 100%; background-color: white; }
    #kboard-default-editor .kboard-content .editor-textarea { display: inline; margin: 0; padding: 5px; width: 100%; min-width: 100%; max-width: 100%; height: 250px; min-height: 0; font-size: 13px; border: 1px solid #dcdcdc; box-shadow: none; background: none; background-color: transparent; box-sizing: border-box; text-indent: 0; }

    고맙습니다.

  • 감사합니다! 썸머노트가 이제 에디터 화면에 보이기 시작합니다!

     

    그런데 에디터 초기화면에 code 보기 필드가 클릭하지 않았는데도 보이는 상태로 출력됩니다.

    https://imgur.com/cBuaXIa

     

    다행스러운 상황은 코드보기를 클릭하면 텍스트 입력필드가 사라지고 코드보기 필드만 보이게 작동하는데요.

    다시 클릭해보아도 역시나 코드보기 화면은 사라지지 않습니다.

    결론적으로 에디터화면에서 코드보기 화면이 사라지지 않는 것이 문제입니다.

     

    테마와의 충돌이면 어쩔 수 없겠지만 혹시나 제가 플러그인을 업데이트 안 해서인지 확인이 어려운데요 혹시 한번 살펴봐 주실 수 있을까요?

     

    적용된 게시판 주소

    https://clinicaltrialtools.com/%ec%9e%90%ec%9c%a0%ea%b2%8c%ec%8b%9c%ed%8c%90/

  • 안녕하세요.

    글쓰기 권한이 없어서 실제 올려주신 페이지에서 확인해보진 못했습니다.

    혹시, CSS 코드도 변경하셨는지요?

    비회원으로도 테스트해볼 수 있도록 설정 변경해주시면 살펴보겠습니다.

    고맙습니다.

  • 예, css 코드도 함께 변경하였습니다. 지금 비회원도 글쓰기 작성가능하도록 설정 변경하였습니다.

    감사합니다

  • 올려주신 페이지에서 게시글 작성 페이지를 저희 쪽에서 확인해보니

    CSS 코드가 변경되어 있지 않은 것을 확인했습니다.

    아래 이미지에서 네모 박스 부분의 텍스트가 .editor-textarea로 적용돼야 합니다.

    https://imgur.com/a/WCKJoe7

     

    혹시 테마나 다른 플러그인에서 캐시 기능이 있다면 비활성화하신 후에 확인해보시겠어요?

    고맙습니다.

  • 크롬 브라우저에서 개발자 도구(F12)를 활용하시면

    CSS 선택자 및 속성을 확인해보실 수 있습니다.

    고맙습니다.

  • ff

좋은 정보와 인맥을 동시에, 워드프레스 사용자 단톡방 참여하기