Redactor - Uncaught TypeError: Не удается прочитать свойство 'insert' of undefined

Question

Я пытаюсь использовать Redactor в моем проекте. Я хочу добавить текст в редактор при нажатии кнопки.

В API говорит, что вы можете сделать это следующим образом:

function insertHtml() 
{ 
    var html = '<h3>INSERTED</h3>'; 
    $('#redactor').redactor('insert.html', html); 
} 

Ну, мой код выглядит следующим образом:

<button onclick="insertHtml();">Insert</button> 

<script type="text/javascript"> 
    function insertHtml() 
    { 
     var html = '<h3>INSERTED</h3>'; 
     $('.redactor-box').redactor('insert.html', html); 
    } 
</script> 

Redactor редактор:

<div class="redactor-box"> 
<ul class="redactor-toolbar" id="redactor-toolbar-0" style= 
"position: relative; width: auto; top: 0px; left: 0px; visibility: visible;"> 
<li> 
     <a class="re-icon re-bold" href="#" rel="bold" tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-italic" href="#" rel="italic" tabindex= 
     "-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-deleted" href="#" rel="deleted" tabindex= 
     "-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-unorderedlist" href="#" rel="unorderedlist" 
     tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-orderedlist" href="#" rel="orderedlist" 
     tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-outdent" href="#" rel="outdent" tabindex= 
     "-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-indent" href="#" rel="indent" tabindex= 
     "-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-image" href="#" rel="image" tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-file" href="#" rel="file" tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-link" href="#" rel="link" tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-horizontalrule" href="#" rel="horizontalrule" 
     tabindex="-1"></a> 
    </li> 

    <li> 
     <a class="re-icon re-mathematik redactor-btn-image" href="#" rel= 
     "mathematik" tabindex="-1"></a> 
    </li> 
</ul> 

<div class="redactor-editor redactor-placeholder" contenteditable="true" 
dir="ltr" style="min-height: 300px;"> 
    <p>​</p> 
</div> 
<textarea class="redactor-box" cols="40" data-redactor-options= 
"{&quot;lang&quot;: &quot;en&quot;, &quot;fileUpload&quot;: &quot;/redactor/upload/file/&quot;, &quot;imageUpload&quot;: &quot;/redactor/upload/image/&quot;}" 
dir="ltr" id="id_body" name="body" placeholder="Vsebina vprašanja.." rows= 
"10" style="display: none;"> 

Ошибка, которую я получаю:

Uncaught TypeError: Cannot read property 'insert' of undefined(anonymous function) @ redactor.js:47n.extend.each @ jquery-2.1.4.min.js:2n.fn.n.each @ jquery-2.1.4.min.js:2$.fn.redactor @ redactor.js:39insertHtml @ (index):366onclick @ (index):205 

Что я делаю неправильно?

Answer 1

Я предполагаю, что это потому, что в примере используется поиск в jquery id, который возвращает один элемент, а ваша реализация использует поиск в классе jquery, который возвращает массив элементов.

Либо используйте: $('.redactor-box')[0] или измените класс класса на вопрос, и используйте $('#redactor-box').

Answer 2

Вы должны инициализировать Redactor до вызова методов API

Это должно сделать работу:

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $('.redactor-box').redactor(); 
    }); 

    function insertHtml() { 
    var html = '<h3>INSERTED</h3>'; 
    $('.redactor-box').redactor('insert.html', html); 
    } 
</script> 

Answer 3

Есть 2 элемента в разметке, имеющие один и тот же класс redactor-box:

<div class="redactor-box"> 

и

<textarea class="redactor-box" 

Попробуйте изменить класс TEXTAREA к redactor и затем вызвать метод Redactor API в этом классе:

$('.redactor').redactor('insert.html', html); 

Однако если у вас есть несколько редакторов на 1 странице, то все они будут вставлять этот HTML, так что лучше либо использовать id или более определенного класса.

Также обратите внимание, что вы можете вызывать методы API Redactor только после инициализации Redactor, так что вы должны сначала позвонить:

$('.redactor').redactor(); 

(вероятно, вы сделали это уже, упоминая это явно на всякий случай)