컴퓨터

그누보드에 Jodit Pro (유료) 에디터 설치하기 #2

컨텐츠 정보

본문

전편에 이어 그누보드 커스트마이징 절차와 방법에 대해 작성하겠습니다.

참고적으로, 설치 절차는 저의 임의의 판단대로 한 것이니 허접하거나 틀린 방법이더라도 "그럴 수도 있지!" 라는 너그러운 마음으로 양해 바랍니다. ㅠㅠ

또한, 설치 소스는 "무료 버전 설치" 방법에 관한 "볼피드"님의 글 ( https://sir.kr/g5_plugin/7977 )과 소스파일을 참고하였습니다.


먼저, 본 글 맨하단에 있는 첨부파일(editor.zip 파일)을 다운로드 받습니다.

첨부파일 압축을 해제한 후 "그누보드 설치 루트 폴더/plugin" 폴더로 이동합니다.

plugin 폴더에서 "jodit" 폴더를 생성 후 압축해제한 파일 4개를 업로드 하였습니다.


업로드 후 그누보드 루트폴더에 있는 "config.php" 파일을 엽니다.

아래 그림 위치쯤에 사각형에 있는 대로 4줄의 소스를 추가한 후 저장하고 빠져 나옵니다.

define('G5_EDIT_DIR', 'editor');
define('G5_EDIT_URL', G5_URL.'/'.G5_EDIT_DIR);
define('G5_EDIT_DATA_URL', G5_DATA_URL.'/'.G5_EDIT_DIR);
define('G5_EDIT_PATH', G5_PATH.'/'.G5_EDIT_DIR);



그다음 그누보드 관리자 메뉴로 이동합니다.

아래 그림처럼 관리자메뉴 => 기본환경설정 => 에디터선택 에서 "jodit"을 선택합니다. 



* 참고 : 각 게시판 별로 설정 (관리자메뉴->게시판관리->게시판관리->각 게시판 별로 수정하기" 에서  "DHTML에디터사용" 과 "게시판 에디터사용" 을 설정해 주셔야 하는 경우도 있습니다.


그다음 모바일에서도 에디터를 사용할 수 있도록 그누보드 루트 폴더에 있는 "config.php" 파일을 다시 엽니다.

define('G5_IS_MOBILE_DHTML_USE', false);

부분을 아래처럼 "true"로 변경해 줍니다.

define('G5_IS_MOBILE_DHTML_USE', true);


이제 하이라이트 및 작성한 소스코드에 라인번호가 아래 그림처럼 시현되게 하기 위해 "skin"파일을 수정해야 합니다.



하이라이트와 라인번호 부여용 css 파일과 js 파일은 다양한 종류가 있지만, 저는 프리즘(Prism) 서비스를 이용하기로 했습니다.

[ 프리즘 홈페이지 바로가기 ]


프리즘 홈페이지까지 가서 다운로드 받을 필요는 없고 Jodit에 맞는 환경에 맞게 커스트마이징 해놓은 파일을 본 글의 맨아래에 있는 첨부파일2에 업로드(prism.zip) 해 놓았으니 다운로드 후 압축을 해제합니다.

압축파일에는 prism.js 파일과 prism.css 파일 두개가 있습니다.


먼저 "prism.js" 파일을 그누보드 루트폴더 밑에 "js"폴더에 업로드 합니다.

그다음 "prism.css"파일은 그누보드 루트폴더 밑에 "css"폴더에 업로드 합니다.


이제 스킨파일에 위 두 파일을 적용시켜야 합니다.

"그누보드 루트폴더/skin/board/" 폴더 밑에 사용하는 게시판 스킨명 폴더로 들어가면 "view.skin.php" 파일이 있습니다.

그 파일을 열어 8~9번쯤 라인에 


<link rel="stylesheet" href="<?php echo G5_CSS_URL; ?>/prism.css">
<script src="<?php echo G5_JS_URL; ?>/prism.js"></script>

  

위 내용을 붙여넣기 하세요.


그 다음으로 수정해야 할 부분은 "body" 태그에 class="line-numbers" 값을 등록해 주어야 합니다.

body 태크는 기본 그누보드만 사용할 경우에는 그누보드 설치 폴더에 head.sub.php 파일내에 있고 

테마를 적용시켜서 사용할 경우에는 "그누보드설치폴더/theme/테마명폴더" 내에 head.sub.php 파일내에 body 태그가 존재합니다.

body 태그 안에 <body class="line-numbers"> 와 같이 class를 추가해 주세요.


이제 마지막 한가지 절차가 남았습니다.

바로 "그누보드설치폴더/editor" 폴더에 있는 파일을 일부 수정해 줘야 합니다.

총 2개의 파일을 수정해야 하는데요.


"그누보드설치폴더/editor/build/plugins/paste-code" 폴더에 들어가 보면

paste-code.js 파일과 paste-code.es5.js 파일이 바로 그 주인공 입니다.


먼저 paste-code.js 파일을 엽니다.

편집기 검색 기능을 이용해서


language-


로 검색을 해보시면 검색되는 부분이 두군데가 있는데 첫번째 부분인 


<pre class="language-${t}">${(0,i.htmlspecialchars)(a)}</pre>

부분을 

<pre class="language-${t}"><code class="language-${t}">${(0,i.htmlspecialchars)(a)}</code></pre>


로 수정하고 저장하시고 나오면 됩니다.


두번째 파일인 paste-code.es5.js 파일도 수정하기 위해 편집기로 엽니다.


편집기 검색 기능을 이용해서


language-


로 검색을 해보시면 검색되는 부분이 두군데가 있는데 첫번째 부분인 


return '<pre class="language-'.concat(t, '">').concat((0, n.htmlspecialchars)(a), "</pre>")

부분을 

return'<pre class="language-'.concat(t,'">').'<code class="language-'.concat(t,'">').concat((0,n.htmlspecialchars)(a),"</code></pre>")

로 수정하시고 저장하고 나오면 모두 끝이 납니다.


이제 게시판의 글쓰기로 들어가면 jodit 편집기가 글쓰기 폼에 뜨는게 보이시죠?

코드 입력기가 정상 작동되는지 확인 하기 위해 아래 그림처럼 코드 작성을 해보도록 하세요.







모두 끝이 났습니다. 

수고 하셨습니다.

관련자료

댓글 0
등록된 댓글이 없습니다.
Total 5 / 1 Page
번호
제목
이름

최근글


새댓글


알림 0