마크업 base64 이미지 문자열을 전체 텍스트 대신 (...)으로 표시하기

이 기능 제안은 Word 문서에서 이미지를 복사하여 Discourse 게시물 편집기에 붙여넣을 때 발생했습니다. 이렇게 하면 다음과 같은 결과가 나옵니다:


(그 스크롤바를 한번 보세요 :smiley: )

대신 이렇게 표시되면 좋겠습니다:
image

여기서 (…)는 나머지 부분을 펼칠 수 있는 클릭 가능한 방식입니다.

다만, 이 부분은 깊이 생각해보지 않았습니다. 이렇게 하는 것도 똑같이 잘 작동할 수 있습니다:
image

모든 링크에 적용하면 가독성을 높이는 데 도움이 될 수도 있습니다.

여기서 더 논의할 부분이 있을 수도 있습니다. 현재는 Word에서 이미지를 복사한 후, 미리보기 창에서 우클릭하여 사이트로 업로드하기 위해 다시 붙여넣고 있습니다. 이렇게 하면 더 짧은 URL을 사용할 수 있습니다 :sweat_smile:

1개의 좋아요

드롭다운에 표시할 코드가 있다면, 톱니바퀴 아이콘에서 "상세 정보 숨기기"를 사용해 보세요.

Imagename
data:image/png;base64.. Etc
/* Rest of code here
*/
/*    
[Details="Summary"]
[Code]
Program type code
[/code]
[/details]
*/

실제로 일어나야 할 일은 HTML 붙여넣기가 아니라 업로드된 이미지로 처리되는 것이라고 생각합니다. 예를 들어 LibreOffice를 사용하여 Word 문서에서 이미지를 복사한 경우 제가 설명한 대로 동작합니다.

어떤 운영체제와 어떤 버전의 Word에서 이런 문제가 발생하는지 알려 주시겠어요?

4개의 좋아요

Windows 10과 최신 버전의 Word(365)를 사용 중입니다. 스탠드얼론 Word에서도 시도해 보겠지만, 위의 보고서는 브라우저에서 열린 Word 문서에서 이미지를 복사한 것에서 비롯된 것으로 생각됩니다.

데스크톱 Word 365에서 파일을 열었을 때 이미지는 정상적으로 업로드되었습니다:
image

따라서 문제는 SharePoint에서 직접 열린 Word 파일에만 발생하는 것으로 보입니다.

1개의 좋아요

제가 이해한 바로는 웹 버전의 Word에는 제한 사항이 있습니다. 테스트 중이던 파일을 OneDrive에 업로드한 뒤 거기서 열었지만, 이미지를 복사해 내보내기 위해 보기도 할 수 없었습니다.

웹 버전의 Word가 잘못된 작업을 수행하는 경우라고 생각합니다.

수정: Word Online에서 새 문서를 생성하고 로컬에도 저장하여 테스트해 보았습니다.

LibreOffice에서 열었을 때(죄송하지만, 죄송하지 않습니다. Linux에는 네이티브 Word가 없으니까요), 이미지를 클립보드에 복사했을 때 제공되는 사용 가능한 형식은 다음과 같습니다:

TIMESTAMP,TARGETS,MULTIPLE,SAVE_TARGETS,application/x-openoffice-svxb;windows_formatname="SVXB (StarView Bitmap/Animation)",application/x-openoffice-objectdescriptor-xml;windows_formatname="Star Object Descriptor (XML)";classname="8BC6B165-B1B2-4EDD-aa47-dae2ee689dd6";typename="LibreOffice 6.4 Text Document";displayname="file:///home/michael/scratch/Document1.docx";viewaspect="1";width="35033";height="27704";posx="0";posy="0",image/png,application/x-openoffice-gdimetafile;windows_formatname="GDIMetaFile",application/x-openoffice-emf;windows_formatname="Image EMF",application/x-openoffice-wmf;windows_formatname="Image WMF",application/x-openoffice-bitmap;windows_formatname="Bitmap",image/bmp,application/x-libreoffice-internal-id-109262

반면에 Word Online에서 이미지를 복사하면 사용 가능한 형식은 다음과 같습니다:

TIMESTAMP,TARGETS,SAVE_TARGETS,MULTIPLE,text/html

즉, 우리가 사용할 수 있는 이미지 형식이 클립보드에 존재하지 않습니다. text/html 형식으로 클립보드에서 데이터를 가져오면(작은 샘플 이미지의 경우) 다음을 얻습니다:

<meta http-equiv="content-type" content="text/html; charset=utf-8"><img class="WACImage SCXW69312358 BCX0" unselectable="on" src="data:image/png;base64,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" style="margin: 1px; padding: 2px; user-select: text; -webkit-user-drag: none; -webkit-tap-highlight-color: transparent; border: none; white-space: pre !important; vertical-align: baseline; color: rgb(0, 0, 0); font-family: &quot;Segoe UI&quot;, &quot;Segoe UI Web&quot;, Arial, Verdana, sans-serif; font-size: 12px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; width: 44px; height: 29px;">\x00

이것은 다음으로 변환됩니다:

2개의 좋아요

기술적으로 제가 보기에는, 단순히 워드에서 이미지를 선택한 경우에만 업로드를 붙여넣기하는 방식이어야 합니다. 구현 난이도는 그리 높지 않을 것입니다.

장기적으로는 여러 개를 선택했을 때(예: 이미지 몇 개와 문단 몇 개) ‘여러 개’ 업로드를 지원하고 싶지만, 당장의 임시 해결책으로는 이미지를 생략하고 [image] 텍스트 플레이스홀더를 넣는 방식이 될 수 있겠네요.

여기서 details를 사용하는 것은 매우 이상해 보입니다. 저는 그 방식이 별로 좋지 않다고 생각합니다.

@vinothkannans 어떻게 생각하시나요? 문제를 재현해 볼 수 있으신가요? 우리는 분명히 편집기에 base64 인코딩된 PNG를 채워 넣어서는 안 됩니다.

3개의 좋아요

온라인 Word 문서에서 복사하여 붙여넣기할 때마다 재현할 수 있습니다. 네, 당분간 base64 이미지를 [image] 플레이스홀더로 대체해야 합니다.

3개의 좋아요

방금 word.exe(최신 버전)에 문서를 추가한 뒤, 여기로 복사해서 붙여넣었습니다:

![image|624x345](upload://nZJHaKiiDg9Osub7fMFNFJ9GbOI.png)

이렇게 하면 잘 동작합니다.

이제 onedrive.live.com(Word의 온라인 버전, 동일한 이미지)에서 똑같은 작업을 시도해 보겠습니다.

실제로 base64로 인코딩된 데이터 덩어리처럼 보입니다.```


확실히.. 짜증나고, Word 웹 버전에서는 재현할 수 있지만 Windows 실행 파일 버전에서는 재현할 수 없어요.
3개의 좋아요

커밋에서 처리되었습니다 :arrow_double_down:

4개의 좋아요