Skip to content

自定义渲染的方法 #350

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
velor2012 opened this issue May 1, 2020 · 14 comments
Closed

自定义渲染的方法 #350

velor2012 opened this issue May 1, 2020 · 14 comments
Assignees
Milestone

Comments

@velor2012
Copy link

你在什么场景下需要该功能?

前端渲染后台发过来的markdown内容,有的时候需要修改某些标签的属性,class,id等。能给个自定义渲染md的方法就好了。类似markedjs中开放的renderer接口,可以针对,,等标签使用自定义的渲染方法。

@88250
Copy link
Collaborator

88250 commented May 1, 2020

你好,目前已经提供了自定义渲染接口,会在如下场景回调:

  • HTML2Md:粘贴 HTML 转 Markdown
  • HTML2VditorDOM:粘贴 HTML 转 Vditor 所见即所得
  • HTML2VditorIRDOM:粘贴 HTML 转 Vditor 即时渲染

具体代码可搜索 SetJSRenderers

如果你在其他场景需要支持自定义渲染,麻烦详细描述一下需求,我们好内置回调场景,谢谢。

@Vanessa219
Copy link
Owner

markdown 没有标签,你是要渲染以后在标签上添加属性么?

@velor2012
Copy link
Author

抱歉,可能我没描述清楚。有两个希望大佬能考虑一下的功能

  1. 希望vditor可以直接把一个markdown字符串渲染成html,即可以提供直接渲染字符串的方法,我看文档里似乎是通过id绑定了某个dom元素然后渲染其中的文本。
  2. 可以自行配置包括但不限于<h>,<code>,<img>等标签的实际渲染输出内容。即
    原本输出:<h>标题</h>
    修改默认配置后
    实际输出:任何自定的内容,例如<h class="xxx">哈哈哈<\h>
    可以参考这个https://marked.js.org/#/USING_PRO.md#renderer

@Vanessa219
Copy link
Owner

  1. 有一个 https://hacpai.com/article/1549638745630#static-methods md2html 的方法
  2. @88250

@velor2012
Copy link
Author

  1. 有一个 https://hacpai.com/article/1549638745630#static-methods md2html 的方法
  2. @88250

明白了,感谢大佬回复

@jakekwak
Copy link
Contributor

jakekwak commented May 1, 2020

thank you for the idea.
I was trying to make the custom CSS like https://mdnice.com/ but their heading html is little different.
so I solved using the below. (REGEX is too difficult 😭 )

      transform(html) {
        html1 = html.replace(/<h2(.*?)>(.*?)<\/h2>/gm, '<h2$1><span class="prefix"></span><span class="content">$2</span><span class="suffix"></span></h2>');
        return html1;
      },

28

@velor2012
Copy link
Author

thank you for the idea.
I was trying to make the custom CSS like https://mdnice.com/ but their heading html is little different.
so I solved using the below. (REGEX is too difficult 😭 )

      transform(html) {
        html1 = html.replace(/<h2(.*?)>(.*?)<\/h2>/gm, '<h2$1><span class="prefix"></span><span class="content">$2</span><span class="suffix"></span></h2>');
        return html1;
      },

28

thanks for your help.I know this problem can be solved by using REGEX, but it's a bit inconvenient and time-consuming because the transformation is performed after rendering. So it's very nice if there is a direct method to make the transformation while rendering.
But it's ok if the method doesn't exist, I can use REGEX to solve this problem.

@88250
Copy link
Collaborator

88250 commented May 2, 2020

@velor2012 @jakekwak We are adding callback scenario Md2HTML, please wait for a moment.

@Vanessa219 Vanessa219 added this to the 3.1.0 milestone May 2, 2020
88250 added a commit to 88250/lute that referenced this issue May 2, 2020
自定义渲染的方法
Vanessa219/vditor#350
88250 added a commit to 88250/lute that referenced this issue May 2, 2020
自定义渲染的方法
Vanessa219/vditor#350
@jakekwak
Copy link
Contributor

jakekwak commented May 2, 2020

@88250 any example?

@Vanessa219
Copy link
Owner

Writing, please wait

@Vanessa219
Copy link
Owner

文档 https://hacpai.com/article/1588412297062
示例 static-preview.html

@jakekwak
Copy link
Contributor

jakekwak commented May 4, 2020

This one is all heading level(1-6).
Question

  1. only one level?(for example, .internal_object.HeadingLevel===2)
  2. how can I put the anchor link?
          if (entering) { 
            return [
              `<h${node.__internal_object__.HeadingLevel} class="vditor__heading"><span class="prefix"></span><span class="content">`,
              Lute.WalkContinue]
          } else {
            return [`</span><span class="suffix"></h${node.__internal_object__.HeadingLevel}>`, Lute.WalkContinue]
          }
  1. and I want to modify the list and listItem renderer at checkbox( only + [ ], + [x] ), can you show me some example code?

@88250
Copy link
Collaborator

88250 commented May 4, 2020

@jakekwak

  1. The internal_object is a node structure translated from golang original source code here
  2. You can refers to renderHeading function of golang HTML renderer implementation to implement yourself overwriting version
  3. I think it could be done by overwriting renderListItem

In short, take a look at golang renderer implementation maybe could help, good luck!

@jakekwak
Copy link
Contributor

jakekwak commented May 4, 2020

@88250 One last thing, How can I get the text of HeadingID at javascript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants