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

심플하고 강력한 기능들을 보유한 위지윅 에디터 TOAST UI Editor 입니다. https://ui.toast.com/tui-editor 페이지에서 에디터의 구동 화면을 볼 수 있습니다. 특이한것은 일반적인 에디터 영역만 노출이 되는것이 아니라, 왼쪽, 오른쪽 화면으로 분리가 되어 있습니다. CB버튼을 통해 Code Block을 추가하고 왼쪽 화면에 명령어 형태의 정해진 값을 입력시에 오른쪽의 에디터 영역에 적용되어 노출이 됩니다. 차트 예시 이미지 : 에디터 영역만 볼려면 오른쪽 하단의 위지윅 버튼을 클릭하면 됩니다. 자세한 사용방법은 https://github.com/nhn/tui.editor/blob/master/docs/v3.0-migration-guide-ko.md 페이지를 참고 하시면 되겠..

- 라이센스 MIT - 설치 방법 혹은 압축 파일을 다운로드한 후 서버에 업로드하여 Putty 등 콘솔로 압축을 풀어도 됩니다. - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 플러그인 js 파일, 플러그인 css 파일을 링크합니다. 2. 언어 JS 파일을 링크합니다. (한국어 : ko) 다른 나라 언어 JS 파일명은 플러그인 사이트를 참고하세요. 3. 에디터에서 사용할 각종 에디터 확장 플러그인을 추가합니다. 각 에디터 확장 플러그인 설명과 데모는 아래 URL을 참고하세요. https://alex-d.github.io/Trumbowyg/documentation/plugins/ 4. 위지윅 에디터를 실행합니다. 5. 에디터와 확장 플러그인의 커스터마이징도 가능하니 해당 문서는 플러그인 사이트를 ..

이번에 소개해 드릴 자료는 에디터 입니다. ^^ ( WYSIWYG Rich Text Editor with HTML5 & jQuery ) 라이센스는 MIT 입니다. 주요특징 - 반응형 인터페이스 - 명령에 대한 글꼴 굉장 아이콘. - 기본 텍스트 서식 일반, 굵게, 기울임꼴, 클릭 시 밑줄. - 선택한 텍스트 나열 및 연결. - 텍스트 선택 시 텍스트 서식 메뉴와 같은 Microsoft Office를 표시합니다. 반응형 인터페이스라고 해서 모바일에서도 사용해 봤는데요. 모바일에서 간단한 텍스트 편집기로 사용하기에는 괜찮은 것 같습니다. 설치 방법 1. 소스 다운로드를 클릭하여 압축을 해제 한다. 2. 폴더에 접근하면 index.html 파일을 브라우저에 호출한다. 그 다음 사용해 보시면 됩니다. 세부적인 ..

MIT 라이센스의 반응형 웹에디터 입니다. #라이센스 MIT 라이센스 입니다. #기능 - Microsoft Word 및 Excel에서 붙여 넣기 기능 - 사용자 정의 테이블 선택, 병합 및 분할 기능 - 미디어 삽입, 이미지 업로드 기능 - CodeMirror, KaTeX(수학기호)를 사용할 수 있습니다. - 반응형 에디터 입니다. #지원 브라우저 #실행 이미지

ckeditor - LoopIndex Track Changes - 이 플러그인은 에디터 다중 사용자 환경에서 각 사용자별 텍스트 변경(추가/삭제) 사항을 추적할 수 있습니다. - 변경사항은 각 사용자에 따라 다르게 색칠되고 사용자 정보를 표시합니다. * 라이센스(무료) - GPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/lite - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'lite'; - 위지윅에디터를 확인하면 아래 아이콘이 추가 된 것을 확인할 수 있습니다. - 문서 내용..

위지윅 에디터 관련 /wys2/fckconfig.js 파일에서 폰트 설정이 있습니다. FCKConfig.FontNames = '고딕;돋움;굴림;궁서;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 폰트추가는 C:\Windows\Fonts 에서 해당 폰트의 오른쪽 마우스를 클릭하여 "속성"의 자세한 정보에서 폰트 제목을 확인하여 추가할 수 있습니다. FCKConfig.FontNames = '나눔손글씨 붓 보통;고딕;돋움;굴림;궁서;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ; 폰트명으로 추가시 에디터에 정상적으로 적용이 되지 않는다면 해당 폰트의 폰트제목으로 적용을 ..

첨부된 압축파일을 받아 압축을 풀고 실행하면 됩니다. settings > program settings 메뉴에서 한국어로 변경할 수 있습니다. 메뉴들이 모두 한국어로 변경된 것을 확인하실 수 있습니다.

* ckeditor - Floating-Tools - 이 플러그인을 에디터 작성시 텍스트를 선택하면 텍스트 관련 툴바가 바로 위에 노출되어 편리합니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/glyphicons - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'floating-tools'; - 노출될 툴바를 설정하려면 아래 소스를 추가로 넣어줍니다. CKEDITOR.config.floatingtools = 'Basic'; ..

* ckeditor - Layout Manager - 이 플러그인은 본문의 레이아웃을 편리하게 조절할 수 있도록 도와줍니다. * 라이센스(무료) - GPLV3, LGPL3, MPL * 설치방법 - 플러그인 파일을 다운로드 받아 ckeditor 가 설치된 폴더내 plugins 폴더안에 업로드 합니다. 예) http://example.com/ckeditor/plugins/layoutmanager - ckeditor 의 설정파일인 config.js 파일을 열어 아래 소스를 추가합니다. config.extraPlugins = 'layoutmanager'; * 데모화면

CKEditor 의 Moono Dark Skin 입니다. 기존의 에디터의 색감이 조금 밋밋하다 하시는분은 Moono Dark Skin 을 추천 합니다. ^^ Moono Dark Skin 은 CKEditor 4.4 버젼에서만 지원 됩니다. 설치는 아래처럼 Config 설정에 Skin 항목 추가해 주시면 됩니다. ^^ 설치가 완료되면 아래의 이미지처럼 Dark 스킨으로 이용할 수 있습니다. ^^