Does the preview style change method exist?

[wslp12]

Summary

previewer의 스타일은 아래 사진과 같이 div에 클라스 이름기준으로 사용자에게 보여 지는 것 으로 추정 됩니다. 정말 멋진 기본 스타일입니다 하지만 제가 다른 형식의 스타일을 제공 할 수도 있도록 도와주는 api가 존재 합니까 ? 해당 사진에 나오는 div의 클라스 이름을 변경 가능하게 하는 방법이 존재 합니까 ?

추가로 prosemirror기준으로 설계되어 있는 것으로 보이는데 그렇다면 에디터에(마크다운 기준)입력된 텍스트를 프로즈미러노드 json형식으로 볼 수 있는 방법이 존재할까요 ?

---

As shown in the picture below, the preview is respectively class="toastui-editor-md-preview" class="toastui-editor-contents"

It seems to offer a style under the name of the class.

It's a very cool style that's I would like to offer Markdown in a different style format

Is there an API provided in relation to this?

Additionally, it seems to be designed based on the prosemirror standard Then is there a way to get the input text in json format in the editor (based on markdown)?

Screenshots

Version

Write the version of the Editor you are currently using.

Additional context

Add any other context about the problem here.

[jwlee1108]

@wslp12 Sorry for the late reply.

What style do you want to apply? If you want to change the full style of the editor, you can only overwrite the CSS.

FYI, We offer a custom block (link)

(ADD) I want to know more detailed information about json format data.

[wslp12]

@jwlee1108 It seems that the current editor is applying the style of the preview based on the container below.

<div class="toastui-editor-md-preview">
    <div class="toastui-editor-contents">
...
    </div>
</div>

Most editors with Markdown format seem to have designated containers as above and applied the style to the child elements below

I want to change the class name of that container.

The css I will use is not the name of the container toastui-editor-md-preview, toastui-editor-content.

I cannot change the css area

In addition, in the case of json format,

editor.getHTML();
editor.getMarkdown();

When executing the back and forth method (getHTML,getMarkdown), the string type is returned It's not the result of the string type I wonder if it is possible to return the Json format as well {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"em"}],"text":"asdfasdf"}]}]}

---

현재 시도하고 있는 작업은 토스의 프리뷰 스타일을 변경하고자 합니다 태그들에 대해서 커스텀을 시도 하고자 하는 것이 아닙니다. 보편적으로 마크다운에 css를 입힐때 위 처럼 컨테이너에 class 가 들어가고 그 기준으로 스타일을 먹이는데

토스도 그렇게하고 있고 저 역시 그러고자 합니다

다만 제가 사용할 css파일에는 이미 특정 컨테이너 클라스가 지정되어 있습니다 아래처럼요

<div class="git-md-preview">
    <div class="git-contents">
...
    </div>
</div>

따라서 제가 원하는건 프리뷰를 감싸고 있는 컨테이너의 클라스를 변경하는 방법이 궁금합니다 (toastui-editor-md-preview, toastui-editor-content)

추가로 json 형식의 경우는

editor.getHTML();
editor.getMarkdown();

위 뒤 메서드를 실행 시킬 경우 (getHTML,getMarkdown) string 타입을 리턴하는데 string타입의 결과물이 아니라 아래와 같은 json 형식도 리턴이 가능한지 궁금하네요 {"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"em"}],"text":"asdfasdf"}]}]}

[stale[bot]]

This issue has been automatically marked as inactive because there hasn’t been much going on it lately. It is going to be closed after 7 days. Thanks!

[OrangeHeap]

I have the same issue, is it possible to pass in parameters to customize the classname of the container?

[wslp12]

I decided to handle it another way. Thank you!