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時可能會發現設置更容易。