웹솔루션개발 25년 노하우! 해피CGI의 모든것

CKEditor5가 이전에는 Classic, Ballon, inline 이렇게 3가지 타입이 있었는데요. 이번 에는 Ballon Block, Document 타입의 편집기가 추가되었네요. 특히 Document 타입이 마음에 드는거 같습니다. ^^ 소스다운로드에 Ballon Block, Document 의 2가지 압축파일을 모두 첨부하고 싶었는데요. 현재 CKEditor5 에서 Ballon Block의 소스코드는 제공이 되지 않는 상태네요. 그래서 안타깝게도 Document 의 소스코드 편집기 소스만 첨부해 두었습니다. 사용하는 방법은 2가지 방식이 있습니다. 스크립트를 CDN 방식으로 사용하는 방법과... 첨부된 압축파일을 이용하여 스크립트를 서버에 업로드 하여 사용하는 방식이 있습니다. CDN 방식으로..

CKEditor Youtube Plugin 입니다. CKEditor 에는 youtube Plugin 이 있었습니다. 예전의 Youtube Plugin 보다 기능이 더 강화 되었네요. ^^ *Youtube Plugin 에 추가 기능 안내 1.반응형 선택 기능 2.비디오 이미지와 링크만 달기 기능 3.플레이어 컨트롤 표시 기능 * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예)http://example.com/ckeditor/plugins/youtube - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = ..

* ckeditor - Keep TextSelection Keep TextSelection는 위지윅 모드와 소스 모드 사이를 전환 할 때 텍스트 선택을 유지하도록 도와줍니다. * 라이센스(무료) - MIT * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/textselection - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'textselection'; - 에디터 위지윅 모드에서 원하는 부분을 선택하고 [소스] 버튼을 눌러 소스 모드로 접속하면 위지윅 모드에서 선택한 부분의 선택이 유..

* ckeditor - Spacing Sliders Spacing Sliders는 편집기에서 CSS 값인 line-height 와 letter-spacing 값을 슬라이더로 조절하도록 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/spacingsliders - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'spacingsliders';

* ckeditor - Open Link Open Link는 편집기에서 마우스 우클릭시 노출되는 메뉴에 링크 삽입 메뉴를 사용할 수 있게 합니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/openlink - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'openlink';

* ckeditor - Easy Image - 이 플러그인은 플러그인은 에디터내 이미지 삽입시 이미지 관련 설정을 손쉽게 할 수 있도록 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/imagebase - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'imagebase'; - 이미지를 에디터 전체화면으로 사용하는 버튼입니다. - 이미지는 우측으로 정렬하는 기능입니다. - 이미지에 파란색 그라디언트를 입히는 버튼입니다. ..

버튼 클릭시 기존 위와 같이 나타나던 것을 위와 같이 Dialog 창으로 띄워주는 플러그인 입니다. 기존 작은 창에서 편집하는것보다는 편집이 쉬워지므로, 필수 플러그인 이라 하겠습니다. 설치 방법은 기존 ckeditor 플러그인과 같습니다. 다운로드 받은 파일을 풀어 ckeditor / plugins / 안에 sourcedialog 로 넣습니다. 그리고 ckeditor.js 에 config.extraPlugins = 'sourcedialog'; 를 넣어주시면 됩니다.

CKEditor Special Symbols CKeditor 의 플러그인 중의 하나인 Special Symbols 입니다. 위와같은 심볼들을 에디터에 삽입할 수가 있습니다. http://doksoft.com/soft/ckeditor-special-symbols/configuration.html 위 링크에 접속하시면 해당 환경설정 소스를 확인하실 수 있습니다. config.doksoft_special_symbols = "0x0020-0x002F,x00A0-x02AF,4567-4569,a,b,c"; config.doksoft_special_symbols_use_dialog = false; config.doksoft_special_symbols_popup_width = 400; config.doksoft_sp..

ckeditor 플러그인 Page2Images 입니다. 웹사이트의 이미지를 바로 캡쳐해서 이미지 수정후 위지윅상에 바로 등록이 가능한 플러그인입니다. 설치는 압축을 해제하시고 웹서버에서 바로 실행해보시면 됩니다. 참고사항) ckeditor/config.js 파일에서 아래와 같이 플러그인이 추가가 되었습니다. config.extraPlugins = 'page2images'; 플러그인 폴더는 ckeditor/plugins/page2images 입니다. 아래의 아이콘을 클릭하면 캡쳐 URL을 입력하는 창이 오픈됩니다. 원하시는 캡쳐 URL을 입력하시고 GO버튼을 누르시면 아래와 같이 캡쳐된 이미지가 위지윅 본문에 추가가 됩니다.

쉽게 파일을 업로드 할수 있는 19$ 의 유료 플러그인 입니다. 파일 업로드를 쉽게 할수 있으며, 위지윅 내에 파일다운로드가 바로 생겨서 좋은 플러그인 입니다. 위 버튼을 누르면 바로 파일을 선택할수 있습니다. 파일을 선택하는 즉시 업로드 되며 위지윅내에 파일 다운로드 가 바로 생성됩니다. 간단히 파일을 업로드 하기에는 좋은것 같습니다.