如何在CKEditor 5经典版中使用url图像插入对话框而不是上传

在CKEditor 5经典版中，使用url图像插入对话框而不是上传的方法如下：

首先，确保你已经按照CKEditor 5的文档安装并配置了经典版编辑器。
打开你的HTML文件，并将以下代码添加到你希望显示编辑器的位置：

<div id="editor"></div>

在JavaScript代码中，初始化CKEditor 5编辑器并配置插件。你需要引入@ckeditor/ckeditor5-build-classic和@ckeditor/ckeditor5-image这两个包。

import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import Image from '@ckeditor/ckeditor5-image/src/image';

ClassicEditor.create( document.querySelector( '#editor' ), {
    plugins: [ Image ],
    toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ],
    image: {
        toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side' ],
        styles: [
            'full',
            'side'
        ]
    }
} )
    .then( editor => {
        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

上述代码中，我们使用@ckeditor/ckeditor5-image插件来处理图像操作。这个插件提供了一个默认的上传图像对话框，但我们希望使用url图像插入对话框。为了实现这一点，我们需要在配置中定义自定义对话框。

ClassicEditor.create( document.querySelector( '#editor' ), {
    // ...
    image: {
        toolbar: [ 'imageTextAlternative', '|', 'imageStyle:full', 'imageStyle:side', '|', 'imageInsert', 'imageRemove' ],
        styles: [ 'full', 'side' ],
        customConfig: '',
    }
} )
    .then( editor => {
        editor.plugins.get( 'FileRepository' ).createUploadAdapter = function( loader ) {
            return new MyUploadAdapter( loader );
        };

        console.log( 'Editor was initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

然后，在同一个JavaScript文件中，定义MyUploadAdapter类来替代默认的上传适配器。这个类将处理从url插入图像。

class MyUploadAdapter {
    constructor( loader ) {
        this.loader = loader;
    }

    upload() {
        // 不执行任何上传操作，直接返回一个包含url的Promise对象
        return this.loader.file.then( file => {
            return new Promise( ( resolve, reject ) => {
                const reader = new FileReader();

                reader.onload = () => {
                    resolve( { default: reader.result } );
                };

                reader.onerror = error => {
                    reject( error );
                };

                reader.readAsDataURL( file );
            } );
        } );
    }

    abort() {
        // 不执行任何操作
    }
}