CKEditor 4 + SVG-edit 정리

0. 환경
- CKEditor4 : 아마 standard package를 다운받아서 사용
- SVG-edit(https://github.com/SVG-Edit/svgedit) editor 부분만 사용
- CKEditor에 SVG-edit을 붙인건 내가 한게 아니라 잘 모르겠음.

1. 문제
- SVG-edit에서 객체를 만들고 id를 바꾸고 저장하고 나갔다가 다시 불러오면 자동 생성된 id(svg_XX)로 바뀌어 있음
- 객체를 여러 개 만들고 저장하고 나갔다가 다시 들어오면 만들어진 객체가 자동으로 그룹화되어있음

2. 원인 
1) SVG-edit에서는 레이어가 없으면 자동으로 아래 같은 구조로 레이어를 생성

<g class="layer"> <title>Layer 1</title> </g>

2) SVG-edit에서 편집한 내용을 CKEditor 저장할 때 CKEditor가 <title> 안의 내용을 지워버림(<title></title>). title 태그는 head 안에서만 사용할 수 있는 것 같다.

3) SVG-edit에서는 레이어 안의 title 태그로 레이어 제목을 찾아오는데, <title></title>로 저장된 상태에서는 제목을 못찾아와서 레이어가 없는 것으로 간주하고(orphan layer) 현재 만들어진 객체를 다 묶어서 레이어를 다시 생성함

=> 객체가 다 그룹화되거나 변경한 id를 레이어가 덮어써버리는 문제

3. 해결시도
1) CKEDitor가 title 태그의 내용을 지우지 못하도록 한다
  CKEditor 설정을 아래처럼 변경하면 된다고 해서 시도했으나 실패.

window.CKEDITOR.config.allowedContent = true

window.CKEDITOR.config.extraAllowedContent = 'title[*]'
window.CKEDITOR.config.protectedSource.push(/<title>.*?<\/title>/gi)

2) SVG-edit에서 레이어 제목이 없어도 레이어로 취급하도록 한다
  레이어 제목을 가져오는 함수(findLayerNameInGroup)에서 제목을 못찾아오면 그냥 Layer + (레이어 갯수)로 제목을 설정하도록 수정하니 1번 문제는 발생하지 않았다.

4. 문제2
  SVG-edit에서 <title></title> 상태로 불러왔다가 다시 저장하면 svg를 string으로 변환하는 함수(svgToString)에서 <title></title>을 <title/>로 바꾸어 저장하고,
CKEditor에서 불러오면 <title></title>사이에 svg 객체를 다 넣어버리는 문제 발생

5. 해결
  svgToString 함수에서 child가 없는 태그를 자동으로 <태그/> 형태로 바꾸지 못하도록 수정했다. 맨 밑 else 문을 아래처럼 수정.
else {
  out.push('>');
  out.push('</'); out.push(elem.nodeName); out.push('>');
}
근본적인 해결법은 아닌 것 같다.
CKEditor의 fullPage 옵션을 허용하면 title을 지우지 않을 것 같지만 fullPage를 허용하는 것 자체가 위험해서 하지 않았다.