Как интегрировать CK Editor 5 с Sapper / Svelte3?

Я попытался интегрировать CK Editor 5 в свой проект sapper, как показано ниже:

<script>
    import { onMount } from 'svelte';
    import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
    
    onMount( () => {
        ClassicEditor.create( document.querySelector( '#editor' ) )
        .then( editor => {
            console.log( editor );
        } )
        .catch( error => {
            console.error( error );
        } );
    });
</script>

<textarea id='editor'></textarea>

И я получил следующую ошибку:

ReferenceError: окно не определено в Object. (F: \ project \ node_modules @ ckeditor \ ckeditor5-build-classic \ build \ ckeditor.js: 5: 3314) в Module._compile (internal / modules / cjs / loader.js: 1147: 30) в Object.Module. _extensions..js (internal / modules / cjs / loader.js: 1167: 10) в Module.load (internal / modules / cjs / loader.js: 996: 32) в Function.Module. load (internal / modules / cjs / loader.js: 896: 14) в Module.require (internal / modules / cjs / loader.js: 1036: 19) в require (internal / modules / cjs / helpers.js: 72: 18) в объекте . (F: \ project_ sapper \ dev \ server \ server.js: 8: 1) в Module._compile (internal / modules / cjs / loader.js: 1147: 30) в Object.Module._extensions..js (внутренние / модули / cjs / loader.js: 1167: 10)

Сервер разбился

Как правильно интегрировать CK Editor 5 в проект sapper / svelte3?


svelte sapper svelte-3 ckeditor ckeditor5
person Biraj Bora    schedule 15.09.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вам необходимо использовать динамический импорт, поскольку на сервере нет окна.

<script>
    import { onMount } from 'svelte'

    let ClassicEditor

    onMount(async ()=> {
        const module = await import('@ckeditor/ckeditor5-build-classic')
        ClassicEditor = module.default
        ClassicEditor.create( document.querySelector('#editor') )
        .then( editor => {
                console.log( editor );
        } )
        .catch( error => {
                console.error( error );
        } );
    })
</script>

<textarea id='editor'></textarea>
person JHeth    schedule 17.09.2020
comment
Теперь он выдает ошибку: ✗ client Cannot read property 'includes' of null - person Biraj Bora; 17.09.2020
comment
Работает в свежем саперном проекте с накаткой. Вы можете воспроизвести эту ошибку? - person JHeth; 17.09.2020