将 CKEditor 分配给动态创建的文本框元素

Posted 2023-05-08

【中文标题】将 CKEditor 分配给动态创建的文本框元素

【英文标题】：Assign CKEditor To Dynamically Created Text Box Element

【发布时间】：2021-05-01 15:12:49

【问题描述】：

我有一个表结构，其中 CKEditor 附加到表 td。像这样的：

HTML：

<table class="table table-striped table-condensed" id="questionDetails">
    <thead>
        <tr>
            <th>Question Name</th>
            <th>Options</th>
            <th>Answers</th>
        </tr>
    </thead>
    <tbody id="tbody">
        <tr>
            <td class="col-xs-3">
                <input type="text" class="txtQuestionName form-control" name="txtQuestionName" value="" />
                &nbsp;
            </td>
            <td class="col-xs-3">
                <input type="text" class="txtOptions form-control" name="txtOptions" value="" />
                <span class="addOptions">(+)</span> &nbsp;
            </td>
            <td class="col-xs-3">
                <input type="text" class="txtAnswers form-control" value="" />
                <span class="addAnswers">(+)</span> &nbsp;
            </td>
            <td class="col-xs-12">
                <input type="text" class="txtExplanation form-control editor1" name="editor1" />
                &nbsp;
            </td>
            <td>
                <a href="javascript:void(0);" id="btnAdd" class="btn btn-primary">Add</a>
            </td>
        </tr>
    </tbody>
</table>

jQuery：

<script src="~/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
        //Initialize CKEditor by giving id of text area
        CKEDITOR.replace('editor1');

        //Get each instance of CKEditor
        for (instance in CKEDITOR.instances) 
            //update element
            CKEDITOR.instances[instance].updateElement();
        

  //Add row to the table
   $("#btnAdd").click(function () 
        $("#questionDetails").append('<tr><td><input type="text" class="txtQuestionName form-control" class="form-control" /></td> <td><input type="text" class="txtOptions form-control" /><span class="addOptions">(+)</span></td> <td><input type="text" class="txtAnswers form-control" /> <span class="addAnswers">(+)</span></td><td><input type="text" class="txtExplanation form-control editor1" name="editor1" /></td> <td><a href="javascript:void(0);" class="btn btn-danger remCF">Remove</a></td> &nbsp;</tr>');
   );
</script>

上述代码在默认加载页面时有效。但是当我尝试使用jQuery 动态地向表中添加更多行时，不会创建或分配 CKEditor 给该输入元素。除编辑器外，其他输入元素均已创建。有什么方法可以将 CKEditor 分配给表中动态创建的行并从中获取所有值？

【问题讨论】：

将CKEDITOR.replace('editor1');放入一个函数中并在$("#btnAdd").click(function () 中调用

好吧！我尝试在控制台中得到了这个 - VM151:21 [CKEDITOR] 错误代码：编辑器元素冲突。在添加事件中使用了这个 - function AddEditors() CKEDITOR.replace('editor1');

【参考方案1】：

这是一个工作示例。您必须确保为所有编辑者提供唯一 ID

<div>
    <textarea id="editor1"></textarea>
</div>

<div>
    <button type="button" id="btnAdd">Add CKEditor</button>
</div>

<div id="questionDetails">

</div>

<script type="text/javascript" src="~/ckeditor/ckeditor.js"></script>

<script type="text/javascript">

    //the inital editor
    CKEDITOR.replace('editor1');

    //use an number to make the id's of the new editors unique
    var index = 2;

    //Add row to the table
    $("#btnAdd").click(function () 

        //create the new id
        var newEditor = 'editor' + index;

        //append some html
        $("#questionDetails").append('<textarea id="' + newEditor + '"></textarea>');

        //init the new editor
        CKEDITOR.replace(newEditor);

        //increment
        index++;
    );
</script>

如果你想读取内容，只需循环实例并使用getData()获取数据

$("#btnRead").click(function () 
    for (var i in CKEDITOR.instances) 
        alert(CKEDITOR.instances[i].getData());
    
);

【讨论】：

这很好用@VDWWD。谢谢你，但我喜欢使用 jQuery map 声明一个类 - var explanations = $row.find('.txtExplanation').map(function () return this.value; ).get().join("_"); 从这些编辑器中获取所有值。此示例无效。

我想你在找CKEDITOR.instances