[레드마인 플러그인] Redmine Code Snippet of CKEditor

'레드마인'을 주제로 다루는 본문 글은 아래 링크를 클릭해주세요.

[레드마인] 레드마인 소개

'레드마인 플러그인'을 주제로 다루는 본문 글은 아래 링크를 클릭해주세요.

[레드마인 플러그인] 플러그인 소개

이번에는 CKEditor Plugin에 Plugin을 설치하고자 합니다. 이게 무슨 말이냐구요?

CKEditor도 플러그인 이지만, CKEditor내에서도 확장 기능을 제공하기 때문에 추가 플러그인 설치가 가능합니다.

위 그림에서 체크한 부분을 클릭하면, 아래 그림처럼 코드 에디터가 생성됩니다.

코드 입력 후 '확인' 버튼을 클릭하면 아래 그림처럼 코드가 깔끔하게(색상이 입혀진) 출력됩니다.

코딩 관련 일감을 올린다면 반드시 필요한 기능이죠!

자, 그럼 설치 방법을 설명하겠습니다.

(혹시 몰라 CKEditor 1.15기준으로 필요한 플러그인 파일을 첨부하였으니 다운로드 받아서 사용하세요.)

CKEditor 확장 Plugins.zip

1. CKEditor 추가 플러그인 다운로드

CKEditor의 공식 플러그인을 다운로드 받는 주소는 https://ckeditor.com/cke4/addons/plugins/all 입니다.

필요한 플러그인은 다음과 같습니다.

codesnippet

lineutils

widget

widgetselection

위 첨부된 파일을 다운로드 받거나, 해당 사이트에서 다운로드 받아 준비해주세요.

준비된 플러그인 파일을 아래 경로에 복사합니다.

D:\Bitnami\redmine-3.4.5-0\apps\redmine\htdocs\plugins\redmine_ckeditor\assets\ckeditor-contrib\plugins

2. CKEditor 추가 플러그인 설치

아래 경로에 존재하는 'config.js'를 편집합니다.

D:\Bitnami\redmine-3.4.5-0\apps\redmine\htdocs\plugins\redmine_ckeditor\assets\ckeditor

아래가 수정하기 전, 원본 상태입니다.

아래 내용을 추가하여 그림과 같이 수정합니다.

config.extraPlugins = 'widgetselection';

config.extraPlugins = 'lineutils';

config.extraPlugins = 'widget';

config.extraPlugins = 'codesnippet';

이제 레드마인 서버를 재시작하고, 레드마인 사이트에서 CKEditor 설정을 클릭하면 아래 그림처럼 '코드 스니펫 삽입'이 표시될 겁니다.

해당 항목을 '추가'하여 '적용'을 클릭하면 코드 스니펫 사용이 가능합니다!

...

그런데... 일감에 코드 스니펫 기능을 작성하고 나서는 아래 그림처럼 평범하게 표시됩니다.

만약, 색상을 예쁘게 적용하고 싶다면 'highlightjs' 플러그인을 추가 설치해야 합니다.

3. 색상 적용을 위한 higilightjs 플러그인 설치

플러그인 설치를 위해 레드마인 plugins 경로로 이동합니다. (해당 플러그인은 CKEditor의 추가 플러그인이 아닙니다.)

아래 명령어를 실행하여 플러그인을 다운로드 받습니다.

git clone https://github.com/dominch/redmine_highlightjs

아래 명령어를 실행합니다.

bundle install

다음으로 아래 명령어를 실행합니다.

bundle exec rake redmine:plugins:migrate RAILS_ENV=production

이제 레드마인 서버를 재시작하고, 레드마인 사이트의 플러그인 설정을 보면 아래 그림처럼 표시될 겁니다.

그리고 일감에 코드 추가 후 확인하면 아래 그림처럼 색상이 입혀진 것을 확인 할 수 있습니다!

1. CKEditor 추가 플러그인 다운로드

플러그인 설치 및 삭제 관련 글에 작성돼 있습니다만, 다시 설명드리겠습니다.

Synology NAS 버전에 따라 플러그인 파일 복사 방법이 다른 것을 확인했습니다. 이유는 모르겠으나, 두 가지 방법을 시도하여 파일을 복사합니다.

CKEditor의 공식 플러그인을 다운로드 받는 주소는 https://ckeditor.com/cke4/addons/plugins/all 입니다.

필요한 플러그인은 다음과 같습니다.

codesnippet

lineutils

widget

widgetselection

본문에 첨부된 파일을 다운로드 받거나, 해당 사이트에서 다운로드 받아 준비해주세요.

putty를 실행하여 /home/redmine/redmineplugins/로 이동합니다.

(잘 모르시겠다면, 플러그인 소개 본문부터 읽어주세요.)

해당 경로에서 redmine_ckeditor/assets/ckeditor-contrib/plugins로 준비된 파일들을 복사할 겁니다.

mv codesnippet /home/redmine/redmine/plugins/redmine_ckeditor/assets/ckeditor-contrib/plugins

mv lineutils /home/redmine/redmine/plugins/redmine_ckeditor/assets/ckeditor-contrib/plugins

mv widget /home/redmine/redmine/plugins/redmine_ckeditor/assets/ckeditor-contrib/plugins

mv widgetselection /home/redmine/redmine/plugins/redmine_ckeditor/assets/ckeditor-contrib/plugins

정상적으로 파일이 복사되면 아래와 같이 표시됩니다.

2. CKEditor 추가 플러그인 설치

복사한 플러그인 파일들이 올바르게 적용되도록 'config.js'를 수정해야 합니다.

redmine_ckeditor/assets/ckeditor/경로로 이동합니다.

cd /home/redmine/redmine/plugins/redmine_ckeditor/assets/ckeditor

해당 경로에 존재하는 'config.js'를 수정해야 합니다. 아래 명령어를 실행합니다.

vi config.js

'i'를 입력하면 편집모드가 됩니다. 아래 내용을 입력해주세요.

        config.extraPlugins = 'widgetselection';

config.extraPlugins = 'lineutils';

config.extraPlugins = 'widget';

config.extraPlugins = 'codesnippet';

입력을 다 했으면, ':w'를 입력하고 엔터키를 누르면 저장이되고, ':q'를 입력하고 엔터키를 누르면 에디터 종료가 됩니다.

이제 레드마인 서버를 재시작하고, 레드마인 사이트에서 CKEditor 설정을 클릭하면 아래 그림처럼 '코드 스니펫 삽입'이 표시될 겁니다.

해당 항목을 '추가'하여 '적용'을 클릭하면 코드 스니펫 사용이 가능합니다!

...

그런데... 일감에 코드 스니펫 기능을 작성하고 나서는 아래 그림처럼 평범하게 표시됩니다.

만약, 색상을 예쁘게 적용하고 싶다면 'highlightjs' 플러그인을 추가 설치해야 합니다.

3. 색상 적용을 위한 higilightjs 플러그인 설치

플러그인 설치를 위해 레드마인 plugins 경로로 이동합니다. (해당 플러그인은 CKEditor의 추가 플러그인이 아닙니다.)

아래 명령어를 실행하여 플러그인을 다운로드 받습니다.

git clone https://github.com/dominch/redmine_highlightjs

아래 명령어를 실행합니다.

bundle install

다음으로 아래 명령어를 실행합니다.

bundle exec rake redmine:plugins:migrate RAILS_ENV=production

이제 레드마인 서버를 재시작하고, 레드마인 사이트의 플러그인 설정을 보면 아래 그림처럼 표시될 겁니다.

그리고 일감에 코드 추가 후 확인하면 아래 그림처럼 색상이 입혀진 것을 확인 할 수 있습니다!