如何将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：未定义窗口 在对象。 （F：\ project \ node_modules @ ckeditor \ ckeditor5-build-classic \ build \ ckeditor.js：5：3314） 在Module._compile（内部/模块/cjs/loader.js:1147:30） 在Object.Module._extensions..js（内部/模块/cjs/loader.js:1167:10） 在Module.load（internal / modules / cjs / loader.js：996：32） 在Function.Module。 load（内部/模块/cjs/loader.js:896:14） 在Module.require（internal / modules / cjs / loader.js：1036：19） 在要求时（内部/模块/cjs/helpers.js:72:18） 在对象。 （F：\ project_ sapper \ dev \ server \ server.js：8：1） 在Module._compile（内部/模块/cjs/loader.js:1147:30） 在Object.Module._extensions..js（internal / modules / cjs / loader.js：1167：10）

服务器崩溃

如何在sapper / svelte3项目中正确集成CK Editor 5？

解决方法

由于服务器上没有窗口，因此您需要使用dynamic import。

<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>