토픽 마크다운 에디터 커스텀 렌더링
페이지 정보
본문
테스팅을 해보니 그 모듈이 완전하게 대체되네요..
제가 생각했던 것은 기존 것에 몇가지 태그만 추가할 수 있는 것을 원했는데.
리스트 ( 번호 있는것, 번호 없는것, 체크박스 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만 처리하고 싶어서 위와 같이 넘겼다고 하면 나머지는 디폴트 렌더링을 하는 방법도 있었으면 좋을 것 같습니다.
더 좋은 아이디어 있으신 분..
댓글목록
마젠토님의 댓글의 댓글
마젠토 쪽지보내기 메일보내기 자기소개 아이디로 검색 전체게시물 아이피 (47.♡.♡.2) 작성일
코로나 19 때문에 시간이 남다 보니, 모든 생각이 마크다운에디터에 집중하게 되네요. 어떻게 하면 가장 편한 에디터가 될 수 있을지..
개발자분들도 중국에서 편하게 사용할려고 만들고 있고, 거기에 편승해서 잘 되었으면 하는데,
새로운 기능 넣는 것 보다는 다시 에디터 본연의 기능 테스트에 다시 집중하고 있습니다.
대부분 마크다운 텍스트를 타이핑하다 보니, 이제는 마크다운 문법에 대해서 전문가가 되어 가고 있네요..