마크다운 에디터 커스텀 렌더링 > 자유게시판

• 목록

테스팅을 해보니  그 모듈이 완전하게 대체되네요..

제가 생각했던 것은 기존 것에 몇가지 태그만 추가할 수 있는 것을 원했는데.

리스트 ( 번호 있는것, 번호 없는것, 체크박스 3가지) 를 처리하는 함수가

renderList

renderListItem

renderTaskListItemMarker  이렇게 3가지인데..

커스텀 렌더링에서 셋중에 한가지만을 바꾸는 것이 아니라 완전히 새롭게 모든 것을 새롭게 짜 주어야 되는 것 같습니다. 

그래서 현재 이 방식은 사용하기에 너무 어렵고, 간단하게 정규식으로 변경을 하던지..  필요하면 Golang을 사용한 엔진쪽을 수정해서 사용해야 될것 같습니다.

오늘 생각한 것은 (renderHeading만 생각해 봤을 때..)

level,  headingID, 몇가지 option등이 있네요..  이것을 템플리트 같은 것을 넘겨주면 거기에 맞게 변수를 넣어서 리턴하면 어떨까요?

## 헤딩텍스트 이고 Option이 ToC, HeadingID, HeadingAnchor 이라면

level은 2이고 id가 "헤딩텍스트"  가 되고,  Laravel의 blade tempalte과 비슷하게 만들어 본다면..

아래와 같이 2개의 문자열을 넘겨 주던지.. (현재 구조는 entering 옵션으로 2번 불러지는 것 같습니다.)

enterTemplate = `<h{{ level }} @if( {{toc}} ) id="{{ id }}" @endif>@if( {{ HeadingAnchor }} )<a id="vditor-anchor-{{ id }} class="vditor-anchor" href="#{{ id }}><svg ......></svg></a>@endif`

endTemplate = `<h{{ level }}>`

아니면 통으로 한번에 넘겨주고 한번에 처리해도 되고..

그러면 내가 원하는 태그 변경을 한다고 하면.. 아래와 같이 넘겨주면 될 것 같습니다.

enterTemplate = 
  `<h{{ level }} 
     @if( {{toc}} ) 
       id="{{ id }}"
     @endif
   >
   <span class="prefix"><span class="content">
   @if( {{ HeadingAnchor }} )
     <a id="vditor-anchor-{{ id }} class="vditor-anchor" href="#{{ id }}">
       <svg ......></svg>
     </a>
   @endif`

endTemplate = 
   `</span>
    <span class="suffix"></span>
    <h{{ level }}>`

위와 같이 넘겨주었을 때..  만약에 level 2만 처리하고 싶어서 위와 같이 넘겼다고 하면 나머지는 디폴트 렌더링을 하는 방법도 있었으면 좋을 것 같습니다. 

더 좋은 아이디어 있으신 분..