Ckeditor5 related things in Chinese is too little, today realized the custom Add content function here to record, hoping to help the needs of friends
<div name="content" id="editor"> <p>欢迎访问</p></div><button id="insert-text" class="btn btn-light">添加图片</button>
$(function () { ClassicEditor.create(document.querySelector('#editor'), { //language: 'zh-cn', toolbar: ['heading', '|', 'bold', 'italic', 'link', 'blockQuote', 'bulletedList', 'numberedList' ] }).then(editor => { console.log(editor) window.editor = editor; }) .catch(error => { console.log(error); }); console.log(editor) $('#insert-text').on('click', function () { var obj = document.createElement('img') // 添加的内容可以自定义, 这里以添加图片为例 obj.setAttribute('src', 'image.jpg' ) const viewFragment = editor.data.processor.toView(obj.outerHTML); const modelFragment = editor.data.toModel(viewFragment); editor.model.insertContent(modelFragment, editor.model.document.selection); })})
JavaScript inserts an attachment into the Ckeditor5