使用 javascript 在文本区域中设置 CKeditor 数据

Question

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

下面是我想要的结果：

下面是我试过的编码，我用过这个方法 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>

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

Answer 1

当你将编辑器实例分配给theEditor时，你可以直接使用它来设置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>

使用 javascript 在文本区域中设置 CKeditor 数据

Set CKeditor data in the textarea with javascript

javascript

html

textarea

ckeditor5