tinyMCE 에디터를 이용한 첨부 이미지 삽입 TTML 문제

[waltererz]

최근 텍스트큐브 1.10.1 발표후보1로 업그레이드하였습니다.
이전 버전에서는 나타나지 않던 문제가 발생하는 것 같아 이슈 등록합니다.

tinyMCE 에디터에서 첨부 이미지를 삽입하였을 때, 정상이라면 다음과 같이 TTML이 작성되어야 합니다.
[##-1C|7892146709.jpg|width="1000" height="600" alt="사용자 삽입 이미지"|-##]

하지만 실제로는 다음과 같이 TTML이 작성됩니다.
[##-1C|7892146709.jpg|width="1000" <span id="CmCaReT"></span>height="600" alt="사용자 삽입 이미지"|-##]
TTML 가운데에 <span id="CmCaReT"></span> 이라는 태그가 삽입됩니다.

테스트를 해보니 첨부 이미지에 자막을 넣지 않은 경우에만 위와 같은 문제가 발생합니다.
아래와 같이 자막을 넣은 이미지의 TTML에는 문제가 나타나지 않습니다.
[##-1C|7892146709.jpg|width="1000" height="600" alt="사용자 삽입 이미지"|사용자 삽입 이미지-##]

[inureyes]

codemirror 플러그인에서 삽입하는 태그로 보입니다. 어떠한 경우에 저 태그가 들어가는지 확인해 보겠습니다.

[inureyes]

@waltererz 방금 해 봤는데 말씀하신 문제가 재현이 되지 않습니다. 혹시 이 문제를 재현하는 방법을 조금 더 구체적으로 설명해 주실 수 있으신지요? 확인해보고 삽질로 수정하겠습니다^^

[waltererz]

@inureyes

테스트입니다.[br /][br /][##-1C|3034543141.jpg|width="1000" height="666" alt="사용자 삽입 이미지입니다. 하하"|-##][br /][br /]ㅇㅇㅇ[br /][br /]안녕하세요?

위와 같이 테스트해보았습니다.

지금 확인해보니 위지윅에디터에서 이미지를 삽입한 후 대체텍스트나 자막을 수정할 때에는 아무런 문제가 없지만, 이미지 TTML 코드를 직접 수정하면 문제가 발생합니다.

HTML 소스 창에서 "사용자 삽입 이미지입니다. 하하"을 "사용자 삽입 이미지입니다.하하"로 바꾸면,
[##-1C|3034543141.jpg|width="1000" height="666" alt="사용자 삽입 이미지입니다.<span id="CmCaReT"></span>하하"|-##]
로 TTML 중간에 HTML 태그가 추가됩니다.

이미지의 자막을 입력하지 않는다고 해서 문제가 발생하는 문제는 아니고, 이미지 TTML에 직접 손을 대는 경우에 이와 같은 문제가 발생합니다.

위지윅에디터만 사용하는 경우에는 문제가 발생하지 않는군요.

[zvuc]

저도 최근에 글 작성하다가 간혹 저 문제를 보았는데요.
정확히는 저 <span id="CmCaReT"><span>은 위지윅 에디터에서 커서가 있는 위치를 전송해 HTML소스보기 창에서 그에 상응하는 위치에 커서를 놓아주는 기능과 관련된 것이었던걸로 기억합니다. 반대로 소스보기에서 커서를 놓고 위지윅으로 돌아갈때도 커서 위치를 전송하니 아마 일반적인 html 마크업이 아닌 치환자 마크업 내부에 커서를 두고 위지윅으로 돌아갈때 제대로 인식을 못해서 문제가 생기는 것이 아닐까 추측해봅니다.

[zvuc]

방금 테스트해보았습니다.
이미지 업로더로 이미지를 넣은 뒤 HTML소스 보기로 들어가 [##_1C|1415129227.png|width="700" height="302" alt="ㅁㄴㅇㄹㄴㅇㄹ"|ㄴㅇㄹ_##] 치환자 내 아무곳이나 커서를 둔 뒤에 위지윅 모드로 다시 돌아오면 예측했던대로 커서를 두었던 곳에 <span id="CmCaReT"><span>이 삽입되면서 치환자 코드가 깨져버리네요.

예외 처리를 할 필요가 있을것 같습니다

[inureyes]

@waltererz @zvuc 👍 처리하겠습니닷!

[inureyes]

codemirror의 구현: submit() 이 OK 를 누를때 실행되고, 거기서 커서 위치에 미리 지정해 놓은 특수 문자를 span id 형태로 변환을 합니다. 그리고 해당 DOM을 찾아서 다 지우는 식으로 동작하네요.

[inureyes]

codemirror 플러그인에서 편집이 끝나고 돌아갈 때 현재 포커스의 위치를 기억하기 위해서 <span id="CmCaReT"></span> 을 커서 위치에 삽입한 다음, 이후 위지윅 DOM에서 해당 노드를 찾아서 커서를 그리로 옮긴 후 해당 노드를 지우는 식의 구현입니다. 문제는 submit 할 때 커서위치에 삽입되는 코드가 HTML stripping이 되어서 <span... 식으로 삽입되게 되고, 당연히 이후 DOM selection의 대상이 되지 못합니다.

[inureyes]

TTMLsupport 에서 HTML<-> wygiwyg 전환시 처리 루틴에서 longDesc 값 자체를 변환해 버리는 루틴이 동작해서 위의 현상이 일어나는 것으로 추측하고 있습니다.

                    // Avoid the bug
                    longDesc = longDesc.replaceAll("<", "<");
                    longDesc = longDesc.replaceAll(">", ">");

이제 어떻게 손을 최대한 덜 대고 이후 codemirror 플러그인이 업데이트 되거나 TTMLsupport가 업데이트 되어도 상관없도록 수정할 수 있을지 고민해 보겠습니다. (뜯어서 예외처리하면 쉽지만, codemirror의 경우 외부 라이브러리라서 가급적이면 오리지널 그대로 유지해 놓는게 좋겠죠)

[zvuc]

코드미러쪽 소스코드도 깃헙에서 업데이트되고 있으니, 일단 한번 최신 빌드로 업그레이드해보고 나서 코드미러쪽 리포에 이슈를 넣어보는것도 나쁘지 않을 것 같습니다.

최근 업데이트 로그를 보니 제가 처음 텍큐에 TinyMCE-EX 풀리퀘하면서 넣었던 tomorrow night bright 테마가 정식 추가되었네요 ㅎ 교체하면될 것 같습니다

[inureyes]

@zvuc 일단 [] 블럭 안의 해당 엘리먼트를 날려버리게 했습니다. 현재 codemirror의 구현을 TTML 파서에서 써먹을 수가 없는 부분때문인데요, TTML->HTML 변환을 할 때 TTML의 이미지 블럭 안의 속성 부분은 HTML의 img의 longdesc 속성에 HTMLencoded되어서 들어갑니다. span CaReT 의 경우에도 longdesc 안으로 들어가므로 변환 후 DOM 안에서 독립적인 엘리먼트가 될 수가 없습니다.