使用 javascript 在 textarea 中设置 CKeditor 数据答案

【问题标题】：Set CKeditor data in the textarea with javascript使用 javascript 在 textarea 中设置 CKeditor 数据
【发布时间】：2021-04-18 11:03:52
【问题描述】：

我在 ckeditor 文本区域中设置数据时遇到问题。例如我需要在点击save按钮时在textarea中设置数据Tilte123，然后数据会显示在textarea中。

下面是我想要的结果：

下面是我尝试过的编码，我用过 CKEDITOR.instances[agenda_mesyuarat].setData(testing);这个方法，但是不能用。

let theEditor;

    ClassicEditor
      .create(document.querySelector('#agenda_mesyuarat'))
      .then(editor => {
        theEditor = editor;

      })
      .catch(error => {
        console.error(error);
      });


    function getDataFromTheEditor() {
      return theEditor.getData();
    }
    
 function send_1() {
  var testing = "<p><strong>Tilte</strong></p><p><i>123</i></p>";
  CKEDITOR.instances[agenda_mesyuarat].setData(testing);
}

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>

<textarea class="form-control" name="agenda_mesyuarat" id="agenda_mesyuarat" value="" title="Agenda Mesyuarat"></textarea><br><br>

<button type="button" id="btn_save" value="Save" onclick="send_1()">Save</button>

希望有人能指导我如何解决它。谢谢。

【问题讨论】：

标签： javascript html textarea ckeditor5

【解决方案1】：

当你将编辑器实例分配给编辑器时，你可以直接使用它来设置ckeditor中的数据。

let theEditor;

    ClassicEditor
      .create(document.querySelector('#agenda_mesyuarat'))
      .then(editor => {
        theEditor = editor;

      })
      .catch(error => {
        console.error(error);
      });


    function getDataFromTheEditor() {
      return theEditor.getData();
    }
    
 function send_1() {
  var testing = "<p><strong>Tilte</strong></p><p><i>123</i></p>";
  theEditor.setData(testing);
}

<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>

<textarea class="form-control" name="agenda_mesyuarat" id="agenda_mesyuarat" value="" title="Agenda Mesyuarat"></textarea><br><br>

<button type="button" id="btn_save" value="Save" onclick="send_1()">Save</button>

【讨论】：