jQuery的cleditor插件：创建一个新的按钮

Question

使用cleditor，我试图建立与下面的代码自定义按钮：

(function($) { 
    $.cleditor.buttons.link_species = { 
     name: "link_species", 
     image: "fish.gif", 
     title: "Species Link", 
     command: "inserthtml", 
     popupName: "link_species", 
     popupClass: "cleditorPrompt", 
     popupContent: "Genus: <input type='text' size='15'> Species: <input type='text' size='15'><br />Remove italics? <input type='checkbox' value='remove'>&nbsp;<input type='button' value='Ok' />", 
     buttonClick: link_speciesClick 
    }; 

    // Handle the hello button click event 
    function link_speciesClick(e, data) { 
    // Wire up the submit button click event 
    $(data.popup).children(":button") 
     .unbind("click") 
     .bind("click", function(e) { 

     // Get the editor 
     var editor = data.editor; 

     var $text = $(data.popup).find(":text"), 
      genus = $text[0].value, 
      species = $text[1].value; 

     var slug = genus + '-' + species; 
     slug = htmlEntities(slug); 

     var link = '/dev/species/' + slug + '/'; 
     var rel = link + '?preview=true'; 

     var display = firstUpper(genus) + ' ' + species; 

     // Get the entered name 
     var html = '<a href="' + link + '" rel="' + rel + '">' + display + '</a>'; 

     if (!$(data.popup).find(":checkbox").is(':checked')) { 
      html = '<em>' + html + '</em>'; 
     } 

     // Insert some html into the document 
     editor.execCommand(data.command, html, null, data.button); 

     // Hide the popup and set focus back to the editor 
     editor.hidePopups(); 
     editor.focus(); 
     }); 
    } 
})(jQuery); 

这是一个WordPress网站，目录结构是这样的：

/wp-content/plugins/sf-species-profile/cleditor

在那里我有所有的cleditor文件和config.js。这文件是上面的代码存储在哪里。

我也有一个images文件夹包含一个24 * 24 fish.gif文件。

出于某种原因，当我运行这段代码，我得到以下错误：

[firefox] 
a is undefined 
<<myurl>>/wp-content/plugins/sf-species-profiles/cleditor/jquery.cleditor.min.js?ver=3.3.1 
Line 17 

[chrome] 
Uncaught TypeError: Cannot read property 'length' of undefined 

如果我改变了“形象”的说法图像：“B”出现“在同一图像”，但该插件没有错误地工作。

有没有人有什么想法可能是错的？

Answer 1

使用非最小化版本进行调试会更容易。你可以从这里得到：http://premiumsoftware.net/cleditor/（zip）

有两个函数，包括代码中的长度调用，最终代码的第17行结束。一个用于处理颜色的函数hex（s）。另一个是imagePath功能。

function imagesPath() { 
    var cssFile = "jquery.cleditor.css", 
    href = $("link[href$='" + cssFile +"']").attr("href"); 
    return href.substr(0, href.length - cssFile.length) + "images/"; 
} 

它可能会引发你的类型的错误，如果您呈现的HTML不包括像“<的link rel =”样式“类型=‘文/ CSS的’href =”行路径/到/ jquery.cleditor.css“/ >”。 （Href将不确定。）

对于wordpress集成，使用wordpress plugin version of cleditor时可能会发现设置更容易。