그누보드에 markdown 옵션 넣기 > 그누보드5 팁자료실

그누보드5 팁자료실

그누보드에 markdown 옵션 넣기 정보

그누보드에 markdown 옵션 넣기

본문

깃헙에 풀 리퀘스트로 요청을 해 놨지만,  https://github.com/gnuboard/gnuboard5/pull/58

 

기본으로 포함되기가 어려운 부분이 있어서 팁으로 올립니다.

 

1. 처음 설치시에는 sql만들 때 wr_option에 "markdown"을 넣어 두기

  wr_option이 mysql의 data type set이란 것을 사용하기 때문에 이것을 넣어 두어도 사용상에 문제가 없습니다.

  기존 사용자는 phpmyadmin이나 별도의 sql문으로 처리하시면 될것 같습니다.

 

adm/sql_write.sql


`wr_option` set('html1','html2','secret','mail', 'markdown') NOT NULL,

 

2. update될때 markdown으로 올라올 경우에 markdown도 추가함  

bbs/write_update.php


if(preg_match('#html(1|2)|markdown#', strtolower($_POST['html']), $matches))

 

그누보드 순정을 손 보는 것은 위의 2가지입니다. (코드 수정은 2번 한가지죠.. 이렇게 쉽게 되다니..)

 

다음은 마크다운 에디터를 사용하는 스킨과 에디터쪽 수정입니다.

 

1. 해당되는 skin의 write.skin.php에서, html1으로 보내지는 것을 markdown으로 보내기위해서 아래와 같이 수정합니다


$option_hidden .= '<input type="hidden" value="markdown" name="html">';

 

2. 에디터내의 editor.lib.php를 수정해야 됩니다. 

수정시에 <br>이 나와서 그누코드를 열심히 찾아 봤는데 못찾고,  editor.lib.php안에서 한참만에 찾았습니다.


|| ($w == 'u' && isset($write['wr_option']) && strpos($write['wr_option'], 'html') === false && strpos($write['wr_option'], 'markdown') === false )

 

정리하면서 생각해보니 이쪽으로 html이 넘어올 필요가 없으니 그냥 "html"을 "markdown"으로만 변경해도 될 것 같습니다.

 

그 외에 마크다운 에디터에 포함된 이모지 기능을 사용하기 위해서는

utf8mb4를 디폴트로 해주면 좋을 것 같습니다.

config.php


define('G5_DB_CHARSET', 'utf8mb4');
 

 

많은 테스트를 한것은 아니지만,  마크다운 에디터가 깨지지 않고 잘 동작합니다.

비밀글과 마크다운 조합과 메일 옵션등은 테스트 못했습니다. (잘 몰라서.)

 

추가 : 마크다운 에디터에서 mindmap과 chart가 안되는 문제해결을 위해서

bbs/view.php에서 아래를 추가해 주어야 됩니다.


else if (strstr($view['wr_option'], 'markdown'))
    $html = 3;

 

lib/common.lib.php  에서 if($html) 으로만 되어 있는 것을 완전히 매치되게 변경했습니다.

그리고 $html == 3인 경우에만 깨지지 않는 함수만 불러지게 했습니다.


    if ($html == 1 || $html == 2)
    {
        $source = array();
        $target = array();
 
        $source[] = "//";
        $target[] = "";
 
        if ($html == 2) { // 자동 줄바꿈
            $source[] = "/\n/";
            $target[] = "<br/>";
        }
 
        // 테이블 태그의 개수를 세어 테이블이 깨지지 않도록 한다.
        $table_begin_count = substr_count(strtolower($content), "<table");
        $table_end_count = substr_count(strtolower($content), "</table");
        for ($i=$table_end_count; $i<$table_begin_count; $i++)
        {
            $content .= "</table>";
        }
 
        $content = preg_replace($source, $target, $content);
 
        if($filter)
            $content = html_purifier($content);
    }
    else if ($html == 0) // text 이면
    {
        // & 처리 : &   등의 코드를 정상 출력함
        $content = html_symbol($content);
 
        // 공백 처리
        //$content = preg_replace("/  /", "  ", $content);
        $content = str_replace("  ", "  ", $content);
        $content = str_replace("\n ", "\n ", $content);
 
        $content = get_text($content, 1);
        $content = url_auto_link($content);
    } if($html == 3) {
        $content = get_text($content, 0);
    }

 

 

추천
5

댓글 22개

가능하면 그누보드 연관된 것은 그누보드쪽에만 올려주세요.  이곳 저곳 너무 많은 곳에 같은 이슈가 도배되는 경향이 있습니다.  관련된 곳은 주기적으로 다 보고 있으니  한곳에만 올려 주시면 감사하겠습니다. 깃헙은 에디터 본연의 기능만 올려 주시면 감사하겟습니다.
추가된 부분 넣어봤습니다.

마인드맵과 차트는 잘 나옵니다.

그런데


<: &lt; `&lt;`
>: &gt; `&gt;`

```
<textarea>
    <div>test</div>
</textarea>
```


위 부분 출력이 제대로 되지 않네요.

htmlpurifier로 필터링되는건 아닐까요?
하나를 체크하면 하나가 문제가 되네요.  다시 체크해 봐야겠습니다.
<br>이 들어가면서 위의 것이 문제가 되고,  <br>을 빼면 마인드맴과 챠트가 문제네요.

일단은 마인드 맴과 챠트는 빼야 될 것 같습니다.
넵. 마인드맵과 차트 쓰는 사람이 거의 없을 듯 합니다.

악보 수식만 넣어도 충분하다고 생각합니다.

물론 다 되면 좋겠지만요 ㅎㅎ
https://github.com/apache/incubator-echarts 이것을 사용하고 있는데
이슈를 좀 검색해 보니 <br/> 이슈가 있는데,  어디는 \n으로 하고 어디는 <br> 쓰라고 하는 것 같은데.. formatter로 변경이 가능하다고 합니다.

https://echarts.apache.org/en/  이것도 에디터보다 더 큰 분야네요
이제 전부 됩니다. textarea 마인드맵 차트!!


그때 말씀드렸던 script 관련코드가 필터링 되는 것 같습니다.

아 기존 글을 그런데, 다시 저장해서 markdown으로 wr_option이 변경되면 필터링 안되고 그대로 넘어가네요.

이건 문제없네요.


--------------

그리고 부가적으로 글쓰기할 때 t.SetSanitize(e.sanitize) 관련 에러가 뜹니다.


index.min.js?ver=191202:formatted:1399 
Uncaught (in promise) TypeError: t.SetSanitize is not a function
    at r (index.min.js?ver=191202:formatted:1399)
    at index.min.js?ver=191202:formatted:8260



이건 밑에 댓글에 있듯이 옵션을 주니 잘 넘어가네요.
sanitize 에러가 뜨면


$html .= "preview:{ markdown: { toc: true, sanitize: true, }, hljs: { style: 'monokai', }, },\n";


위와 같이 에디터 플러그인의 editor.lib.php 에서 sanitize 옵션을 주니 해결되네요.
@우성짱 이미지 클릭시에 크게 보여주는 기능에 대해서 오늘 분석을 해 보았는데,(hacpai.com)
이 기능은 전적으로 그누보드에서 모두 처리해 주어야 됩니다.  클릭시 이미지 보여주는 창이 모달로 나타나게 만든 것 같습니다. (html, css, javascript, php까지 알아야 됨.)
썸네일은 view.skin.php에서 부르는 get_view_thumbnail 라이브러리를 수정해서 get_view_thumbnail_md를 하나 만들어야 될 것 같습니다. (img 태그 대신 마크다운 이미지 문법을 찾아서 바꿔주는..)
이미지 클릭시 크게 보여주는 것은 힘든 일입니다. (자바스크립트, CSS 등등)

하지만 그누보드 원본에 이미 팝업으로 원본을 보여주는 기능이 있습니다.

https://demo.sir.kr/gnuboard5/gallery/%E3%85%87%E3%84%B4%E3%84%B9%E3%84%B4%E3%84%B9/

위 링크에 가서 이미지를 클릭하면 이미 링크가 걸려있기 때문에 클릭하면 원본으로 볼 수 있는 것입니다.

이 기능만 연결하면 될 것 같습니다.

썸네일은 라이브러리가 하나 필요하군요!
당분간은 그누보드(PHP)쪽은 계획이 없어서 죄송합니다.
에디터 기본기능하고, vuejs3.0이 나온다고 하니 그쪽에 더 공부해 볼려고합니다.
전체 2,412 |RSS
그누보드5 팁자료실 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT