光年模板（V5）说明文档
主题
字号
18px

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

<textarea id="testtextarea" name="testcontent"></textarea>
$(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

<div id="editor"></div>
// 重点代码 适配器
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/

涉及的文件：