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 를 사용중입니다.

评论

  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는 어떻게 추가하나요??
    추가방법점 가르켜주세요.ㅠ ㅠ

精华帖

Linux Apache에서 GPTBot·Amazonbot·AhrefsBot의 게시판 이미…
其他 Midjourney, DALL·E, ChatGPT에서 Y2K 파스텔 UI 프롬프…
Linux Cloudflare R2 자동 업로드 구성하기. 특정 폴더에 파일…
WordPress 워드프레스 7.0 관리자 링크 색상 변경 후 이전 색상으…
WordPress 캐시 환경에서 AJAX 댓글(코멘트) 분리로 서버 응답시간…
Linux 아파치 일반 계정 파일 접근 권한 설정과 mod-ruid2 적…
Delphi Delphi IDE 메인 폼 안열림 dproj 설정으로 해결
开发技巧 VSCode 한국어 설정법, Configure Display Language로 U…
其他 RustDesk 자체 서버 구축으로 공용 서버 로그인 문제 해…
Linux Dante SOCKS5 프록시 서버 구축 및 설정
Windows 윈도우 실행파일(exe) 서비스 등록 자동화 쉽게 하는 방…
其他 CLIProxyAPI Windows 설치 가이드
WordPress 그누보드7 데이터를 WordPress WXR로 변환하기
其他 Ollama 설치 경로 C드라이브 고정 문제 해결 및 드라이…
开发技巧 Apache Access Log 기반 도메인별 방문자 카운터 구현
Windows ZImage AI 이미지 생성 환경 구축 방법
Windows 파일 복사 후 실행 배치파일 - 에러 감지 포함
开发技巧 네이버 검색 Open API
开发技巧 네이버 검색광고 키워드 도구 API 검색
开发技巧 MariaDB column_stats 테이블 오류 해결 방법
开发技巧 PHP-FPM 에러 로그 실시간 모니터링
Windows 윈도우11 업데이트 후 네트워크 드라이브 접근 불가 문…
开发技巧 다국어 번역 함수 구현 방법
WordPress "치명적인 오류가 발생했습니다" 디버깅 가이드
Linux Apache 웹 로그 분석하기 – awk와 GoAccess 활용
Kilho.net 칼무리 - 외부 명령으로 캡처 자동화하기
Windows 윈도11 강제업데이트 피하고 윈도10 계속 쓰기
Linux PHP 파일 업로드 용량 늘리기
开发技巧 애드센스 충돌 문제 해결하기
Python Python Playwright로 Edge 브라우저 제어하기