Question

我正在我的网站上开发一个功能，用户应该能够使用ckeditor 5和textarea编辑他或她自己的主题。 textarea被放置在一个模态中。但是，当我尝试在用户按下按钮时预填充textarea时，textarea内部没有任何内容。我尝试过以下方法：

var editor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    editor = editor;
  })
$(".toggle-edit-modal").click(function(e) {
  e.preventDefault();
  editor.setData("<p>Testing</p>"));
$("#edit-reply-modal").html("<p>Testing</p>");
});

感谢任何帮助。

Answer 1

我看到您比需要的{'1}}多了一个'）'

如果仍然无法设置数据，则尝试像这样设置数据：

editor.data.set("<p>Testing</p>"));

Answer 2

HTML 代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>

<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>

JAVASCRIPT 代码：

let YourEditor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    window.editor = editor;
    YourEditor = editor;
  })

$('#toggle-edit-modal').on('click', function() {
  YourEditor.setData('<p>This is the new Data!</p>');
})



let YourEditor;
ClassicEditor
  .create(document.querySelector('#edit-reply-modal'))
  .then(editor => {
    window.editor = editor;
    YourEditor = editor;
  })

$('#toggle-edit-modal').on('click', function() {
  YourEditor.setData('<p>This is the new Data!</p>');
})
button{
  margin-top:20px;
  padding: 5px;
  color: white;
  background: #00F;
  border-radius: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/24.0.0/classic/ckeditor.js"></script>

<textarea id="edit-reply-modal"><p>Old Data</p></textarea>
<button id="toggle-edit-modal">Fill New Data</button>

Answer 3

HTML：

   <!-- The editable element in the editor's DOM structure. -->
    <div class="... ck-editor__editable ..." contenteditable="true">
        <!-- Editable content. -->
    </div>

香草Javascript：

// A reference to the editor editable element in the DOM.
const domEditableElement = document.querySelector( '.ck-editor__editable' );

// Get the editor instance from the editable element.
const editorInstance = domEditableElement.ckeditorInstance;

// Use the editor instance API.
editorInstance.setData( '<p>Hello world!<p>' );

文档：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html

Answer 4

根据documentation不像ckeditor4没有CKEDITOR.instances，所以如果你想更新你的编辑器内容，你可以创建一个你编辑器的全局实例，然后使用setData()以便通过 ajax 更新内容。

示例代码：

    let myEditor;

    ClassicEditor
        .create(document.querySelector('#menuContent'), {
            language: {
                // The UI will be English.
                ui: 'fa',

                // But the content will be edited in Arabic.
                content: 'fa'
            },
            placeholder: 'متن منو را وارد نمایید...'
        })
        .then(editor => {
            window.editor = editor;
            myEditor = editor;
        })
        .catch(err => {
            console.error(err.stack);
        });

    function ShowMenuDetails(id) {
        $.ajax({
            url: '@Url.Action("MenuDetails", "Admin")',
            type: 'POST',
            data: JSON.stringify({ id: id }),
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            cache: false,
            success: function (data) {
                $("#menuTitle").val(data.MenuTitle);
                $("#order").val(data.MenuOrder);

                myEditor.setData(data.MenuContent);

                $("#myModal").modal();
            },
            error: function (err) {
                alert(err);
            },
            statusCode: {
                404: function (content) { alert(content); },
                500: function (content) { alert(content); }
            }
        });
    }

设置CKEditor 5的值

4 个答案: