用CKEditor動態添加textareas

我正在嘗試創建一個動態窗體，您可以在其中添加新的「章節」，點擊最多10個按鈕。這將是'簡單'，但我也希望文本字段正在實施CKEditor，並且我無法使其工作。我得到它順利地添加章節，我只能編輯它們的最後一個實例。另外，如果我編輯最後一個，點擊'添加新章節'，最後一個被刪除。我基於我的嘗試this thread。用CKEditor動態添加textareas

Javascript代碼我走到這一步：

num_chapter = 1; 
var editor = new Array(); 

function createEditor() 
    { 
    if (num_chapter <= 10) 
    { 
    var num=num_chapter+1; 
    document.getElementById('editor').innerHTML += "<br><br><h3 style='display:inline'>Chapter " + num + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num + "' placeholder='Title for chapter " + num + "'><br><br>";  

    // Create a new editor inside the <div id="editor">, setting its value to html 
    var config = {}; 
    editor[num_chapter] = CKEDITOR.appendTo('editor' , config, ''); 
    } 
    else 
    { 
    document.getElementById('chapters').innerHTML += "<br />Maximum is 10 chapters."; 
    } 
    num_chapter += 1; 
    }

HTML代碼：

<h3 style='display:inline'>Chapter 1: </h3> <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br> 
<textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea> 
    <div id="editor"> 
    </div><br> 
    <input type="button" onclick="createEditor(); editing('Chapter 1');" value=" Add chapter ">

正如你所看到的，我試圖把編輯的對象到一個數組，但它沒有工作出。我不知道太多的Javascript（不說幾乎沒有），所以任何幫助將不勝感激！

來源

2012-10-08 Francisco Presencia

我終於解決了它，總共花了3或4個小時。這比我想象的容易，但不那麼優雅。這可以通過php和javascript來實現，使其略微更加優雅，但如果您的文本字段很少，只需簡單的舊html和Javascript就可以實現。

首先，HTML/PHP：

<h3 style='display:inline'>Chapter 1: </h3> 
    <input style='display:inline' type="text" name="titlechapter_1" placeholder="Title chapter 1"><br><br> 
    <textarea class="ckeditor" onChange="editing('Chapter 1');" name="chapter_1"></textarea> 
    <?php for ($i=2; $i<=10; $i++) 
    echo "<div id='div_editor_".$i."' style='display:none;'><textarea id='editor_".$i."' name='editor".$i."'></textarea></div>"; ?> 
    <br><br> 
    <input type="button" onclick="createEditor();" value=" Add chapter "> 
<br><br>

實現它創建所有的DIV，但因爲沒有什麼在他們，他們不會出現。然後，使用Javascript：

num_chapter = 2; 
var editor = new Array(); 

function createEditor() 
    { 
    if (num_chapter <= 10) 
    { 
    toggle_visibility('div_editor_' + num_chapter); 

    document.getElementById('div_editor_' + num_chapter).insertAdjacentHTML("afterbegin", "<br><br><h3 style='display:inline'>Chapter " + num_chapter + ": </h3><input style='display:inline' type='text' name='titlechapter_" + num_chapter + "' placeholder='Title for chapter " + num_chapter + "'><br><br>"); 

    // Create a new editor inside the <div id="editor">, setting its value to html 
    CKEDITOR.replace('editor_' + num_chapter); 

    num_chapter += 1; 
    } 
    else 
    { 
    alert("Sorry, maximum is 10 chapters."); 
    } 
    }

這段代碼將生成10個正確使用CKeditor的章節。如果嘗試創建第11個，則會顯示彈出窗口中的警告。這條線for ($i=1; $i<10; $i++)，這個num_chapter < 10和這個num_chapter == 10具有所有相同的值（在我的情況下爲10）是很重要的。

來源

2012-10-08 12:52:09

經過一些試驗和錯誤，我終於找到了解決這個問題的辦法。

這是爲了回答可能像我一樣在這裏登陸的搜索，尋找'如何動態創建ckeditor實例'。

訣竅是包括包含在你的HTML腳本CKEDITOR除了ckeditor.js庫

ckeditor/adapters/jquery.js

適配器庫，並在你的JavaScript初始化這些元素

var elem = $(this).find('.your_selector') 
elem.ckeditor()

（製作當然.your_selector是一個textarea的類，它將被轉換成一個ckeditor實例）

希望這可以幫助那些仍然可以找到它的人廣告。

來源

2016-10-03 01:46:02 rob

用CKEditor動態添加textareas

回答

相關問題