具有多个文本区域的CKeditor

Question

我有一个打开对话框的按钮。在对话框内，我有一个表单，其中有一个按钮，单击此按钮后，我将另一个表单附加到该表单中。所以我必须将 ckeditor 添加到我附加的所有文本区域中。但这对我不起作用。文本区域不可编辑。

这是我的表单，我在单击按钮后附加

<form id="q_options">

    <div class="rightcontact">
        <button type="submit">Remove</button>
    </div>

    <div class="leftcontact">
        <div class="form-group">
            <p>Score<span>*</span></p>
            <span class="icon-case"><i class="fa fa-male"></i></span>
            <input type="number" name="q_score" id="q_score"/>
        </div> 

     </div>

    <div class="form-group">
        <p>Option-text<span>*</span></p>
        <span class="icon-case"><i class="fa fa-male"></i></span>
        <textarea name="option_text" id="option_text" rows="10" cols="100"></textarea>
    </div>

</form>

这是添加表单的Javascript函数。

$('.add_options').click(function(event){
event.preventDefault();
CKEDITOR.replace('option_text');
var $temp = ($('#q_options').show()).clone().removeClass('q_options');  
$('#q_option_div').append($temp);
currentchild++;

});

主要形式是这个。上面有一个按钮，可以将表单添加到此表单中。

<form id="question">
<h1>Question</h1>

<div class="leftcontact">
    <p>Difficulty<span>*</span></p>
    <div class="check-boxes">
      {% for obj in q_diff_objects %}    
            <input type="radio" name="ques_difficulty" value={{obj.id}}>{{obj.name}}</input><br>
      {% endfor %}
    </div> 
</div>

<div class="form-group">
    <p>Question-text<span>*</span></p>
    <span class="icon-case"><i class="fa fa-male"></i></span>
    <textarea name="question_text" id="question_text" rows="10" cols="100"></textarea>        
    <div class="validation"></div>
</div>

<div class="form-group">
    <p>Media-url<span>*</span></p>
    <span class="icon-case"><i class="fa fa-male"></i></span>
    <textarea name="option_text" id="option_text" rows="10" cols="10"></textarea>
    <div class="validation"></div>
</div>

<button type="submit" class="add_options">Add Option</button>
<div id="q_option_div">
    <p>option</p>
</div>    
<button type="submit" class="bouton-contact">Send</button>

所以它会给出这样的错误：CKeditor 的实例已经存在

Answer 1

试试这个

<textarea id="first_textarea" name="first_textarea" class="form-control editor">
<textarea id="another_textarea" name="another_textarea" class="form-control editor">

<script>
    $(".editor").each(function () {
        let id = $(this).attr('id');
        CKEDITOR.replace(id, options);
    });
</script>

Answer 2

添加第二个表单时，您似乎添加了具有重复 ID 的元素。确保每个 ID 都是唯一的，并为每个需要成为编辑器的文本区域调用

CKEDITOR.replace

函数。

<textarea name="option_text_1" id="option_text_1" rows="10" cols="100"></textarea>
<textarea name="option_text_2" id="option_text_2" rows="10" cols="100"></textarea>

CKEDITOR.replace('option_text_1');
CKEDITOR.replace('option_text_2');

Answer 3

简单制作方法

<textarea  name="Text1" id="editor1"></textarea>
<textarea  name="Text2" id="editor2"></textarea>
<textarea  name="Text3" id="editor3"></textarea>
<textarea  name="Text4" id="editor4"></textarea>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="//cdn.ckeditor.com/4.9.2/full/ckeditor.js"></script>

<script> 
CKEDITOR.replace( 'editor1' );
CKEDITOR.replace( 'editor2' );
CKEDITOR.replace( 'editor3' );
CKEDITOR.replace( 'editor4' );
</script>

Answer 4

对于带有选项的多个项目，您可以使用：

<script>
    $(document).ready(function () {
        $(".editor").each(function () {
            let id = $(this).attr('id');

            CKEDITOR.replace(id, {
                toolbar: [{
                    name: 'clipboard',
                    items: ['Undo', 'Redo']
                },
                {
                    name: 'styles',
                    items: ['Styles', 'Format']
                },
                {
                    name: 'basicstyles',
                    items: ['Bold', 'Italic', 'Strike', '-', 'RemoveFormat']
                },
                {
                    name: 'paragraph',
                    items: ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote']
                },
                {
                    name: 'links',
                    items: ['Link', 'Unlink']
                },
                {
                    name: 'tools',
                    items: ['Maximize']
                },
                {
                    name: 'editing',
                    items: ['Scayt']
                }
                ],
          });
      });
   });
</script>