Redactor - Uncaught TypeError: Cannot read property 'insert' of undefined

Question

I'm trying to use Redactor in my project. I want to add some text to the editor upon button click.

The API says you can do it like this:

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

Well, my code looks like this:

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

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

Redactor editor:

<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;">

Error I'm getting:

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

What am I doing wrong?

Answer 1

I'm going to assume it's because the example uses a jquery id lookup, which returns a single element, and your implementation is using a jquery class lookup which returns an array of elements.

Either use: $('.redactor-box')[0] or change the element's class in question to an id, and use $('#redactor-box').

Answer 2

there are 2 elements in your markup having the same class redactor-box:

<div class="redactor-box">

and

<textarea class="redactor-box"

Try changing textarea's class to redactor and then calling Redactor API method on this class:

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

However if you have several editors on 1 page then all of them will insert this html, so it's better to either use id or more specific class.

Also notice, that you can call Redactor API methods only after initializing Redactor, so you should first call:

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

(probably you did it already, mentioning it explicitly just in case)

Answer 3

You have to init the redactor prior to calling the API methods

This should do the job:

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

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