javascript向ckeditor5中插入附件

標籤：RoCE   sso   tee   creat   lan   ali   ext   .data   fragment   

ckeditor5相關的東西中文的太少了，今天實現了自訂新增內容功能在此記錄一下，希望能幫到需要的朋友

<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向ckeditor5中插入附件