javascript向ckeditor5中插入附件

Posted 2021-01-04 ifengqi

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);
    })
})