문하우스 Tip 1)
0.3 업데이트 (2017-09-19)
개요
- 각주 스타일링 작업을 완료(?)했습니다.
- 몇몇 부분에서 호환성 테스트는 아직 끝나지 않았습니다. 가령 다음과 같은 문제가 있을 수 있습니다.
: XE에서 관리자 외에는 각주 입력을 못할 수 있습니다.
: 크롬 외의 브라우저, 특히 MS 엣지에서는 각주 편집 수행과정에서 높은 확률로 에러가 동반될 수 있습니다.
: CKEditor 스킨 외에서는 각주 컴포넌트와 애드온 사용을 권장하지 않습니다.
업데이트 사항
- 각주 내용에서 각주 마커로 이동 링크 장착 (오징님)
- 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)★
- 해시 링크 이동시 이동 속도 설정 추가
- 각주 번호 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)★
- 각주 해시 링크 이동시 링크 타겟에 하이라이트 효과
- 자동링크 애드온에 대비하여, 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님)
향후 업데이트 계획
- 크롬에서 드래그 후 삭제 시 reorder가 되지 않는 문제
- 엣지와의 호환성 문제 (간장게장님)
- XE와의 호환성 문제 정리 (간장게장님)
- CK에디터 외 다른 웹에디터와 호환성 문제
- 모바일 UI 개선 또는 별도 구성
- XE용 removeHackTag 수정 매뉴얼 작성
- 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님)
- 말풍선 미리보기에서 말줄임표 (웹지기님)
- 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠)
0.2 업데이트 (2017-09-17)
기능 향상
- 각주 입력창에서 CK에디터 4.7.3 버전을 CDN을 통해 불러오게 됩니다.
- 각주 아이콘을 교체했습니다. (VJT님, 휴리파파님)
- 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 직접 지정할 수 있습니다. (웹지기님) ... 각주 컴포넌트 설정에서 할 수 있습니다.
- 각주 창 팝업 후 커서가 에디터 안으로 자동 포커스됩니다. (socialskyo님)
- 각주 내용 섹션 아래로 커서 이동이 가능하게끔, 각주 생성 후에는 맨 아래에 <p> </p>를 추가하게 됩니다. (socialskyo님)
- 댓글단에서는 각주 컴포넌트 작동을 금지합니다. (웹지기님) ... 각주 편집 애드온이 활성화돼야만 댓글에서 각주 컴포넌트 버튼의 출력을 막을 수 있습니다.
버그 수정
- 새로운 글쓰기 상황에서 각주 편집 애드온이 동작하지 않는 문제를 해결했습니다.
- IE에서 각주번호가 포함되지 않은 영역을 복사하거나 잘라낼 때 동작하지 않던 문제를 해결했습니다.
- 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화된 문제를 해결했습니다.
- 본문에서 각주 번호가 모두 사라질 때 각주 내용 섹션도 제거하게 됩니다. 반면 각주 내용 섹션이 없을 때 각주 붙여넣기가 시도되는 경우에는 각주 내용 섹션도 되살아나게 됩니다.
- 각주 입력 및 붙여넣기 후 커서가 각주 번호 안으로 위치하던 문제를 해결했습니다. 각주 번호 끝에 공백 문자를 첨가함으로써 새로 생성된 sup 태그에 문서 편집이 영향을 받지 않을 수 있도록 했습니다.
개요
- 각주 에디터 컴포넌트와 별책부록 편집용 애드온을 첨부해봅니다.
- 현재 업로드하는 버전은 베타테스트용입니다.
- 컴포넌트 파일은 각주 입력과 수정, 애드온 파일은 각주 복사-잘라내기-붙여넣기-삭제 기능을 담당합니다.
- 컴포넌트 파일은 필수이며, 애드온 설치를 하지 않으시면, 위의 편집기능을 수동으로 하셔야 하며, 본문에서 스타일링된 디스플레이를 구현할 수 없습니다.
2. 권장 환경
- 라이믹스 + 크롬60 / IE11 + CKEditor
- 위 환경이 아니라면 편집용 애드온이 오작동을 일으킬 수 있습니다.
3. 사용방법
- 따로 말씀 안 드려도 아시리라 믿습니다. 에디터에서 아래 그림의 아이콘을 클릭하고 입력하면 됩니다
4. 덧붙이는 말
- 개발 현황은 링크에서 확인할 수 있습니다. http://bit.ly/2etMIwY
각주
-
각주의 preview 영역의 가로크기 조절은
/modules/editor/components/ap_footnote/common/ap_footnote.js 파일안에 106줄
obj.css('width', 300);
숫자부분을 알맞게 조정하시면 됩니다.