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

最新推荐文章于 2024-06-15 09:34:19 发布

华海亲子鉴定中心

最新推荐文章于 2024-06-15 09:34:19 发布

阅读量392

点赞数

文章标签： this.$refs 动态渲染文本内容

本文链接：https://blog.csdn.net/weixin_35110501/article/details/113628333

版权

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

KnIfER：你没见过的多内核、多引擎Markdown编辑器来了！zhuanlan.zhihu.com

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

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

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

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

第一步，在插件目录新建一个文件夹 HtmlViewer，名字就是渲染引擎扩展的名字。
第二步，在这个空文件夹内，新建一个 main.js 脚本。此时，该文件夹可被插件扫描感知到。重启编辑器或者点击插件菜单中的“切换渲染引擎：”，一个新的菜单条目， HtmlViewer 出现了！
第三步，编辑 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 预览功能，正在用它来继续制作的我浏览器项目——多聚浏览器的主页：

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

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

关注