각주를 넣자!
하늘희님1)과 구름이님2)을 비롯해 여러분들의 격려 덕에 마음 굳게 먹고,
어제 저녁 내내 씨름한 결과,
iframe_obj3) 라는 걸 발견,
본문 내의 원하는 위치에,
컴포넌트 입력 내용을 에디터에 반영할 수 있게 됐습니다.4)
참고할 만한 그림은 넣지 않겠다5)
이런 식으로 나와요.
입력창은 이렇게 생겼구요.6)
추가 버튼을 누르면 이런 결과로 반영됩니다.
앞으로의 과제
아직 넘어야 할 산이 많습니다.7)
개인적 정리 차원에서 짚어보면,
기술적 사항
- [해결] 컴포넌트 입력창에 입력하면 에디터 커서 위치에는 각주마커를, 에디터 본문 하단에는 각주내용을 삽입
=> iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl) 를 이용해 에디터 내의 요소들을 선택자로 포착할 수 있었음 - [해결] 각주를 본문 중간(예. 3~4번 사이)에 입력하면 3-5-4 같은 식으로 입력됨
=> 각주 re-ordering 함수를 통해서 가능 - [해결] 각주 수정 기능도 고려해야 하고, 수정 입력한 후에도 각주 번호 체계가 흐트러지지 않게 해야 함
=> sup 태그에 editor_componet 속성 부여 ... 각주 내용을 컴포넌트로 다시 가져오는 게 관건이었으나 무사히 해결함 - [해결] 각주 마커를 삭제했을 때, 각주 내용도 연동해서 삭제되어야 함
=> DOMNodeRemoved 이벤트 사용? - [해결] 각주 잘라내기/복사하기 + 붙여넣기도 구현할 수 있을까?!
=> 이 역시 애드온으로 봉합. 각각 copy, cut, paste 이벤트로 어렵게 성공. - [해결] 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화됨
=> DOMNodeInserted 이벤트로 target에 iframe이 있을 경우 이벤트 함수를 다시 불러옴 - [작업중] 크로싱 브라우저
=> 현재 크롬, IE에서 성공적
… 크롬에서 블록 지정 후 삭제시 동작하지 않음ㅠ - [작업중] MS Edge 호환성 테스트
… https://www.xetown.com/rxe_file/722912#comment_723826 (간장게장님 제보)
=> Edge에서도 각주 입력 및 수정 성공 (reorderFootNote 함수에서 re_li를 스트링이 아닌 경우 인식을 못하는 문제가 있었음)
… 복잘붙의 경우 간혹 에러가 남
=> [0].outerHTML은 높은 확률로 에러가 나기 때문에 .clone().wrapAll('<ul />').parent().html()로 대체함
… 그럼에도 붙여넣기 연속 동작에서 높은 확률로 undefined 값이 출력됨. 엣지엣지ㅡㅡ+
=> 엣지는 이쯤에서 접어야 할 듯. 대신 유저에이전트가 엣지일 경우 애드온 작동을 중지하는 옵션을 둬도 괜찮겠음(사실 괜찮기보다는 귀찮아서 더는 못해먹겠다) - [해결] 새 글 작성시, 각주 복잘붙삭이 안 되는 것 같음ㅠ
=> var editor_sequence = $('div[id^="ckeditor_instance_"]').data('editor-sequence'); 로 해결 - [해결] 각주 내용을 텍스트로만 입력할 수 있음
=> 컴포넌트에 에디터 임포트는 성공. 옵션 조정도 성공 - [해결] 삭제시 각주 마커와 내용이 모두 사라지게 되면 각주 내용 섹션도 삭제 + 더불어 모두 삭제된 후 각주 마커 붙여넣기가 되는 경우에는 각주 내용 섹션도 되살리기
=> 삭제는 삭제 이벤트에서, 붙이기는 붙이기 이벤트에서 - [해결] 각주 입력 및 붙여넣기 후 1) 커서 위치를 마커 바깥으로 이동 및 2) 공백 문자 첨가로 이후 문서 편집이 sup 태그에 영향을 안받게끔 하기
=> 각주 생성 이후 마커 끝에 도 함께 입력 - [해결] 댓글단에서 컴포넌트 작동 금지 (웹지기님)
… 가급적 안 보이게. 어쩔 수 없이 보인다면 클릭 안 되게, 어쩔 수 없이 클릭된다면 팝업창 안 열리게, 어쩔 수 없이 열린다면 경고문 후 바로 닫히게ㅠ
… 뾰족한 수가 없으므로 그냥 같이 가져 감ㅋ 단, 본문의 각주 id와 겹치지 않도록 유의해야 함. 근데 이것도 난제ㅠ
… 차라리 prefix와 일련번호 사이에 임의의 세션 번호를 부여하는 게 좋겠다는 생각이 들었음
=> 애드온으로 에디터의 data-editor-primary-key-name이 comment_srl일 경우 각주 아이콘 삭제함 (에디터 스킨에서도 제어는 할 수 있는데, 가급적 제공 자료를 통해 기능이 이뤄지도록 지향함) - [해결] 자동링크 애드온에 대비한 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님)
=> 클릭 이벤트로 간단히 removeAttr - [해결] 게시판 스킨 또는 커스터마이징으로 인한 각주 요소들의 여백 문제 (간장게장님)
=> 각주 마커와 내용에 딸린 하위 요소들의 여백 값들 리셋 - [해결] 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠)
=> paste 이벤트에서 클립보드가 null 값이거나 내용이 비어 있으면 이벤트 효과를 무효화함 - [해결] 컴포넌트 설정에서 해시 이동 속도가 안 먹는 버그 (웹지기님)
=> 설정 변수를 $component_info->extra_vars->velocity->value로 받아 옴 - 지금은 ckEditor로 하고 있는데,
xpresseditor나FROALA와의 호환성도 생각해야 할 듯
… 코어에서 제공하는 메소드? 변수?를 기준으로 하고 있으니까 그럭저럭 잘 되지 않을까 낙관하고 있음ㅋ (물론 실제로는 절대 그럴 리 없음)
이용자 편의 사항
- [해결] 각주 내용 섹션에서 번호 클릭하면 각주 마커로 이동 링크 장착 (오징님)
... 디자인을 신경 쓸 필요가 있겠음
... 폰트어썸 아이콘에 absolute 포지션으로 활용 ... 역시 난 디자인을 못해ㅠ
=> 리스트 스타일 조정으로 리-디자인 - [해결] 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)
=> animate 메소드로 scrollTop 사용 - [해결] 각주 해시 링크 이동시 이동 속도 설정 추가
=> 목차 애드온에서 가져옴ㅋ - [해결] 각주 해시 링크 이동시 타겟에 하이라이트 효과
- [해결] 각주 창 팝업 후 커서 자동 포커스 (socialskyo님)
=> CK에디터 함수에서 startupFocus : true 추가 - [해결] 각주 내용 섹션 아래로 커서 이동 가능하게끔 맨 아래에 <p>태그 추가 (socialskyo님)
=> 위 아래로 <p> </p> 추가 - [해결] 각주 마커 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)
... 1) 툴팁이 윈도우 상단에 걸리거나 2) 스크린 가로 사이즈가 작아서 툴팁이 바깥으로 삐져 나갈 때
=> 첫 번째 경우 : 마커의 오프셋-탑 위치 - (툴팁의 높이 + 마커와 툴팁 사이의 거리) <= 도큐멘트 스크롤탑
... 두 번째 경우가 남았다!
=> (마커의 오프셋-레프트 위치 + 툴팁의 넓이 + 마커와 툴팁 사이의 좌우 간격 > 도큐멘트 넓이) 일 경우 ... 그 차이만큼 툴팁의 레프트 값 변경
=> 그리고 풍선말의 꼬다리... 툴팁의 pseudo가 아니라 별도의 dom 요소로 설정함. 어우, 이거 겁나 빡셌음. 다시는 툴팁 작업 하나 봐라! - [해결] 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 지정 (웹지기님)
=> 스타일도 추가 - [해결] 본문의 각주 마커와 각주 리스트의 일련 번호 형식 통일 (웹지기님)
=> transHTML 통해 괄호를 삭제하려 했으나, 마우스이벤트 포착을 위해 그냥 내버려둠ㅋ - [해결] 모바일 인터페이스 구성 ... 각주 마커 클릭 이벤트로 하단 fixed 요소로 각주내용 디스플레이
... ap_footnote.js 파일의 재구성이 필요할 듯. append와 html 문제. getPreviewContent 함수의 동작 방식 재고해야 함.
=> 모바일 뷰 옵션 설정 및 getPreviewContent 함수 동작 개선 - [해결] 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님)
=> setTimeout을 501로 주고 window.resizeTo 함수 사용 - [해결] 말풍선 미리보기에서 말줄임표 (웹지기님)
=> 브라우저 호환성 위해 jQuery로 해결 - [해결] 모바일 뷰에서 각주 내용 요소 투명도 삭제 (웹지기님)
=> #fff 처리 - [해결] 모바일 뷰에서 gif 안 보여주는 문제 (웹지기님)
=> html 메소드 처리 + ap_parser 예외 처리
... 풍선말에서 여전히 gif 안 보이는 문제 (웹지기님)
=> PC뷰 풍선말에서도 ap_parser 예외 처리 - [해결] 모바일 뷰에서 본문 터치로 내용 닫기 (웹지기님)
=> 본문 터치 대신 클로즈 버튼을 크게 하고, 섹션 하단의 z-index 값과 bottom 값을 사용자 설정 가능하게 함 - [해결] 모바일에서의 각주 작성 https://www.xetown.com/board/460373 (웹지기님)
=> 모바일 체크 true값 반환시 팝업창 리사이즈 - [해결] 모바일 뷰에서 레이아웃 하단 고정 툴바 겹침 문제
=> 각주 섹션에 bottom 값 설정 옵션 추가 - [해결] XE에서 '모바일에서 최적화된 화면으로 보기' 옵션 (웹지기님)
=> popup.js를 통해 관련 요소 hide 처리 - [해결] 각주 섹션을 div태그로 설정하면서 파싱 모듈이 링크 프리뷰를 중복 출력하는 문제 (웹지기님)
=> 별도 팁 제공 https://www.xetown.com/rxe_third/750890 (현재 람보님 깃허브에 이슈를 올렸음) - [해결] 모바일 뷰에서 각주 내용 안에 있는 링크가 동작하지 않는 문제 (웹지기님)
=> text 메소드 대신 html 메소드 사용 - [해결] 각주 내용의 이미지를 풍선말 등에서 별도 출력하면서 각주 내용의 구성이 깨지는 문제 (웹지기님)
=> 파싱 모듈 예외 처리하고 html 메소드 사용 - XE removeHackTag 함수 수정 매뉴얼 제공
각주
- 멀티미디어 컨텐츠 컴포넌트 제작자로 유명하다. 그러나 현재 해당 자료는 찾아받기 힘든 상태ㅋ
- 예약 모듈 제작으로 이름을 날렸고, 최근에는 에디터 자동완성 모듈 제작으로 커뮤니티 운영자들 사이에서 환대를 받기도 했다. 덧. 뭔가 고마우신 분ㅋ
-
웹에디터를 아이프레임으로 삽입할 때 해당 DOM 요소에 해당하는 부분. 코어에 간접적으로 할당이 되어 있었다. 에디터 컴포넌트에서는 var iframe_obj = opener.editorGetIFrame(opener.editorPrevSrl); 로 정의하면 가져올 수 있다. 두둔~
- 요게 좀 첫 번째 고비였다. 암튼...
-
그림을 XETown https://www.xetown.com/board/716316 에는 올렸는데, 이미지 불펌 방지 사이트다보니 불러오기가 안 된다. 그렇다고 다시 첨부 삽입하는 것은 더 귀찮다;; 그래서 이렇게 링크 프리뷰로 대체 호호호호~
- 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 이건 그냥 심심해서 중간에 끼워넣어보는 각주. 힝 속았지? 힝 속았지? 힝 속았지?
- 과연 내가 이 많은 고비를 넘길 수 있을까. 심지어 예상치 못한 문제가 기다릴 수도 있다!!!
소제목에 각주를 넣었더니 목차 애드온에도 각주 번호가 나오는군. 쳇