Editor by아포리아 postedAug 31, 2017

각주 컴포넌트, 몇 개의 고비

Views 498 Likes 0 Replies 10
Extra Form
입금자 성명 윤삼
필요장비 냉수,얼음,에어컨
대관시간 1030
신청공간 강의실
대관일 2018-06-23

각주를 넣자!

 

하늘희님1)과 구름이님2)을 비롯해 여러분들의 격려 덕에 마음 굳게 먹고,

어제 저녁 내내 씨름한 결과,

iframe_obj3) 라는 걸 발견,

본문 내의 원하는 위치에,

컴포넌트 입력 내용을 에디터에 반영할 수 있게 됐습니다.4)

 

참고할 만한 그림은 넣지 않겠다5)

 

이런 식으로 나와요.

 

입력창은 이렇게 생겼구요.6)

 

추가 버튼을 누르면 이런 결과로 반영됩니다.

 

앞으로의 과제

 

아직 넘어야 할 산이 많습니다.7)

개인적 정리 차원에서 짚어보면,

 

기술적 사항

  1. [해결] 컴포넌트 입력창에 입력하면 에디터 커서 위치에는 각주마커를, 에디터 본문 하단에는 각주내용을 삽입
    => iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl) 를 이용해 에디터 내의 요소들을 선택자로 포착할 수 있었음
  2. [해결] 각주를 본문 중간(예. 3~4번 사이)에 입력하면 3-5-4 같은 식으로 입력됨
    => 각주 re-ordering 함수를 통해서 가능
  3. [해결] 각주 수정 기능도 고려해야 하고, 수정 입력한 후에도 각주 번호 체계가 흐트러지지 않게 해야 함
    => sup 태그에 editor_componet 속성 부여 ... 각주 내용을 컴포넌트로 다시 가져오는 게 관건이었으나 무사히 해결함
  4. [해결] 각주 마커를 삭제했을 때, 각주 내용도 연동해서 삭제되어야 함
    => DOMNodeRemoved 이벤트 사용?
  5. [해결] 각주 잘라내기/복사하기 + 붙여넣기도 구현할 수 있을까?!
    => 이 역시 애드온으로 봉합. 각각 copy, cut, paste 이벤트로 어렵게 성공.
  6. [해결] 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화됨
    => DOMNodeInserted 이벤트로 target에 iframe이 있을 경우 이벤트 함수를 다시 불러옴
  7. [작업중] 크로싱 브라우저
    => 현재 크롬, IE에서 성공적
    … 크롬에서 블록 지정 후 삭제시 동작하지 않음ㅠ
  8. [작업중] MS Edge 호환성 테스트
    https://www.xetown.com/rxe_file/722912#comment_723826 (간장게장님 제보)
    => Edge에서도 각주 입력 및 수정 성공 (reorderFootNote 함수에서 re_li를 스트링이 아닌 경우 인식을 못하는 문제가 있었음)
    … 복잘붙의 경우 간혹 에러가 남
    => [0].outerHTML은 높은 확률로 에러가 나기 때문에 .clone().wrapAll('<ul />').parent().html()로 대체함
    … 그럼에도 붙여넣기 연속 동작에서 높은 확률로 undefined 값이 출력됨. 엣지엣지ㅡㅡ+
    => 엣지는 이쯤에서 접어야 할 듯. 대신 유저에이전트가 엣지일 경우 애드온 작동을 중지하는 옵션을 둬도 괜찮겠음(사실 괜찮기보다는 귀찮아서 더는 못해먹겠다)
  9. [해결] 새 글 작성시, 각주 복잘붙삭이 안 되는 것 같음ㅠ
    => var editor_sequence = $('div[id^="ckeditor_instance_"]').data('editor-sequence'); 로 해결
  10. [해결] 각주 내용을 텍스트로만 입력할 수 있음
    => 컴포넌트에 에디터 임포트는 성공. 옵션 조정도 성공
  11. [해결] 삭제시 각주 마커와 내용이 모두 사라지게 되면 각주 내용 섹션도 삭제 + 더불어 모두 삭제된 후 각주 마커 붙여넣기가 되는 경우에는 각주 내용 섹션도 되살리기
    => 삭제는 삭제 이벤트에서, 붙이기는 붙이기 이벤트에서
  12. [해결] 각주 입력 및 붙여넣기 후 1) 커서 위치를 마커 바깥으로 이동 및 2) 공백 문자 첨가로 이후 문서 편집이 sup 태그에 영향을 안받게끔 하기
    => 각주 생성 이후 마커 끝에 &nbsp;도 함께 입력
  13. [해결] 댓글단에서 컴포넌트 작동 금지 (웹지기님)
    … 가급적 안 보이게. 어쩔 수 없이 보인다면 클릭 안 되게, 어쩔 수 없이 클릭된다면 팝업창 안 열리게, 어쩔 수 없이 열린다면 경고문 후 바로 닫히게ㅠ
    … 뾰족한 수가 없으므로 그냥 같이 가져 감ㅋ 단, 본문의 각주 id와 겹치지 않도록 유의해야 함. 근데 이것도 난제ㅠ
    … 차라리 prefix와 일련번호 사이에 임의의 세션 번호를 부여하는 게 좋겠다는 생각이 들었음
    => 애드온으로 에디터의 data-editor-primary-key-name이 comment_srl일 경우 각주 아이콘 삭제함 (에디터 스킨에서도 제어는 할 수 있는데, 가급적 제공 자료를 통해 기능이 이뤄지도록 지향함)
  14. [해결] 자동링크 애드온에 대비한 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님)
    => 클릭 이벤트로 간단히 removeAttr
  15. [해결] 게시판 스킨 또는 커스터마이징으로 인한 각주 요소들의 여백 문제 (간장게장님)
    => 각주 마커와 내용에 딸린 하위 요소들의 여백 값들 리셋
  16. [해결] 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠)
    => paste 이벤트에서 클립보드가 null 값이거나 내용이 비어 있으면 이벤트 효과를 무효화함
  17. [해결] 컴포넌트 설정에서 해시 이동 속도가 안 먹는 버그 (웹지기님)
    => 설정 변수를 $component_info->extra_vars->velocity->value로 받아 옴
  18. 지금은 ckEditor로 하고 있는데, xpresseditor나 FROALA와의 호환성도 생각해야 할 듯
    … 코어에서 제공하는 메소드? 변수?를 기준으로 하고 있으니까 그럭저럭 잘 되지 않을까 낙관하고 있음ㅋ (물론 실제로는 절대 그럴 리 없음)

 

이용자 편의 사항

  1. [해결] 각주 내용 섹션에서 번호 클릭하면 각주 마커로 이동 링크 장착 (오징님)
    ... 디자인을 신경 쓸 필요가 있겠음
    ... 폰트어썸 아이콘에 absolute 포지션으로 활용 ... 역시 난 디자인을 못해ㅠ
    => 리스트 스타일 조정으로 리-디자인
  2. [해결] 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)
    => animate 메소드로 scrollTop 사용
  3. [해결] 각주 해시 링크 이동시 이동 속도 설정 추가
    => 목차 애드온에서 가져옴ㅋ
  4. [해결] 각주 해시 링크 이동시 타겟에 하이라이트 효과
  5. [해결] 각주 창 팝업 후 커서 자동 포커스 (socialskyo님)
    => CK에디터 함수에서 startupFocus : true 추가
  6. [해결] 각주 내용 섹션 아래로 커서 이동 가능하게끔 맨 아래에 <p>태그 추가 (socialskyo님)
    => 위 아래로 <p>&nbsp;</p> 추가
  7. [해결] 각주 마커 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)
    ... 1) 툴팁이 윈도우 상단에 걸리거나 2) 스크린 가로 사이즈가 작아서 툴팁이 바깥으로 삐져 나갈 때
    => 첫 번째 경우 : 마커의 오프셋-탑 위치 - (툴팁의 높이 + 마커와 툴팁 사이의 거리) <= 도큐멘트 스크롤탑
    ... 두 번째 경우가 남았다!
    => (마커의 오프셋-레프트 위치 + 툴팁의 넓이 + 마커와 툴팁 사이의 좌우 간격 > 도큐멘트 넓이) 일 경우 ... 그 차이만큼 툴팁의 레프트 값 변경
    => 그리고 풍선말의 꼬다리... 툴팁의 pseudo가 아니라 별도의 dom 요소로 설정함. 어우, 이거 겁나 빡셌음. 다시는 툴팁 작업 하나 봐라!
  8. [해결] 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 지정 (웹지기님)
    => 스타일도 추가
  9. [해결] 본문의 각주 마커와 각주 리스트의 일련 번호 형식 통일 (웹지기님)
    => transHTML 통해 괄호를 삭제하려 했으나, 마우스이벤트 포착을 위해 그냥 내버려둠ㅋ
  10. [해결] 모바일 인터페이스 구성 ... 각주 마커 클릭 이벤트로 하단 fixed 요소로 각주내용 디스플레이
    ... ap_footnote.js 파일의 재구성이 필요할 듯. append와 html 문제. getPreviewContent 함수의 동작 방식 재고해야 함.
    => 모바일 뷰 옵션 설정 및 getPreviewContent 함수 동작 개선
  11. [해결] 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님)
    => setTimeout을 501로 주고 window.resizeTo 함수 사용
  12. [해결] 말풍선 미리보기에서 말줄임표 (웹지기님)
    => 브라우저 호환성 위해 jQuery로 해결
  13. [해결] 모바일 뷰에서 각주 내용 요소 투명도 삭제 (웹지기님)
    => #fff 처리
  14. [해결] 모바일 뷰에서 gif 안 보여주는 문제 (웹지기님)
    => html 메소드 처리 + ap_parser 예외 처리
    ... 풍선말에서 여전히 gif 안 보이는 문제 (웹지기님)
    => PC뷰 풍선말에서도 ap_parser 예외 처리
  15. [해결] 모바일 뷰에서 본문 터치로 내용 닫기 (웹지기님)
    => 본문 터치 대신 클로즈 버튼을 크게 하고, 섹션 하단의 z-index 값과 bottom 값을 사용자 설정 가능하게 함
  16. [해결] 모바일에서의 각주 작성 https://www.xetown.com/board/460373 (웹지기님)
    => 모바일 체크 true값 반환시 팝업창 리사이즈
  17. [해결] 모바일 뷰에서 레이아웃 하단 고정 툴바 겹침 문제
    => 각주 섹션에 bottom 값 설정 옵션 추가
  18. [해결] XE에서 '모바일에서 최적화된 화면으로 보기' 옵션 (웹지기님)
    => popup.js를 통해 관련 요소 hide 처리
  19. [해결] 각주 섹션을 div태그로 설정하면서 파싱 모듈이 링크 프리뷰를 중복 출력하는 문제 (웹지기님)
    => 별도 팁 제공 https://www.xetown.com/rxe_third/750890 (현재 람보님 깃허브에 이슈를 올렸음)
  20. [해결] 모바일 뷰에서 각주 내용 안에 있는 링크가 동작하지 않는 문제 (웹지기님)
    => text 메소드 대신 html 메소드 사용
  21. [해결] 각주 내용의 이미지를 풍선말 등에서 별도 출력하면서 각주 내용의 구성이 깨지는 문제 (웹지기님)
    => 파싱 모듈 예외 처리하고 html 메소드 사용
  22. XE removeHackTag 함수 수정 매뉴얼 제공

 

각주

  1. 멀티미디어 컨텐츠 컴포넌트 제작자로 유명하다. 그러나 현재 해당 자료는 찾아받기 힘든 상태ㅋ
  2. 예약 모듈 제작으로 이름을 날렸고, 최근에는 에디터 자동완성 모듈 제작으로 커뮤니티 운영자들 사이에서 환대를 받기도 했다. 덧. 뭔가 고마우신 분ㅋ
  3. fn.png웹에디터를 아이프레임으로 삽입할 때 해당 DOM 요소에 해당하는 부분. 코어에 간접적으로 할당이 되어 있었다. 에디터 컴포넌트에서는 var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl); 로 정의하면 가져올 수 있다. 두둔~

  4. 요게 좀 첫 번째 고비였다. 암튼...
  5. 그림을 XETown https://www.xetown.com/board/716316 에는 올렸는데, 이미지 불펌 방지 사이트다보니 불러오기가 안 된다. 그렇다고 다시 첨부 삽입하는 것은 더 귀찮다;; 그래서 이렇게 링크 프리뷰로 대체 호호호호~

  6. 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 힝 속았지? 힝 속았지?
  7. 과연 내가 이 많은 고비를 넘길 수 있을까. 심지어 예상치 못한 문제가 기다릴 수도 있다!!!

 

TAG •
Atachment
Attachment '1'
?
Comment '10'
  • profile
    윤삼 2017.09.01 11:57

    소제목에 각주를 넣었더니 목차 애드온에도 각주 번호가 나오는군. 쳇

  • ?
    오징 2017.09.07 12:24

    엊그제 엣지에서 시도할땐 댓글입력이 안되던데

    크롬으로 다시 확인! 어? 되네? 

  • profile
    윤삼 2017.09.07 12:29
    크롬파라면서요ㅋㅋㅋㅋ
    엣지에서 안 된다니 확인을 해봐야겠네요ㅠ
  • ?
    오징 2017.09.07 12:26

    엣지로 다시 시도! 

    어? 엣지도 되네? ㅋㅋㅋㅋㅋㅋㅋㅋ

  • profile
    윤삼 2017.09.07 12:29
    엥.. 그 사이에 됩니까ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
  • profile
    윤삼 2017.09.18 18:35

    http://www.cssarrowplease.com/

  • ?
    오징 2017.09.21 16:54

    Froala에선 자체지원(embedly)할꺼같으니 기술적사항 18번도 해결인가요? ㅎ

    근데 prologos님의 timymce에디터 지원은??

  • profile
    윤삼 2017.09.21 17:21

    embedly는 링크 파싱해서 뿌려주는 건데,

    라르게덴님 소식은 문서 작성 과정에서 파싱 지원을 해준다는 의미인 것 같아요.

     

    일전에 프로알라에서 라르게덴님이 도와주신 거는 템플릿 컴포넌트에 관한 것이었구요.

    각주 컴포넌트는 아직 먼 훗날의 이야기... (아련..)

     

    근데 각주는 CK에디터만으로도 벅차요ㅠㅠㅠ

  • ?
    오징 2017.09.21 17:46

    아... 하... 이...런... 착각을....

     

    머릿속으로 '링크파싱애드온 기능이 내장되는군!'

    눈으로 각주컴포넌트 페이지를 보면서

    손으론 18번도 해결이군 후훗...

     

    저같은 천재가 이런 실수를 하다니.... =ㅁ=

  • profile
    윤삼 2017.09.21 18:20
    ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    암튼 각주도 다른 에디터 호환 연구해보겠습니다!
    (아, 겁나요ㅠ)