타운광장토픽게시판

ckeditor에 footnotes 플러그인 성공!

윤삼
조회 수 504
크게 작게 댓글로 가기
크게 작게 위로 아래로 댓글로 가기

XE에서도 각주를 달 수 있더군요!

좀 거창하긴 하지만, 학술적/전문적 글쓰기를 위한 길이 열렸다고나 할까요 ㅎㅎ

 

일전에 https://xetown.com/qna/282009 이런 글을 쓴 적이 있었는데요.

알아보니 ckeditor에 footnotes라는 플러그인이 있었더라구요. http://ckeditor.com/addon/footnotes

 

몇 일 동안 짬날 때마다 씨름해서 결국 성공했습니다.

lineutils와 widget이란 플러그인도 설치해줘야 하더군요.

몇 번 헤매다가 lineutils -> widget -> footnotes 를 순차적으로 플러그인 했더니 성공했습니다.

 

짜잔~

01.jpg

 

커서 위치를 잘 잡고, 아이콘 부분을 클릭하면 요런 팝업창이 뜨구요.

02.jpg

 

각주 내용을 입력하면,

03.jpg

 

본문에 바로 이렇게 반영됩니다. 그리고 등록 버튼을 누르면, 요렇게 되지요.

04.jpg

 

원래는 'Footnotes'라는 h2 태그에 본문으로 되돌아가는 링크는 ^ 요 표시인데, plugin.js 파일을 살짝 커스텀해서 h4 태그에 Notes으로 바꿔주고, 폰트어썸 아이콘을 달아봤어요. ㅎㅎ

 

그렇지만 관리자가 아닌 일반 이용자가 각주 기능으로 문서 작성을 하면 id 속성이 필터링된다는 건 아직 해결 못했습니다;;;; 웹마의 길은 멀고도 험합니다.

윤삼

profile
아무래도 중급 초반 수준의 코딩 오타쿠인 것 같습니다.
위로 아래로
댓글 15
  • profile

    오... 저도 각주 참 좋아하는데요(?)...

  • profile profile
    다음번엔 각주 링크에 팝오버 툴팁이 나오도록 도전해볼 참입니다 흐흐흐흐
  • profile

    classes/security/Purifier.class.php

    HTMLPurifier 기본 옵션에 Attr.EnableID와 Attr.IDPrefix를 추가해 보세요.

    http://htmlpurifier.org/live/configdoc/plain.html#Attr.EnableID

  • profile profile
    안 그래도 정독할 준비 중이었는데 쪽집게처럼 집어주시다니... 감읍할 따름이옵니다~!
  • profile profile
    갓곰, 이라고 불러도 되나요... ㅎㅎ 덕분에 id 속성을 활용할 수 있게 됐습니다!
    한 가지 더 여쭙고 싶은 게 있는데요. 풋노트 플러그인이 에디터 입력폼에 section, header, h2, ol, li, cite, sup, a 태그 등을 뿌려주는데, 글 '등록'했을 때 section이랑 header 태그가 날아가는 건 이해가 됩니다. 그래서 section 대신 div로 바꿔줘서 스타일 구현에도 성공했구요.
    근데 글을 '수정'하면 div의 class 속성이 날아가면서 스타일이 뭉개져버리더군요. 이게 혹시 removehacktag 때문인가요? 아니면 plugin.js에 설정된 header 태그가 감지되지 않으면서 나타난 현상인지, 그것도 아니면 purifier에서 class 속성을 막아놔서인지(링크 걸어주셨던 페이지에 의하면 기본값은 사용 가능이던데요...), 도무지 감이 안 잡힙니다.
    어떤 부분들을 점검하고 확인하면 좋을까요?
  • profile profile
    처음 작성할 때는 괜찮은데 수정할 때 날아간다면 removeHackTag 때문은 아닐 것 같아요. 처음 작성할 때와 수정할 때 모두 removeHackTag를 거치거든요. (1.8.19 이하 버전에서 관리자 권한으로 썼던 글을 수정하면 removeHackTag가 적용되는 버그가 있긴 합니다만, 관리자가 아니라면 해당 없습니다.) 아마 CKEditor와 플러그인 및 에디터 컴포넌트가 서로 연동되는 과정에서 문제가 생기는 게 아닐까 싶네요. 처음 입력할 때는 제대로 동작하지만 수정하면 맛이 가는 에디터 컴포넌트들이 많거든요.

    라이믹스를 쓰시면 section, header 등의 HTML5 태그도 날아가지 않습니다 ^^
  • profile profile
    으음, 플러그인을 손질하는 과정에서 오류가 있었을 가능성이 높군요. 라이믹스로의 결단의 순간이 점점 다가오는 느낌입니다.^^
    감사해요~!
  • profile
    적용했습니다 ㅎㅎㅎ
  • profile profile
    안 그래도 성민님 에디터 설정 후기를 봤던 게 도움이 컸어요. 은인이십니다~!
  • profile
    우와 각주다.. 리뷰 쓸 때 정말 큰 도움이 되겠네요
  • profile profile
    그죠? ㅎㅎ
    과정이 약간 번거로운 부분이 있으니, 후반 작업까지 해보고 나중에 정식으로 후기 올리도록 해볼게요!
  • profile
    좋네요..!!
  • profile profile
    무엇보다도 멀티미디어 컴포넌트 아이콘이 예쁘지요. 히힛^^
  • profile
    와 욕나올뻔 했어요~ 너무 좋아~!! 짱!!
  • profile profile
    설치해서 사용해보셨습니까?
    저는 다른 건 다 괜찮은데, 에디터에서 소스보기를 하거나 완성된 글을 수정하려고 들어가면 개발자 도구에서 요런 게 뜨네요.
    SCRIPT5007: 정의되지 않음 또는 null 참조인 'getStartElement' 속성을 가져올 수 없습니다.
    뭔가 만만치만은 않습니다ㅠㅠ