解决WordPress中的CodeMirror库冲突错误“未捕获的TypeError：CodeMirror不是函数”

Question

我维护了一个使用管理控制台中的CodeMirror库的插件。一些用户抱怨“未捕获的TypeError：CodeMirror不是函数”，这是由于CodeMirror版本中的冲突引起的。我的插件使用CodeMirror 2（v5.x），该代码在加载库后使用自定义脚本文件实例化。

(function($){
  $(document).ready(function(){
    var options = {};
    var cmEditor = CodeMirror($('#cmeditor').get(0), options); //error thrown here.
    ...
  }
})(jQuery)

但是，较旧的Codemirror 1要求实例化一个新对象var cmEditor = new CodeMirror();，这就是发生冲突的地方。如果其他插件确定使用CodeMirror 1且未正确定位管理页面（编码不良的插件常见的问题），则我的插件会尝试使用最后加载的旧库版本实例化编辑器。

那么如何确保脚本使用正确的库？

Answer 1

在搜索了有关JavaScript库冲突管理的通用解决方案后，我遇到了这个博客post，该博客介绍了如何在WordPress中加载和使用不同版本的jQuery，以及关于StackOverflow的此answer，该主题使用了匿名函数构造来在加载所需的库后立即传递实例化的对象。因此，我设法通过使用WordPress中的wp_add_inline_script() function解决了我的问题。

wp_enqueue_script('codemirror-js', 'uri_path_to_js_folder/codemirror.js', null, '5.32');
wp_add_inline_script( 'codemirror-js', 'var cme_5_32 = CodeMirror(document.getelementById("cmeditor"),{});'

这将确保在浏览器加载CodeMirror库v5.32之后使用正确的库立即实例化对象cme_5_32。

然后我将此对象解析为脚本的匿名函数的属性，

(function($, cme){
  $(document).ready(function(){
    ...
  }
})(jQuery, cme_5_32)

现在没有更多错误！