vditor 自定渲染,lute.js api

渲染器函数

目前支持的渲染回调场景如下:

即使渲染:IR -> SpinVditorIRDOM
分屏:sv -> SpinVditorSVDOM
所见所得:wysiwyg -> SpinVditorDOM

// 自定义回调 vue 为例子
after: function () {
	this.vditor.vditor.lute.SetJSRenderers({
        renderers: {
          Md2HTML: {
          	 // 关闭硬换行
          	 renderSoftBreak: (node, entering) => {
           		if (entering) {
             		return ['', window.Lute.WalkContinue];
          		}
          		return ['', window.Lute.WalkContinue];
        		},
		  	 },
		  	 // 标题修改
		  	  renderHeading: (node, entering) => {    
        		if (entering) {
              		return [`<h${node.__internal_object__.HeadingLevel} class="vditor__heading"><span class="prefix"></span><span>`, Lute.WalkContinue];
        		} else {
              		return [`</span></h${node.__internal_object__.HeadingLevel}>`,Lute.WalkContinue];
        		}  
			}
        },
    });
}


预览:previewRender

// 预览模式自定义
Vditor.preview(this.$refs.vditor, this.value, {
    renderers: {
         // 关闭硬换行
          	 renderSoftBreak: (node, entering) => {
           		if (entering) {
             		return ['', window.Lute.WalkContinue];
          		}
          		return ['', window.Lute.WalkContinue];
        		},
		  	 },
		  	 // 标题修改
		  	  renderHeading: (node, entering) => {    
        		if (entering) {
              		return [`<h${node.__internal_object__.HeadingLevel} class="vditor__heading"><span class="prefix"></span><span>`, Lute.WalkContinue];
        		} else {
              		return [`</span></h${node.__internal_object__.HeadingLevel}>`,Lute.WalkContinue];
        		}  
			}
    },
});
  • HTML2Md:HTML 转 Markdown,v3.2.0 后改为 HTML2VditorSVDOM。使用场景:
    • options.mode 为 sv 时,初始化编辑器内容
    • 调用 html2md 方法
    • 在 sv 模式粘贴复制好的 HTML 时触发
  • HTML2VditorDOM:HTML 转 Vditor DOM,在 wysiwyg 模式粘贴 HTML 时触发
  • HTML2VditorIRDOM:HTML 转 Vditor IR DOM,在 ir 模式粘贴 HTML 时触发
  • HTML2VditorSVDOM:HTML 转 Vditor SV DOM,在 sv 模式粘贴 HTML 时触发
  • Md2HTML:Markdown 转 HTML,v3.2.0 后改为 Md2VditorSVDOM。使用场景:
    • 调用静态方法 md2html
    • 调用静态方法 previewRender
  • Md2VditorDOM:Markdown 转 Vditor DOM,在 wysiwyg 模式粘贴纯文本时触发
  • Md2VditorIRDOM:Markdown 转 Vditor IR DOM,在 ir 模式粘贴纯文本时触发
  • Md2VditorSVDOM:Markdown 转 Vditor SV DOM,在 sv 模式粘贴纯文本时触发

块级渲染器

  • renderDocument:渲染整个文档
  • renderParagraph:渲染段落
  • renderText:渲染文本
  • renderCodeBlock:渲染代码块,相关渲染器包括 renderCodeBlockOpenMarker、renderCodeBlockInfoMarker、renderCodeBlockCode 和 renderCodeBlockCloseMarker
  • renderMathBlock:渲染数学公式块,相关渲染器包括 renderMathBlockOpenMarker、renderMathBlockContent 和 renderMathBlockCloseMarker
  • renderBlockquote:渲染块引用,相关渲染器包括 renderBlockquoteMarker
  • renderHeading:渲染标题,相关渲染器包括 renderHeadingC8hMarker
  • renderList:渲染列表
  • renderListItem:渲染列表项,相关渲染器包括 renderTaskListItemMarker
  • renderThematicBreak:渲染分隔线
  • renderHTML:渲染 HTML 块
  • renderTable:渲染表格,相关渲染器包括 renderTableHead、renderTableRow 和 renderTableCell
  • renderFootnotesDef:渲染脚注定义块

行级渲染器

  • renderCodeSpan:渲染代码,相关渲染器包括 renderCodeSpanOpenMarker、renderCodeSpanContent 和 renderCodeSpanCloseMarker
  • renderInlineMath:渲染行级数学公式,相关渲染器包括 renderInlineMathOpenMarker、renderInlineMathContent 和 renderInlineMathCloseMarker
  • renderEmphasis:渲染强调,相关渲染器包括 renderEmAsteriskOpenMarker、renderEmAsteriskCloseMarker、renderEmUnderscoreOpenMarker 和 renderEmUnderscoreCloseMarker
  • renderStrong:渲染加粗,相关渲染器包括 renderStrongA6kOpenMarker、renderStrongA6kCloseMarker、renderStrongU8eOpenMarker 和 renderStrongU8eCloseMarker
  • renderStrikethrough:渲染删除线,相关渲染器包括 renderStrikethrough1OpenMarker、renderStrikethrough1CloseMarker、renderStrikethrough2OpenMarker 和 renderStrikethrough2CloseMarker
  • renderHardBreak:渲染硬换行
  • renderSoftBreak:渲染软换行
  • renderInlineHTML:渲染行级 HTML
  • renderLink:渲染链接,相关渲染器包括 renderOpenBracket、renderCloseBracket、renderOpenParen、renderCloseParen、renderLinkText、renderLinkSpace、renderLinkDest 和 renderLinkTitle
  • renderImage:渲染图片,相关渲染器包括 renderBang 和 renderLink
  • renderEmoji:渲染 Emoji,相关渲染器包括 renderEmojiUnicode、renderEmojiImg 和 renderEmojiAlias
  • renderToC:渲染页内目录
  • renderFootnotesRef:渲染脚注引用
  • renderBackslash:渲染反斜杆,相关渲染器包括 renderBackslashContent

渲染器函数 node 参数api

在这里插入图片描述

  • AcceptLines 判断是否节点是否可以接受更多的文本行。比如 HTML 块、代码块和段落是可以接受更多的文本行的。
  • CanContain 判断是否能够包含 NodeType 指定类型的节点。 比如列表节点(块级容器)只能包含列表项节点,块引用节点(块级容器)可以包含任意节点;段落节点(叶子块节点)不能包含任何其他块级节点。
  • ClearIALAttrs 用于删除 name、alias、memo 和 bookmark 以及所有 custom- 前缀属性。
  • TokensStr 返回 n 的 Tokens 字符串。
  • LastDeepestChild 返回 n 的最后一个最深子节点。
  • FirstDeepestChild 返回 n 的第一个最深的子节点。
  • ChildByType 在 n 的子节点中查找 childType 指定类型的第一个子节点。
  • ChildrenByType 返回 n 下所有类型为 childType 的子节点。
  • Text 返回 n 及其文本子节点的文本值。
  • TextLen 返回 n 及其文本子节点的累计长度。
  • Content 返回 n 及其所有内容子节点的文本值,块级节点间通过换行符分隔。
  • EscapeMarkerContent 返回 n 及其所有内容子节点的文本值(其中的标记符会被转义),块级节点间通过换行符分隔。
  • TokenLen 返回 n 及其子节点 tokens 累计长度。
  • DocChild 返回 n 的父节点,该该父节点是 doc 的直接子节点。
  • IsChildBlockOf 用于检查块级节点 n 的父节点是否是 parent 节点,depth 指定层级,0 为任意层级。n 如果不是块级节点,则直接返回 false。
  • Unlink 用于将节点从树上移除,后一个兄弟节点会接替该节点。
  • AppendTokens 添加 Tokens 到结尾。
  • PrependTokens 添加 Tokens 到开头。
  • InsertAfter 在当前节点后插入一个兄弟节点。
  • InsertBefore 在当前节点前插入一个兄弟节点。
  • AppendChild 在 n 的子节点最后再添加一个子节点。
  • PrependChild 在 n 的子节点最前添加一个子节点。
  • List 将 n 及其所有子节点按深度优先遍历添加到结果列表 ret 中。
  • ParentIs 判断 n 的类型是否在指定的 nodeTypes 类型列表内。
  • IsBlock 判断 n 是否为块级节点。
  • IsContainerBlock 判断 n 是否为容器块
  • IsMarker 判断 n 是否为节点标记符。
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值