主編 - 遺漏的類型錯誤：無法讀取的不確定

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

and

<textarea class="redactor-box" 

嘗試改變文本區域的類redactor，然後在這個類調用主編API方法：

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

不過，如果你有幾個編輯1頁，然後所有的人都將插入這個網站，所以最好要麼使用ID或更具體的類。

另請注意，你只能在初始化主編後調用主編API方法，所以你應該首先調用：

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

（可能是你沒有它已經，以防萬一明確提到它）