Плагин jQuery cleditor: создание новой кнопки - PullRequest
Новая
       37

Плагин jQuery cleditor: создание новой кнопки

0 голосов
/ 11 марта 2012

Используя 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

Там у меня есть все файлы вкладчиков и 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

Если я заменил аргумент «image» на image: «» появится то же изображение для «B», но плагин работает без ошибок.

У кого-нибудь есть идеи, что может быть не так?

1 Ответ

1 голос
/ 11 марта 2012

Было бы легче отлаживать с не свернутой версией.Вы можете получить его здесь: http://premiumsoftware.net/cleditor/ ( zip )

Есть 2 функции, которые включают вызов длины в коде, который заканчивается строкой 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 не содержит строку типа "Msgstr "" (Href будет тогда неопределённым.)

Для интеграции с WordPress вам может быть проще установить его при использовании версии плагинов WordPress cleditor .

...