Redactor - 未捕获的类型错误：无法读取未定义的属性“插入”

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>

编者编辑：

<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]，要么将相关元素的类更改为 id，然后使用 $('#redactor-box')。

Answer 2

您必须在调用 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);

但是，如果您在一页上有多个编辑器，那么所有编辑器都会插入此 html，因此最好使用 id 或更具体的类。

还要注意，你只能在初始化 Redactor 之后调用 Redactor API 方法，所以你应该先调用：

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

（可能你已经这样做了，明确提及以防万一）