7

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

任何帮助表示赞赏。

4

4 回答 4

4

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

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

 editor.data.set("<p>Testing</p>");
于 2018-08-23T18:03:58.577 回答
1

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>
于 2021-01-26T04:24:09.263 回答
0

根据与 ckeditor4 不同的文档，没有任何.CKEDITOR.instancessetData()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); }
            }
        });
    }
于 2021-01-17T17:21:23.503 回答
0

网页：

   <!-- 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

于 2020-11-11T10:03:43.070 回答