有什么方法可以把js注入到TinyMCE中的iframe?

原创 野人  2022-09-10 12:01  阅读 84 次

在《短代码与代码高亮功能结合,终于可以随意的来回切换可视化/文本模式进行编辑代码了》这篇文章中有提到,在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);
});

本文地址:https://www.yerenwz.com/6212.html
版权声明:本文为原创文章,版权归 野人 所有,欢迎分享本文,转载请保留出处!

发表评论