CKEditor 5 的设定值

Posted 2023-02-16

【中文标题】CKEditor 5 的设定值

【英文标题】：Setting value of CKEditor 5

【发布时间】：2018-11-25 10:00:56

【问题描述】：

我正在我的网站上开发一个功能，用户应该能够使用 ckeditor 5 和 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>");
);

感谢任何帮助。

【问题讨论】：

你能创建一个活生生的例子吗？因为调用editor.setData()是设置编辑器数据的正确方法。

注：编辑器的数据！=== textarea。编辑器位于它替换的文本区域旁边。它在开始时从中获取内容并将其设置回表单保存或销毁时。

【参考方案1】：

我看到你有一个 ')' 比需要的多editor.data.set("<p>Testing</p>"));

如果还是不能设置数据，不如试试这样设置数据：

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

【参考方案2】：

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

【参考方案3】：

根据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); 
            
        );
    

【参考方案4】：

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>