CKEditor를 사용하여 동적으로 텍스트 영역 추가

Question

새로운 '챕터'를 추가 할 수있는 동적 양식을 만들려고합니다. 최대 10 개의 버튼을 클릭 할 수 있습니다. 이것은 '쉬울 것'이지만, 텍스트 필드가 CKEditor를 구현하기를 원합니다. 나는 그것을 작동시킬 수 없습니다. 챕터를 부드럽게 추가하고 마지막 인스턴스 만 편집 할 수 있습니다. 게다가 마지막으로 편집 한 후 '새 장 추가'를 클릭하면 마지막 장이 삭제됩니다. 내 시도는 this thread에 근거합니다. 당신이 볼 수 있듯이

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

, 나는 배열에 편집자 객체를 넣어 시도했지만 작동하지 않았다 :

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 코드를 :

자바 스크립트 코드 지금까지있어 아웃. 나는 Javascript를 많이 모른다 (거의 아무것도 말하지 않기 때문에), 어떤 도움을 주시면 감사하겠습니다!

Answer 1

총 3 시간 또는 4 시간 후에 마침내 해결되었습니다. 생각보다 쉬웠지만 너무 우아하지 않았습니다. 이것은 php와 javascript를 통해 좀 더 우아하게 만들 수 있지만 텍스트 필드가 거의 없다면 평범한 오래된 html과 자바 스크립트가 속임수를 쓰게됩니다.

첫째, 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> 

는 모든 사업부를 만드는 실현하지만, 그들에 아무것도 없기 때문에, 그들은 표시되지 않습니다. 그런 다음 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."); 
    } 
    } 

이 코드는 CKeditor에서 제대로 작동하는 10 개의 장을 생성합니다. 11 번째를 만들려고하면 팝업의 경고가 표시됩니다. 이 라인 for ($i=1; $i<10; $i++),이 num_chapter < 10 및이 num_chapter == 10이 모두 동일한 값 (내 경우 10 개)을 갖는 것이 중요합니다.

Answer 2

몇 번의 시행 착오 끝에 마침내이 문제에 대한 해결책을 찾았습니다.

이것은 '내가 동적으로 ckeditor 인스턴스를 만드는 법'을 찾고 여기에 올 수있는 검색에 대한 답변입니다.

트릭은 어댑터 라이브러리가 ckeditor.js 라이브러리

ckeditor/adapters/jquery.js 

뿐만 아니라 당신의 HTML 스크립트에서 CKEDITOR에 포함 포함 그리고 당신의 자바 스크립트

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

(만들기 이러한 요소를 초기화하는 것입니다 .your_selector는 ckeditor 인스턴스로 변환 될 텍스트 영역의 클래스입니다.

희망 사항은 여전히이 thre를 찾을 수있는 사람들에게 도움이되기를 바랍니다. 광고.