在《短代码与代码高亮功能结合,终于可以随意的来回切换可视化/文本模式进行编辑代码了》这篇文章中有提到,在WordPress中使用可视化编辑器是TinyMCE,但是在折腾TinyMCE发现有些功能真的不好实现,比如代码高亮功能,对于不同的js代码高亮插入,所引入的方式和使用方法还是有所不同的。
比如目前本站前台使用的代码高亮插件,code-prettify,它是直接在window对象上挂载的实例,且没有暴露出专门的高亮方法,比如我传入一个Dom元素,然后返回高亮的代码,而是需要在需要代码高亮的Dom元素上提交写好对应的高亮class名,然后才会生效了。
那跟我的需求是不搭嘎的,虽然最终采用其他的js代码高亮插件去搞,但是也实现把js代码高亮插件注入到TinyMCE中的iframe中,当然了注入的不仅仅是代码高亮的js,也可以是其他的js,这里只是举个demo,具体实现代码如下:
// 其实主要的思路就是监听编辑器初始化后,挂载js脚本 editor.on("init", function () { const scriptId = editor.dom.uniqueId(); const scriptEle = editor.dom.create("script", { id: scriptId, type: "text/javascript", src: "挂载的脚本地址", }); editor.getDoc().getElementsByTagName("head")[0].appendChild(scriptEle); });