ckeditor5 使用方法 + 上传图片

最新推荐文章于 2024-08-30 16:52:48 发布

雾里桃花

最新推荐文章于 2024-08-30 16:52:48 发布

阅读量5.7k

点赞数 8

分类专栏：前端工具文章标签： javascript

本文链接：https://blog.csdn.net/csdn_chengpeng/article/details/105223061

版权

前端工具专栏收录该内容

6 篇文章 0 订阅

订阅专栏

最近ckedito 发布了一个版本 ckedito 5，这个版本有一个强大的功能，它可以复制world文档直接粘贴在编辑器里，并且可以保存world里的样式和图片（重点）。这里有一个重点，就是上传图片，ckedito 5上传图片有三种方式，其中最常用的方式有两种：1.使用ckedito官方服务器（不推荐，此方法要收费）、2.自定义上传服务器。
本文章主要写的就是第二种方法。

使用方法

1.下载ckedito 5

此处推荐官方的在线生成器
话不多说上链接：https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html
1.进入官网点击 builds =》Installation =》 Online builder 进入在线生成器
在这里插入图片描述
2.进入之后选择 Classic 然后一路下一步

2.ckedito 初始化

下载完成之后在自己的项目里引入ckedito. js文件
在这里插入图片描述
html代码：
创建一个容器 class名字自定义（我的是 class=‘comment’）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body >
		<div class='comment'>
			 
		</div>
		<button onClick='clickMe()'>dianji</button>
	</body>
	<script src='./jquery.min.js'></script>
	<script src="./build/ckeditor.js"></script>
	<script src='./demo.js'></script>
</html>

js代码

//重点代码 适配器
class UploadAdapter {
        constructor(loader) {
            this.loader = loader;
        }
         upload() {
            return new Promise((resolve, reject) => {
            const data = new FormData();
						let file = [];
						//this.loader.file 这是一个Promise格式的本地文件流，一定要通过.then 进行获取，之前在各大博客查了很多文章都拿不到这个值，最后经过两个多小时的探索终于找到了是Promise问题。
						this.loader.file.then(res=>{
							file = res; //文件流 
							data.append('file', file); //传递给后端的参数，参数名按照后端需求进行填写
							// data.append('type','1');
							data.append('bucketName','xydms');/传递给后端的参数，参数名按照后端需求进行填写
							data.append('ckCsrfToken','oCS0feM9aUb0v4zQqrEgcExpQeWTZXG4pch37uds');/传递给后端的参数，参数名按照后端需求进行填写
							data.append('objectName','1101053001');/传递给后端的参数，参数名按照后端需求进行填写
							$.ajax({
							    url: 'http://xxx/xxx.php', //后端的上传接口 
							    type: 'POST',
							    data: data,
							    dataType: 'json',
							    processData: false,
							    contentType: false,
							    success: function (data) {
							        if (data) {
												console.log(data)
							            resolve({
							                default: data.default //后端返回的参数 【注】返回参数格式是{uploaded:1,default:'http://xxx.com'}
							            });
							        } else {
							            reject(data.msg);
							        }
							
							    }
							});
						})
						

        });
        }
        abort() {
        }
    }

//实例化编辑器
ClassicEditor
			.create( document.querySelector( '.comment' ), {
				// ckfinder: {
				// 	uploadUrl: 'upload'
				// },
				toolbar: {
					items: [
						'heading',
						'|',
						'bold',
						'italic',
						'link',
						'bulletedList',
						'numberedList',
						'|',
						'indent',
						'outdent',
						'|',
						'imageUpload',
						'blockQuote',
						'insertTable',
						'mediaEmbed',
						'undo',
						'redo'
					]
				},
				language: 'zh',
				image: {
					toolbar: [
						'imageTextAlternative',
						'imageStyle:full',
						'imageStyle:side'
					]
				},
				table: {
					contentToolbar: [
						'tableColumn',
						'tableRow',
						'mergeTableCells'
					]
				},
				licenseKey: '',
				
			} )
			.then( editor => {
				// 加载了适配器
				    editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
				        return new UploadAdapter(loader);
				    };
				window.editor = editor;
		
				
				
				
			} )
			.catch( error => {
				console.error( 'Oops, something gone wrong!' );
				console.error( 'Please, report the following error in the https://github.com/ckeditor/ckeditor5 with the build id and the error stack trace:' );
				console.warn( 'Build id: kngfcngsrrab-jujsj4qk5w31' );
				console.error( error );
			} );
			
			function clickMe(){
				console.log(window.editor.getData()) //获取编辑器的内容 getData()
			}