각주 에디터 컴포넌트 + 각주 편집 애드온

문하우스 Tip ¹⁾ 

0.3 업데이트 (2017-09-19)

 

개요

• 각주 스타일링 작업을 완료(?)했습니다.
• 몇몇 부분에서 호환성 테스트는 아직 끝나지 않았습니다. 가령 다음과 같은 문제가 있을 수 있습니다.
  : XE에서 관리자 외에는 각주 입력을 못할 수 있습니다.
  : 크롬 외의 브라우저, 특히 MS 엣지에서는 각주 편집 수행과정에서 높은 확률로 에러가 동반될 수 있습니다.
  : CKEditor 스킨 외에서는 각주 컴포넌트와 애드온 사용을 권장하지 않습니다.

업데이트 사항

1. 각주 내용에서 각주 마커로 이동 링크 장착 (오징님)
2. 해시 링크 이동시 상단 툴바 높이 옵션 적용 (오징님)^★
3. 해시 링크 이동시 이동 속도 설정 추가
4. 각주 번호 마우스오버시 말풍선, 마우스클릭시 각주내용으로 이동 (웹지기님)^★
5. 각주 해시 링크 이동시 링크 타겟에 하이라이트 효과
6. 자동링크 애드온에 대비하여, 링크 타겟 클릭시 타겟 속성 동적 삭제 (웹지기님)

향후 업데이트 계획

1. 크롬에서 드래그 후 삭제 시 reorder가 되지 않는 문제
2. 엣지와의 호환성 문제 (간장게장님)
3. XE와의 호환성 문제 정리 (간장게장님)
4. CK에디터 외 다른 웹에디터와 호환성 문제
5. 모바일 UI 개선 또는 별도 구성
6. XE용 removeHackTag 수정 매뉴얼 작성
7. 팝업 창 세로 사이즈 자동 감지 및 출력 (Lemony님)
8. 말풍선 미리보기에서 말줄임표 (웹지기님)
9. 붙여넣기 이벤트에서 각주 섹션까지 붙는 문제 해결 (토순이와아빠)

 

---

 

0.2 업데이트 (2017-09-17)

 

기능 향상

1. 각주 입력창에서 CK에디터 4.7.3 버전을 CDN을 통해 불러오게 됩니다.
2. 각주 아이콘을 교체했습니다. (VJT님, 휴리파파님)
3. 각주 내용 섹션의 제목 내용과 제목 태그를 사용자가 직접 지정할 수 있습니다. (웹지기님) ... 각주 컴포넌트 설정에서 할 수 있습니다.
4. 각주 창 팝업 후 커서가 에디터 안으로 자동 포커스됩니다. (socialskyo님)
5. 각주 내용 섹션 아래로 커서 이동이 가능하게끔, 각주 생성 후에는 맨 아래에 <p>&nbsp;</p>를 추가하게 됩니다. (socialskyo님)
6. 댓글단에서는 각주 컴포넌트 작동을 금지합니다. (웹지기님) ... 각주 편집 애드온이 활성화돼야만 댓글에서 각주 컴포넌트 버튼의 출력을 막을 수 있습니다.

버그 수정

1. 새로운 글쓰기 상황에서 각주 편집 애드온이 동작하지 않는 문제를 해결했습니다.
2. IE에서 각주번호가 포함되지 않은 영역을 복사하거나 잘라낼 때 동작하지 않던 문제를 해결했습니다.
3. 에디터에서 소스 보기를 했다가 다시 에디터로 돌아올 때 이벤트 전체가 무효화된 문제를 해결했습니다.
4. 본문에서 각주 번호가 모두 사라질 때 각주 내용 섹션도 제거하게 됩니다. 반면 각주 내용 섹션이 없을 때 각주 붙여넣기가 시도되는 경우에는 각주 내용 섹션도 되살아나게 됩니다.
5. 각주 입력 및 붙여넣기 후 커서가 각주 번호 안으로 위치하던 문제를 해결했습니다. 각주 번호 끝에 공백 문자를 첨가함으로써 새로 생성된 sup 태그에 문서 편집이 영향을 받지 않을 수 있도록 했습니다.

 

---

 

개요

• 각주 에디터 컴포넌트와 별책부록 편집용 애드온을 첨부해봅니다.
• 현재 업로드하는 버전은 베타테스트용입니다.
• 컴포넌트 파일은 각주 입력과 수정, 애드온 파일은 각주 복사-잘라내기-붙여넣기-삭제 기능을 담당합니다.
• 컴포넌트 파일은 필수이며, 애드온 설치를 하지 않으시면, 위의 편집기능을 수동으로 하셔야 하며, 본문에서 스타일링된 디스플레이를 구현할 수 없습니다.

 

2. 권장 환경

• 라이믹스 + 크롬60 / IE11 + CKEditor
• 위 환경이 아니라면 편집용 애드온이 오작동을 일으킬 수 있습니다.

 

3. 사용방법

• 따로 말씀 안 드려도 아시리라 믿습니다. 에디터에서 아래 그림의 아이콘을 클릭하고 입력하면 됩니다

 

4. 덧붙이는 말

• 개발 현황은 링크에서 확인할 수 있습니다. http://bit.ly/2etMIwY