복사, 붙여넣기 기능 확장

[vulcan9]

Copy & Paste 기능 확장

현재 편집기에서 지원되는 Copy & Paste 기능

• 편집기 내에서 element 복사/붙여넣기
• Text Element에서 HTML 붙여넣기하여 스타일 지정

목적

다른 App에서 복사한 데이터도 편집기로 가져올 수 있도록 기능을 확장시킨다. 예) 파워포인트, 엑셀, 워드, 한글등 자주 사용하는 office 툴에서 내용을 그대로 복사하여 사용하고 싶다.

[vulcan9]

구현 내용

클립보드에 복사된 내용을 활용하여 편집기에서 붙여넣기 할수 있는 데이터 유형은 다음과 같습니다.

원본

엑셀에서 온라인 서식 파일을 복사하여 붙여넣기 할때를 예를 들면,

클립보드에 복사 후 붙여넣기

붙여넣기 할 수있는 옵션을 선택할 수 있습니다.

붙여넣기 유형

텍스트

plain text 만을 추출하여 Text 요소에 붙여넣기 합니다.

텍스트 (styled)

스타일 정보와 함께 텍스트 데이터를 Text 요소에 붙여넣기 합니다.
스타일 내용에 따라 layout 크기는 텍스트 요소 크기와 일치하지 않을 수도 있습니다. 텍스트를 직접 선택하고 수정할 수있습니다.

편집창을 통해서도 내용을 수정할 수 있습니다.

HTML 박스

스타일 정보와 함께 텍스트 데이터를 HTML 요소에 붙여넣기 합니다.
스타일 내용에 따라 layout 크기는 텍스트 요소 크기와 일치하지 않을 수도 있습니다. 편집기 페이지에서 내용은 선택되지 않습니다.

HTML 편집창을 통해 내용을 수정할 수있습니다.

이미지 (png or jpeg)

이미지 요소에 붙여넣기 합니다.

• Text 요소, HTML 요소에 붙여넣기 한 텍스트는 출판 후에도 선택 가능합니다.

[vulcan9]

기타

스타일이 중복되는 현상

• Styled Text로 붙여넣기 하는 경우 내용에 style 태그가 포함되어져 있으면 서로 다른 Text 박스이더라도 서로 CSS의 영향을 받는다.

1. 엑셀에서 복사한 원본

2. Styled Text로 붙여넣기함

3. 엑셀에서 상단만 다시 복사

4. Styled Text로 다시 붙여넣기함

• 중복된 style이 두 텍스트 박스에 서로 영향을 주고 있음
• 두번째 붙여넣기한 텍스트 박스를 삭제하면 첫번째 텍스트 박스는 원래 모양으로 되돌아옴
• Html 요소로 붙여넣기 할때는 서로 독립적으로 랜더링 되므로 이런 현상이 발생하지 않음

조건 주석문

• 조건 주석문의 경우 HTML 표준에 없지만 이를 삭제하는 경우 style이 사라질 수도 있어 그대로 유지함
  • 파워포인트, 한글등에서는 표준이 아닌 자체 조건 주석문을 사용하여 style을 선택적으로 적용하고있음

    엑셀: <!--[if !mso]> ~ <![endif], ...
    파워포인트: <![if ppt]> ~ <![endif], ...
    한글: <![if !vml]> ~ <![endif], ...

  • 주석문을 삭제할 경우 문서 스타일 서식이 훼손됨

기타

• HTML로 붙여넣기 하는 경우 레이아웃이 틀어지는 경우가 있음
  • 원본 데이터가 HTML 표준이 아닌 경우일 수 있음 (예: 한컴 오피스)

[vulcan9]

2.1.13 버전(이상)에서 처리(구현) 되었습니다.

[vulcan9]

지원되는 Copy Type

HTML, TEXT, RTF, PNG, JPEG

• system clipboard에서 지원되는 데이터
  • ELEMENT
• 직지에서 복사되는 데이터

붙여넣기 Type 우선순위

ELEMENT > (PNG > JPEG) > HTML > TEXT > RTF(보류)

• HTML, TEXT 데이터가 함께 있으면

  • HTML을 우선 적용 à HTML Element 생성 후에 적용
  • TEXT Element 편집에서 붙여넣기 하는 경우에는 TEXT 데이터를 적용

• TEXT 데이터만 있으면

  • TEXT Element 생성 후 적용

• PNG, JPEG 데이터가 있는 경우

  • PNG base64 데이터를 적용
  • Image Element 생성 후에 적용

• RTF - 지원 보류

• ELEMENT

  • 기존 로직 적용
  • JSON 형식으로 변환과정을 생략하기 위해 임시로 저장해서 사용한다.