토픽을 생성하기 위해 HTML을 토픽에 붙여넣으면, Discourse가 자동으로 HTML을 다시 포맷팅(즉, “쿡” 처리)합니다. 이 과정에서 일부(전부는 아님)의 기존 포맷은 유지되지만, 뷰에서는 HTML 태그가 제거됩니다.
토픽 생성 시 붙여넣은 원래의 HTML을 나중에 다시 가져올 수 있는 방법이 있을까요? 제가 찾을 수 있는 가장 가까운 방법은 엔드포인트에 "raw=true"를 포함하여 API 호출을 하고, 여기에 설명된 대로 response.data.post_stream.posts[0].raw에서 응답을 확인하는 것입니다.
하지만 반환되는 “raw” 텍스트는 원래의 HTML이 아닙니다. 정확히 무엇인지 모르겠지만, 모든 공백이 제거된 기본 쿡된 토픽처럼 보입니다.
붙여넣은 원래의 HTML을 다시 가져올 수 있는 방법이 있을까요?
네, 게시물의 원본(raw) 콘텐츠를 볼 수 있는 경로가 있습니다. 사용자의 게시물을 예로 들어보겠습니다. URL은 다음과 같습니다.
https://meta.discourse.org/t/get-back-the-real-raw-data-that-created-a-post/189183
원본 콘텐츠를 보려면 /t/slug 부분을 /raw로 교체하세요.
https://meta.discourse.org/raw/189183
감사합니다. 하지만 제 환경에서는 작동하지 않는 것 같습니다. 처음에 붙여넣은 HTML과 완전히 동일한 형태를 유지한 데이터를 반환받고 싶습니다. 예를 들어, 원본 HTML에 div 태그가 있었다면, 반환되는 데이터에도 그 div 태그가 그대로 포함되어 있기를 바랍니다.
예를 들어, ‘raw’ 응답에서 확인한 데이터에는 원본 데이터에 없던 마크다운 포맷이 적용되어 있었습니다.
제가 어떤 의미인지 보여주기 위해 예제를 하나 만들어 보겠습니다.
좋습니다. 예시를 하나 만들어 보겠습니다:
워드 프로세서에서 서로 다른 서식으로 몇 줄을 작성했는데, 생성된 HTML은 다음과 같습니다:
원본 HTML:
<style>
...
/* Style Definitions */
table.MsoNormalTable
{mso-style-name:"Table Normal";
mso-tstyle-rowband-size:0;
mso-tstyle-colband-size:0;
mso-style-noshow:yes;
mso-style-priority:99;
mso-style-parent:"";
mso-padding-alt:0in 5.4pt 0in 5.4pt;
mso-para-margin:0in;
mso-pagination:widow-orphan;
font-size:12.0pt;
font-family:"Calibri",sans-serif;
mso-ascii-font-family:Calibri;
mso-ascii-theme-font:minor-latin;
mso-hansi-font-family:Calibri;
mso-hansi-theme-font:minor-latin;
mso-bidi-font-family:"Times New Roman";
mso-bidi-theme-font:minor-bidi;}
</style>
<![endif]-->
</head>
<body lang=EN-US style='tab-interval:.5in;word-wrap:break-word'>
<!--StartFragment-->
<p class=MsoNormal>Here is some text. Font family = Calibri, size 12pt<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><b>This text is bold</b>.<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><i>This text is italicized</i>.<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><span style='font-size:18.0pt'>This text is in a larger font
= Calibri, size 18</span>.<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal align=center style='text-align:center'><span
style='font-size:11.0pt;font-family:"Garamond",serif'>And here is some more random
text that is centered = Garamond, size 11. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.<o:p></o:p></span></p>
<!--EndFragment-->
</body>
</html>
처리된 Discourse 게시글:
이 HTML을 Discourse 게시글에 붙여넣으면 다음과 같이 표시됩니다(“cook” 과정을 거친 후):
Here is some text. Font family = Calibri, size 12pt
This text is bold.
This text is italicized.
This text is in a larger font = Calibri, size 18.
And here is some more random text that is centered = Garamond, size 11. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
원하는 결과
Discourse가 게시글을 처리(cook)하고 현재처럼 표시하는 것은 문제가 없습니다. 하지만 제가 원하는 것은 나중에 게시글을 가져와 원래의 기반 HTML을 다시 얻어오는 것입니다. 즉, 가져오는 데이터는 다음과 같은 형태여야 합니다:
<body lang=EN-US style='tab-interval:.5in;word-wrap:break-word'>
<!--StartFragment-->
<p class=MsoNormal>Here is some text. Font family = Calibri, size 12pt<o:p></o:p></p>
<p class=MsoNormal><o:p> </o:p></p>
<p class=MsoNormal><b>This text is bold</b>.<o:p></o:p></p>
(등등)
현재 제공해 주신 “raw” 엔드포인트를 사용해도 이 HTML을 제공하지 않습니다. 대신 대부분의 서식과 간격이 제거된 텍스트만 제공합니다.
원래의 기반 HTML을 다시 가져올 수 있는 방법이 있을까요?
그래서 아직 이해가 안 되거나, 어떤 단계를 놓치고 있는 것 같습니다. 방금 try.discourse.org에 게시물을 하나 만들었습니다: https://try.discourse.org/t/testing-html-cooking/1405. 원본 콘텐츠는 https://try.discourse.org/raw/1405 입니다. 원본 콘텐츠는 말씀하신 대로 보이는 것 같습니다.
이 문제를 재현하는 방법에 대해 단계별 설명을 주실 수 있을까요? 위에서 공유해 주신 "원본 HTML"을 가져와서 유효한 HTML이 되도록 맨 위에 과 태그를 추가하고, 그 HTML을 본문으로 하는 게시물을 만들었습니다.
맞아요. 원본 링크가 제가 의도한 내용처럼 보이네요. 왜 전에 안 됐는지 모르겠어요. 몇 가지 테스트를 해보고 답변드리겠습니다.
원하시는 HTML이 브라우저에 붙여넣을 때 변환되어 raw에 도달하지 못하는 것이 문제라고 생각합니다.
https://meta.discourse.org/raw/189183/7
Here is some text. Font family = Calibri, size 12pt
This text is bold.
그러나 Word에서 내용을 복사한 뒤 붙여넣으면 모든 HTML이 프론트엔드에서 마크다운으로 변환됩니다.
감사합니다, 여러분. 네, @pfaffman 님, 제 혼란의 일부는 바로 그 부분인 것 같습니다.
예를 들어, Word에서 복사한 내용을 Discourse 주제에 붙여넣고, 나중에 그 주제의 “원시” 데이터를 살펴봤을 때 Word의 원래 서식이 그대로 유지되기를 원한다고 가정해 보겠습니다.
그것이 가능한가요?
수정: 아마도 더 명확한 예시일 것 같습니다(희망합니다). 여기 HTML 코드가 있습니다:
<html>
<body>
<h1>Heading</h1>
<p style="font-size: 35pt">This text should be very big</p>
</body>
</html>
출력을 인쇄하면(예를 들어, W3Schools의 try it 에디터 여기에서), 두 줄의 텍스트가 생성되며 "This text should be very big"라는 문구가 첫 번째 줄보다 크게 표시됩니다. 이는 “font-size: 35pt” 스타일링과 일치합니다.
그 출력을 복사한 다음(HTML 코드가 아니라 출력 결과) 대부분의 곳에 붙여넣으면 서식이 유지됩니다. 예를 들어 Gmail에 붙여넣으면 서식이 유지되고, Microsoft Word에 붙여넣어도 서식이 유지됩니다. 두 경우 모두 두 번째 줄이 올바르게 첫 번째 줄보다 크게 표시됩니다.
하지만 Discourse에서는 원시 편집기 창에서도 서식이 사라집니다. 모든 서식이 제거되고, h1 태그에는 마크다운 "#"만 추가됩니다.
즉, 실제 HTML 코드를 복사해서 편집기에 붙여넣으면 HTML 코드가 그대로 유지되어 원시 형태로 가져올 수 있습니다. 하지만 HTML 코드의 결과를 붙여넣으면, 원시 형태에서도 서식이 사라집니다.
Gmail이나 Word에 출력을 붙여넣었을 때 서식이 유지되는 것은, 내부적으로 HTML을 유지하고 있기 때문일 것입니다. 하지만 Discourse에서는 HTML 출력을 붙여넣을 때 HTML을 제거하는 것처럼 보입니다.
HTML을 제거하지 않도록 하는 것이 가능한가요?
아니요. 에디터에서 Word에서 붙여넣을 때 생성되는 원시 텍스트를 확인할 수 있습니다. 붙여넣기 버퍼를 마크다운으로 변환하는 마법은 브라우저에서 일어나며, 이는 붙여넣기 시점부터 에디터 창에서 내용을 확인할 때까지의 과정입니다.
여기서 핵심적인 오해가 있습니다: raw는 HTML이 아니라 마크다운(Markdown)입니다.
우리는 작성기(composer)에 붙여넣을 때 HTML을 마크다운으로 변환하는 마법 
기능이 있습니다.
더 혼란스러운 점은 Markdown 안에 HTML을 포함할 수 있다는 것입니다. 
하지만 실제 HTML 코드를 붙여넣는 경우(글쓰기 창에서) 이 변환이 일어나지 않습니다. 제가 전에 놓쳤던 부분이 바로 이거였던 것 같습니다.
아니면 @pfaffman 님이 말하신 대로, 어떤 경우든 변환이 실제로 일어나는 것이지만, 마크다운은 코드를 그대로 붙여넣으면 HTML을 유지할 수 있지만, 코드 실행 결과를 붙여넣으면 유지할 수 없는 것일 수도 있습니다.
맞아요, 동작하려면 클립보드에 콘텐츠 타입이 text/html이어야 합니다.
HTML처럼 RTF(리치 텍스트 포맷)와 같은 다른 형식도 마크다운에 보존할 수 있나요?
HTML은 마크다운에서 본질적으로 보존되는 것이 아니라, 중요한 태그 중 일부(예: <em> 강조)만 지원됩니다. 이는 문제가 되지 않는 한 포스텔의 법칙을 따르려는 시도의 일환입니다.
해결하려는 문제는 무엇인가요?
목표는 프로세스가 어떻게 작동하는지 이해하는 것입니다(몇몇 프로젝트에 관련이 있음). 이 대화는 이미 그 부분에서 도움이 되었습니다. 여전히 궁금한 것은, 마이크로소프트 워드에서 복사할 때 원래 서식이 적용된 텍스트에 접근할 수 있는지 여부입니다.
아니요. 붙여넣기 시 이를 처리하는 JavaScript 코드를 살펴봐야 합니다.
이것은 붙여넣기 시점에 발생하는 “HTML을 Markdown으로 변환” 처리 때문입니다.
관련 소스 파일은 다음과 같습니다. Microsoft Word 전용 처리 로직(예: MsoListParagraphCxSpFirst)이 여러 곳에 포함되어 있음을 확인할 수 있습니다.
원시 텍스트를 얻으려면 붙여넣기 전에 메모장 또는 유사한 도구를 통해 텍스트를 먼저 처리해 보세요.
매우 유용합니다. 한 가지 명확히 하고 싶은 점이 있는데: Notepad를 통해 파일을 열면 왜 차이가 나는 건가요?
그렇게 하면 모든 Word 서식이 제거되고 일반 텍스트만 남게 됩니다.
이것이 발생하는 이유는 "복사"를 하면 애플리케이션이 붙여넣기 대상 앱에 데이터를 여러 가지 다른 형태로 제시하기 때문입니다. Discourse는 모든 Word 서식이 포함된 “고급” 버전을 선택하는 반면, 메모장(Notepad)은 “일반” 버전을 선택합니다. 메모장을 거쳐 전달하면 Discourse가 볼 수 있는 것은 “일반” 버전만 남게 됩니다.