本文主要是介绍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
如有疑问，欢迎 交流(*^__^*) ……
这篇关于ckeditor5上传配置 ckeditor5图片上传功能 富文本编辑器图片上传功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
