this.$refs 动态渲染文本内容_【教程】基于文本编辑器的 Markdown 编辑插件:如何自定义渲染引擎...

MarkdownText 插件是我为 Textrument 文本编辑器开发的 Markdown 实时预览插件。而后者 Textrument (图创文本)则是基于臭名昭著的开源编辑器 Npp 改制而来。

KnIfER:你没见过的多内核、多引擎Markdown编辑器来了!​zhuanlan.zhihu.com
zhihu-card-default.svg

为什么要自定义渲染引擎呢?Markdown 标准/风格不一,各种实现都拿来试试,才能选出最合适的。而且开放自定义后,甚至还可以用来做别的事情,比如显示 ASCIIDoc。

下面说说如何定制,只需稍微学习一点前端知识就可以掌握。


说起前端,第一印象就是及其强大的 JS 语言。MarkdownText 正是利用这种可以动态加载、动态执行的脚本语言实现其扩展特性的。好家伙,组件化插件,本身可以扩展的的插件,我愿称之为九九玄功。

这里给出一个最简单的例子,将编辑器中的文本实时渲染为 H5页面,即完成实时HTML预览功能:

  1. 第一步,在插件目录新建一个文件夹 HtmlViewer,名字就是渲染引擎扩展的名字。
  2. 第二步,在这个空文件夹内,新建一个 main.js 脚本。此时,该文件夹可被插件扫描感知到。重启编辑器或者点击插件菜单中的“切换渲染引擎:”,一个新的菜单条目, HtmlViewer 出现了!
  3. 第三步,编辑 main.js ,写入如下内容:
function init(name){
	window.APMD=function(val) {
		console.log('更新页面中……');
		document.body.innerHTML=val;
	}
}

解读,很简单:定义一个 init 方法,代表初始化渲染引擎的法门,之后“导出”一个 APMD 方法, 意思是 “Append Markdown”,附加在页面的 window 对象上。APMD 由插件调用,每次检测到编辑器的内容发生变化,插件都会调用此方法。

最后测试使用:打开刚才提到的插件菜单,点击“切换渲染引擎:”之下的“HtmlViewer”条目,插件会立即加载并初始化刚才自定义的渲染引擎。打开 .html 文件,选择“预览当前文件”就可以开始实时预览了,是不是很魔幻呢!


此例仅作参考,只能简单地预览HTML,不能加载外部脚本等资源。

不过,我随后又在 c++ 底层实现了功能较全的 HTML 预览功能,正在用它来继续制作的我浏览器项目——多聚浏览器的主页:

0edaf49238d39d5cb5865827b2243f0e.png

现在可根据文件后缀名在HTML/MarkDown/AsciiDoc三种渲染模式间自动切换。

用来抄作业也十分方便呢!比如模仿 MathJax 的 annotation 对话框,用作简易 latex 代码查看/编辑器的对话框界面:

31754762134fc10bd23b8bac21ec00b0.gif
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值