1. 程式人生 > >javascript向ckeditor5中插入附件

javascript向ckeditor5中插入附件

javascrip img html ESS bold err htm tom pro

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