Jquery plugins jQuery 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);

如果我将“image”参数更改为image:“”则会显示与“B”相同的图像，但插件可以正常工作

---

有人知道什么地方出了问题吗？

使用非最小化版本进行调试会更容易。您可以从这里获得：（）

有两个函数在代码中包含一个长度调用，该调用在最小化代码的第17行结束。处理颜色的十六进制函数中的一个。另一个是imagePath函数

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

如果呈现的html不包含类似“”的行，则可能会引发与您相同类型的错误。（Href将是未定义的。）

---

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

Hi widged，感谢您的帖子-这是一个很好的想法！使用完整的JS文件时，确切的错误是：

href未定义：return href.substr（0，href.length-cssFile.length）+“images/”。所以，您完全正确，但它似乎与CSS文件无关-该文件链接正确。还有其他想法吗？啊，是css文件！当我深入研究
link[href$=…
的工作原理时，我意识到只有当CSS文件以
jquery.cleditor.CSS
结尾时，它才能找到CSS文件。WordPress自然地将
？ver=3.3.1
添加到排队样式表的末尾，所以当我删除它时，问题就解决了！
function imagesPath() {
  var cssFile = "jquery.cleditor.css",
  href = $("link[href$='" + cssFile +"']").attr("href");
  return href.substr(0, href.length - cssFile.length) + "images/";
}