CKEditor 5 플러그인

그누보드용 CKEditor5 플러그인 입니다.

24.0.0 버전이며 온라인 빌더를 이용해서 생성한 파일을 포함합니다.
(https://ckeditor.com/ckeditor-5/online-builder)

입력폼은 기본 한 줄로 표시되며, 스타일을 이용해 기본 크기를 설정할 수 있습니다.

.ck.ck-editor__editable { min-height: 200px !important; }

유튜브 링크 포함시 mediaEmbed 값을 수정하여 크기 조절이 필요한데, CSS 를 통해 구현해 두었습니다.

#bo_v_con div { position: relative; margin-bottom: 1rem; }
#bo_v_con iframe { position: absolute; width: 100%; height: 100%; }

mediaembedediting.js 소스 를 참고해서, providers 을 통해 원하는 스타일로 변경하여 사용하셔도 됩니다.

이미지 업로드는 jpg, png, webp, bmp 를 지원합니다.

테스트는 https://theme.kilho.net/free 에서 할 수 있습니다.

참고로, 해당 사이트의 테마는 Bootstrap 4.5.3, jQuery 3.5.1 를 사용중입니다.

Comments

  1. 이미지 업로드 등 너무 잘동작합니다.
    다만 문의 드리고 싶은것이 있습니다.
    아쉽게도 유투브 등의 링크주소를 넣으면 자동변환되어 매우 편리한데 글수정을 하면 그부분이 사라져 버립니다.
    이부분 어떻게 하면 좋을까 싶네요.
    1. 확인 후 수정하였습니다.
      다시 다운로드 받아주세요.
      1. 감사합니다. 잘되네요! 너무 좋습니다!!
        저는 툴바를 커스텀해서 안쓰는 기능이긴한데 목차 기능도 안되더군요!
        1. 시간날때 온라인 빌더에서 무료로 제공되는 기능은 다 선택하고 생성해서 테스트 해보겠습니다. ^^
          1. 길호님! 에디터 잘 쓰고 있습니다. 혹시 이미지 캡션 기능을 사용하려면 어떻게 해야 하는지 알려 주실수 있나요??
            그리고 관리자 설정에서 내용관리등에서 실제 내용은 있지만 에디터상에서는 내용이 사라져보이는데 혹시 저만 그런걸까요? faq라던지 게시판 상단내용, 하단내용등 다 그런듯 합니다.
  2. 안녕하세요.
    감사하게도 설치 잘했습니다.
    css 설정의 경우 파일이 아니라 인라인으로 그냥 밀어넣어야 할까요?
  3. 다운받아서 설치 테스트 하고 있습니다.

    관리자모드에서 에디터를 사용할 경우

    head.sub.php 에서 상단
    <script>
    // 자바스크립트에서 사용하는 전역변수 선언
    var g5_is_member = "1";
    var g5_is_admin  = "super";
    var g5_is_mobile = "";
    var g5_bo_table  = "";
    var g5_sca      = "";
    var g5_editor    = "";
    var g5_cookie_domain = "";

    이 부분에서 g5_editor 부분이
    <?php echo ($config['cf_editor'] && $board['bo_use_dhtml_editor'])?$config['cf_editor']:''; ?>
    로 되어 있어서 bo_table와  값이 있어야 에디터값을 출력하는 구문이라
    에디터로 이미지를 드래그 하여 업로드 할경우

    /plugin/editor//upload.editor.php?bo_table= 와 같이 request 하는 에러가 발생됩니다.
    ( /plugin/eidtor/cheditor5/upload.eidtor.js 34 line 호출 )
    적절히 수정하여 쓰고 있습니다만,
    그누보드가 smarteidtor2를 기본적으로 사용하면서 이 부분이 적절지 못하게 코딩되어 있는 것 같습니다.
  4. editor.lib.php 15 line 이 잘못된듯 합니다.
    $content = get_text($content, 0); 로 바뀌어야 합니다.
    1. 늦게 확인을 하였습니다.
      빠른 시일내에 수정한 것을 다시 올리도록 하겠습니다.

      감사합니다 ^^
  5. ckbox는 어떻게 추가하나요??
    추가방법점 가르켜주세요.ㅠ ㅠ

Tips & Tech

Others [FTP] 500 Illegal PORT command.
Linux .htaccess 를 이용해서 https 이동하기
Dev tips Imagek 를 이용한 썸네일 생성
Dev tips 파일 포맷 알아내기
GnuBoard 1364 : Field 'xxxxx' doesn't have a default value
GnuBoard 웹폰트 적용하기
GnuBoard CKEditor 5 플러그인
Linux 윈도우 프로그램 실행 (centos7, wine 7.0)
Kilho.net [시크릿DNS] 프록시 혼합 사용 예제
Windows IPv6 켜기, 끄기
GnuBoard 회원 가입일 기준으로 이용기간 정하기
GnuBoard sql_fetch, sql_query 안쓰고 직접 mysql 사용하기
Linux 웹서버 상태 확인 후 자동 재시작 쉘 스크립트
Kilho.net WinDivert 1753 에러 발생시
Dev tips PHP 수정시 적용이 안되는 경우 해결 (opcache 중지)
Others [맥OS] 마우스 휠 스크롤 방향 윈도우와 일치시키는 방…
Dev tips [Ruby] 윈도우에서 pod install 실행시 UTF-8 오류
Dev tips [Ruby] Could not open library 'libcurl'
Kilho.net WinDivert 서비스 종료
Dev tips [Android] Error type 3: Activity class {com.?.MainAc…
Windows 윈도우 서버 2016 IIS 중지
GnuBoard 새 글 정리하기
Dev tips WinDivert 오류코드
Dev tips Curl 을 이용하여 파일 다운로드
Dev tips Curl 을 이용하여 json 을 post 보내기
Views GnuBoard CKEditor 5 플러그인
Kilho.net 칼무리 자동실행이 안 되는 원인를 찾았습니다
Dev tips 워드프레스와 그누보드 연동 모듈
Windows 설치하려고 하는 앱이 Microsoft에서 확인된 앱이 아닙…
Delphi 권한상승