ckeditor富文本编辑器

富文本编辑器是几乎所有后台系统都会用到的，之所以不直接集成在模板项目中，是因为富文本编辑器的种类很多，有的都已经有十几M，而且每个人喜欢的都不一样，为了保证模板尽可能的小，将更多的富文本编辑器放到插件整合项目中，大家可以自己来选择使用哪一款。

这里ckeditor示例使用的版本是4.13.0，而ckeditor已有5的版本，这里也做了5的演示。

github地址：https://github.com/ckeditor

文档地址：

https://ckeditor.com/ckeditor-4/

https://ckeditor.com/ckeditor-5/

#### ckeditor 4
![](/uploads/images/20211231/859a379ff3c07a4539e866dfc0c4f9e9.png)

```html
<textarea id="testtextarea" name="testcontent"></textarea>
```

```javascript
$(document).ready(function(){
    CKEDITOR.replace('testcontent', {
        // 配置可放在config.js中
        // 成功返回格式{"uploaded":1,"fileName":"图片名称","url":"图片访问路径"}
        // 失败返回格式{"uploaded":0,"error":{"message":"失败原因"}}
        image_previewText: ' ',
        filebrowserImageUploadUrl: "upload.php?type=ckeditor"
    });
});
```

#### ckeditor 5
![](/uploads/images/20230107/a370a60226c0e62eef8903c82459b9d3.png)

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

```json
// 重点代码 适配器
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','ckeditor');
	    		$.ajax({
	    		    url: 'data/upload.php', //后端的上传接口 
	    		    type: 'POST',
	    		    data: data,
	    		    dataType: 'json',
	    		    processData: false,
	    		    contentType: false,
	    		    success: function (data) {
                        // 成功返回格式{"uploaded":1,"fileName":"图片名称","url":"图片访问路径"}
                        // 失败返回格式{"uploaded":0,"message":"失败原因"}
	    		        if (data) {
	    		            resolve({
	    		                default: '/data/' + data.url // 自己定义好自己的路径，这里演示用
	    		            });
	    		        } else {
	    		            reject(data.msg);
	    		        }
	    		
	    		    }
	    		});
	    	})
        });
    }
    abort() {
    }
}  
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        placeholder: '欢迎使用光年后台管理模板!',
        language: 'zh-cn'
	} )
	.then( editor => {
        // 加载了适配器
		editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
		    return new UploadAdapter(loader);
		};
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );// 重点代码 适配器
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','ckeditor');
	    		$.ajax({
	    		    url: 'data/upload.php', //后端的上传接口 
	    		    type: 'POST',
	    		    data: data,
	    		    dataType: 'json',
	    		    processData: false,
	    		    contentType: false,
	    		    success: function (data) {
                        // 成功返回格式{"uploaded":1,"fileName":"图片名称","url":"图片访问路径"}
                        // 失败返回格式{"uploaded":0,"message":"失败原因"}
	    		        if (data) {
	    		            resolve({
	    		                default: '/data/' + data.url // 自己定义好自己的路径，这里演示用
	    		            });
	    		        } else {
	    		            reject(data.msg);
	    		        }

}
	    		});
	    	})
        });
    }
    abort() {
    }
}  
ClassicEditor
	.create( document.querySelector( '#editor' ), {
		// toolbar: [ 'heading', '|', 'bold', 'italic', 'link' ]
        placeholder: '欢迎使用光年后台管理模板!',
        language: 'zh-cn'
	} )
	.then( editor => {
        // 加载了适配器
		editor.plugins.get('FileRepository').createUploadAdapter = (loader)=>{
		    return new UploadAdapter(loader);
		};
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );
```

插件项目中页面名字：`lyear_js_ckeditor_4.html` `lyear_js_ckeditor_5.html` `/data/upload.php` (上传演示用)

演示地址：http://lyear.itshubao.com/v5/example/

涉及的文件：
- `js/ckeditor4/ckeditor.js`

- `js/ckeditor5/ckeditor.js`
- `js/ckeditor5/translations/zh-cn.js`