使用插件创建jQuery插件

Question

我正在试着做一个tinymce类型的编辑器。我希望它可以像tinymce一样通过插件进行扩展。我的问题是，如何在我的插件中加载和使用外部javascript文件？

Answer 1

您可以创建一个新的脚本标记来拉入javascript文件：

YourEditor.loadPlugin = function(url) {
   var scriptElement = document.createElement('script');

   scriptElement.src = url;

   document.body.appendChild(scriptElement);
};

如果加载的javascript被封装在调用中以向编辑器注册自身：

YourEditor.registerPlugin("some-plugin", function(YourEditor) {

   /* plugin code */

});

在您的核心代码中，您将声明一个函数：

YourEditor.registerPlugin = function(name, loadFunction) {
   loadFunction (this);

   // fire an event (dummy syntax)
   this.fire('pluginLoaded', name);
};

然后，你可以在YourEditor外触发一个事件，让编辑器的用户知道插件'some- plugin‘已经加载了。

注册插件的工作方式与jsonp类似，因为它允许您根据共享函数的知识从任意来源加载代码。它传递了一个名称和一个要调用的函数，这些函数将设置插件运行所需的一切。

Answer 2

以下是我决定做的事情：

使用jQuery.getScript()函数。甚至不知道它的存在。

下面是我的代码：

loadplugins: function() {
        var self = this;
        var settings = self.settings;       
        var plugins = settings.plugins.split(/[\s,]+/);
        var thispath = settings.script_url;

        $.each(plugins, function(i,e) {
            // add .js to the plugin and the path before it
            var thisPlugin = thispath + settings.plugin_dir + e + '.js'; // I'll change this to work with a script or directory

            $.getScript(thisPlugin, function(data, textStatus, jqxhr) {

                console.log(data, textStatus, jqxhr);

                self.registerPlugin(data, function() {

                });
            });

        });

        return true;
    },