富文本编辑器是几乎所有后台系统都会用到的，之所以不直接集成在模板项目中，是因为富文本编辑器的种类很多，有的都已经有十几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  ```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  ```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`