ckeditor5上传配置 ckeditor5图片上传功能 富文本编辑器图片上传功能

ckeditor5的上传图片的方式（文档编辑器）

		将图像插入使用CKEditor 5创建的内容是一项非常常见的任务。在正确配置的富文本编辑器中，
	最终用户可以通过多种方式插入图像：
		 - 从剪贴板粘贴它。 		
		 - 从文件系统中拖动文件。 		
		 - 通过文件系统对话框选择它。 		
		 - 从应用程序中的媒体管理工具中选择它。

		排除最后一个选项，所有其他方式都要求将图像上载到服务器。然后，服务器将负责提供CKEditor 5
	用于在文档中显示图像的图像URL。

具体效果展示

具体代码

//upload.js中
class MyUploadAdapter {
    constructor( loader ) {
        // 要在上载期间使用的文件加载器实例
        this.loader = loader;
    }

    // 启动上载过程
    upload() {
        return this.loader.file
                .then( file => new Promise( ( resolve, reject ) => {
                    this._initRequest();
                    this._initListeners( resolve, reject, file );
                    this._sendRequest( file );
                } ) );
    }

    // 中止上载过程
    abort() {
        if ( this.xhr ) {
            this.xhr.abort();
        }
    }

    // 使用传递给构造函数的URL初始化XMLHttpRequest对象.
    _initRequest() {
        const xhr = this.xhr = new XMLHttpRequest();
        xhr.open( 'POST', 'http://123.57.206.125:9071/manage/b/plugin/upload', true );
        xhr.responseType = 'json';
    }

    // 初始化 XMLHttpRequest 监听.
    _initListeners( resolve, reject, file ) {
        const xhr = this.xhr;
        const loader = this.loader;
        const genericErrorText = `无法上传文件: ${ file.name }.`;

        xhr.addEventListener( 'error', () => reject( genericErrorText ) );
        xhr.addEventListener( 'abort', () => reject() );
        xhr.addEventListener( 'load', () => {
            const response = xhr.response;
            // 当code＝＝200说明上传成功，可以增加弹框提示；
            // 当上传失败时，必须调用reject()函数。
            if ( !response || response.error ) {
                return reject( response && response.error ? response.error.message : genericErrorText );
            }
            //上传成功，从后台获取图片的url地址
            resolve( {
                default: response.url
            } );
        } );

        // 支持时上传进度。文件加载器有#uploadTotal和#upload属性，用于在编辑器用户界面中显示上载进度栏。
        if ( xhr.upload ) {
            xhr.upload.addEventListener( 'progress', evt => {
                if ( evt.lengthComputable ) {
                    loader.uploadTotal = evt.total;
                    loader.uploaded = evt.loaded;
                }
            } );
        }
    }

    // 准备数据并发送请求
    _sendRequest( file ) {
        //通过FormData构造函数创建一个空对象
        const data = new FormData();
        //通过append()方法在末尾追加key为files值为file的数据
        data.append( 'files', file );//上传的参数data
        // data.append( 'memberId', "666" );
        /**
         * 重要提示:这是实现诸如身份验证和CSRF保护等安全机制的正确位置。
         * 例如，可以使用XMLHttpRequest.setRequestHeader()设置包含应用程序先前生成的CSRF令牌的请求头。
         */
        this.xhr.send( data );
    }
}

function MyCustomUploadAdapterPlugin( editor ) {
    editor.plugins.get( 'FileRepository' ).createUploadAdapter = ( loader ) => {
        // 在这里将URL配置为后端上载脚本
        return new MyUploadAdapter( loader );
    };
}

export {
    MyUploadAdapter,
    MyCustomUploadAdapterPlugin
}

编辑器页面

		const upload = require('../assets/upload')；
		//此处不全，只有编辑器上传配置，如需完整编辑器配置代码，请点击下方链接
    	editorConfig: {
            // 编辑器的配置
            language: 'zh-cn',  // 中文
            extraPlugins: [ upload.MyCustomUploadAdapterPlugin ],
          }

如需编辑器配置及上传完整代码，点击下方链接

https://github.com/taurus888/ckeditor5-vue.git

如有疑问，欢迎 交流(*^__^*) ……

标签：upload,loader,xhr,file,ckeditor5,上传,response,图片
来源： https://blog.csdn.net/Taurus_0811/article/details/94731189