wrap plugin 폴더의 images 폴더 밑에 note 폴더 아래에 각 사이즈 별로 다음과 같은 파일을 넣는다.

크기	Law	Precedent
16
48

본 위키 사이트에 올리기 위해 각 크기 별로 이름을 달리했다. 이를테면 48픽셀 짜리는 “law48.png”라는 형식으로 저장했다.

그러나 실제 각 아이콘의 경로는 note폴더 아래에 16과 48각각의 폴더를 쓰므로 나는 폴더만 다르게 하고 이름은 똑같이 저장했다.

이하에서는 각 다른 픽셀별로 아이콘을 폴더만 다를 뿐 이름은 같은 것으로 가정하고 예시를 쓴다.

그리고 도쿠위키 문서 에디터에서 사용할 아이콘은 “toolbar”폴더에 저장되는데, 이것은 어차피 16픽셀 짜리를 사용할 것이므로

나는 toolbar 폴더에는 따로 저장하지 않았다. “toolbar”폴더에 경로를 저장하고 싶으면 취향에 따라 그렇게 해도 된다.

Wrap 플러그인의 폴더 루트 디렉토리의 style.less 파일을 건드린다.

(root)/lib/plugins/wrap/style.less

해당파일의 주석으로 된 부분에 “notes with icons”와 “notes with spans”를 건드린다.

만약 “law”라는 문법을 추가하고자 하면 “wrap_”이라는 접두어 아래에 해당 키워드를 넣으면 된다.

wrap과 precedent를 추가하면 다음과 같다.

/*____________ notes with icons ____________*/
 
/* general styles for all note divs */
div.wrap_info,
div.wrap_important,
div.wrap_alert,
div.wrap_tip,
div.wrap_help,
div.wrap_todo,
div.wrap_download,
div.wrap_law,
div.wrap_precedent {
    padding: 1em 1em .5em 70px;
    margin-bottom: 1.5em;
    min-height: 68px;
    background-position: 10px 50%;
    background-repeat: no-repeat;
    color: inherit;
    overflow: hidden;
}
/* general styles for all note spans */
span.wrap_info,
span.wrap_important,
span.wrap_alert,
span.wrap_tip,
span.wrap_help,
span.wrap_todo,
span.wrap_download,
span.wrap_law,
span.wrap_precedent {
    padding: 0 2px 0 20px;
    min-height: 20px;
    background-position: 2px 50%;
    background-repeat: no-repeat;
    color: inherit;
}

각 wrap 문법별로 아이콘을 지정하고 싶으면 아래 부분에 다음과 같은 코드를 넣으면 된다.

/*____________ law ____________*/
.wrap_law { background-color: #c2efdd; }
.wrap__dark.wrap_law { background-color: #345717; }
div.wrap_law { background-image: url(images/note/48/law.png); }
span.wrap_law { background-image: url(images/note/16/law.png); }
 
/*____________ precedent ____________*/
.wrap_precedent { background-color: #c2efdd; }
.wrap__dark.wrap_precedent { background-color: #345717; }
div.wrap_precedent { background-image: url(images/note/48/precedent.png); }
span.wrap_precedent { background-image: url(images/note/16/precedent.png); }

일단 문법은 완성되었다.

다음의 문법을 실행해보자

"<WRAP center box law 95%>  법률  </WRAP> " 

다음과 같이 나옴을 알 수 있다.

에디터에서 팝업 도움말에 사용되는 단어들을 추가하자.

다음 위치에 로컬 언어를 추가하자.

(root)/lib/wrap/lang/ko/lang.php 

$lang['law']        = '법';
$lang['precedent']        = '판례';

한국언어뿐만 아니라 혹시 모르니 en 폴더에 있는 영어도 똑같이 추가하는 것을 빠트리지 말자.

 (root)/lib/plugins/wrap/action.php
 

handle_toolbar() 함수에서 $event→data[] 배열에 'list' 배열 항목에 끝에 다음을 추가하면 된다.

                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('law'),
                    'icon'   => '../../plugins/wrap/images/note/16/law.png',
                    'open'   => '<'.$syntaxDiv.' center box law 95%>\n'.'<'.$syntaxSpan.' em>\n',
                    'close'  => '</'.$syntaxSpan.'>'.'\n</'.$syntaxDiv.'>\n',
                ),
                array(
                    'type'   => 'format',
                    'title'  => $this->getLang('precedent'),
                    'icon'   => '../../plugins/wrap/images/note/16/precedent.png',
                    'open'   => '<'.$syntaxDiv.' center box precedent 95%>\n'.'<'.$syntaxSpan.' em>\n',
                    'close'  => '</'.$syntaxSpan.'>'.'\n</'.$syntaxDiv.'>\n',
                ),

conf폴더에 보면 $syntaxDiv와 $syntaxSpan의 정의가 나온다.

각각 도쿠위키에서 'WRAP' 문법과 'wrap'문법으로 사용되는 변수들이다.

WRAP은 HTML의 DIV로 구성되어 있기 때문에 박스형태이고,

wrap은 HTMl의 span으로 구성되어 있기 때문에 강조형태이다.

이에 대한 정의는 다시 style.less 파일을 보면 잘 알 수 있다.

도쿠위키의 [관리] → [환경설정]

에서 아무거나 바꾸고 저장한다음. 다시 돌린다음에 재저장하면 캐시가 새롭게 생성된다.

나는 보통 템플릿을 바꾸고 다시 돌린다.

서버의 캐시를 재생성해야만 에디터가 제대로 동작하니까 반드시 캐시를 실행하자.

내가 만든 법과 판례 아이콘이 포함된 WRAP plugin 파일이다.

+ 2023. 6. 22. 기능을 추가하였다 하늘색 글자 기능과, 제목 글자 기능을 추가하였다.

wrap.zip