CKedior两张方法上传图片及简单的plugins编写

CKedior比较稳健，文档很全，支持插件，配置什么的也很友好，先给个文档链接感受一下：ckeditor在线文档https://docs.ckeditor.com/#!/guide/dev_installation。

ckeditor富文本编辑器上传图片目前想到的两个方法：

1. 自己写一个上传插件（扩展性更强）
2. 找到钩子函数监听事件（上传更通用）

一. 自己写一个上传插件

前言

毕竟每个人的需求都是不一样的，这时候一个编辑器的“可扩展性”就必不可少了。有了这个插件功能，你可以针对富文本编辑器做各种各样的事情，比如复制外站图片，自动上传到你指定的域名，并插入富文本编辑器中等等。

怎么写一个ckeditor的plugins

1. 文件夹

在ckeidtor的目录下有个plugins文件夹，我们要做的就在这个文件夹里，在plugins下新建一个文件夹，名称为你所命名的插件名，新建一个js。images文件夹用来存放用到的小图标.

2. plugin.js

CKEDITOR.plugins.add( 'UploadImage', {
    icons: 'image',
    init: function( editor ) {
        // Plugin logic goes here...
    }
});

2.1 创建编辑器命令

我们希望插件具有一个对话框窗口，因此我们需要定义一个编辑器命令来打开一个新的对话框窗口。要做到这一点，我们需要使用的editor.addCommand 函数注册abbr命令。业务逻辑 主要写在这块

editor.addCommand( 'abbr', new CKEDITOR.dialogCommand( 'abbrDialog' ) );

editor.addCommand('openFileComm', {}

2.2 创建工具栏按钮

editor.ui.addButton( 'Abbr', {
    label: 'Insert Abbreviation',
    command: 'UploadImage',
    toolbar: 'insert'
});

2.3 CKEditor初始化

告诉CKEditor加载我们的插件了。为此，我们必须将其名称添加到
CKEDITOR.config.extraPlugins配置选项中：

config.extraPlugins = 'UploadImage';

Example

ps: 目前写的插件是用jquery针对自己项目使用的。没有写成一个通用型的插件

/** 
 * link 添加自定义图片上传组件  
 */

/*     html
    <div>
        <form id="editorImageForm" enctype="multipart/form-data" method="post"
            style="display: none">
            <div>
                <input type="file" id="editFileInput" name="file"
                    accept=".gif,.png,.jpg,.jpeg" /><br>
            </div>
        </form>
    </div>
*/

CKEDITOR.plugins.add('UploadImage',{// 调用add方法添加插件
    init : function (editor) { // 初始化页面时调用方法，接收一个富文本对象实例
        var pluginName = 'UploadImage'; // 插件名
        var _file = document.getElementById('editFileInput'); //获取页面中的file文件选择器对象
        var uploadUrl = document.querySelector('.site_url_upload').innerText || "https://user.smm.cn/upload_img"; // 上传的url，从页面中获取的
        /**
         * 添加执行命令
         */
        editor.addCommand('openFileComm', {//添加命令
            exec : function (editor) {//命令调用时执行此函数
                _file.click(); //触发文件选择器的点击事件
                _file.onchange = function(){//为文件选择器独享绑定onchange方法
                    upload();//执行函数
                    function upload(){
                        let files = _file.files[0];
                        var fd = new FormData();
                        fd.append("richTxt_img", files); 
                        fd.append("name", ""); 
                        fd.append("cat", ""); 
                        $.ajax({ //使用ajax请求上传图片
                            url : uploadUrl,
                            type : 'POST',
                            data : fd,
                            async : false,
                            cache : false,
                            processData:false,
                            contentType:false,
                            dataType:'json',
                            success : function(data) {
                                if(data.code === 0){
                                    var element = CKEDITOR.dom.element.createFromHtml( '<img style="width: auto;" src="' + data.fileurl +'" border="0" />' ); //上传成功后添加上传完成的图片元素到富文本内容中
                                    editor.insertElement( element );//插入元素
                                }else{
                                    alert("图片上传失败！")
                                }
                            },
                            error : function() {
                                alert("ajax图片上传失败！");
                            }
                        });
                    }
                };
            },
            async : true
        });

        editor.ui.addButton && editor.ui.addButton(pluginName, { //添加一个上传图片的按钮
            label: '图片上传',//按钮提示名
            command: 'openFileComm',//当按钮被点击时执行上面定义好的命令
            /**
             * 添加自定义按钮图片
             */
            icon: this.path + './upload.png'
        });
    },
});

二. 利用Ckeditor内置的钩子来上传图片

// editor.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ShareModule } from '../../../share/share.module';
import { CKEditorModule } from 'ng2-ckeditor';

import { CkEditorComponent } from './ckeditor/ckeditor.component';


@NgModule({
    declarations: [
        CkEditorComponent,
    ],
    imports: [
        ShareModule,
        CKEditorModule,
    ],
    exports: [
        CkEditorComponent
    ],
})
export class NewsEditorModule { }

// CkEditorComponent关键性代码
// this.actionURL上传链接
export class CkEditorComponent implements ControlValueAccessor, OnInit,OnChanges, AfterViewInit {
  ngOnInit() {
        this.ckeConfig =  {
            allowedContent: false,
            extraPlugins: 'divarea',
            forcePasteAsPlainText: false,
            height: 500,
            toolbar: 'Basic',
            toolbarGroups: [
                // { name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
                { name: 'editing', groups: ['find', 'selection'] }, // 'spellchecker'
                { name: 'links' },
                { name: 'insert' },
                { name: 'forms' },
                { name: 'tools' },
                { name: 'document', groups: ['mode', 'document', 'doctools'] },
                { name: 'others' },
                { name: 'basicstyles', groups: ['basicstyles', 'cleanup'] },
                { name: 'paragraph', groups: ['list', 'indent', 'align'] },
                { name: 'styles' },
                { name: 'colors' },
                // { name: 'about' }
            ],
            filebrowserImageUploadUrl: this.actionURL,
        };
    }
	ngAfterViewInit() {
        const self = this;
        setTimeout(function () {
            for (var instanceName in CKEDITOR.instances) {
                self.editor = CKEDITOR.instances[instanceName];
                self.editor.on("instanceReady", function (ev: any) {
                    let editor = ev.editor;
                    // 监听上传事件
                    editor.on('fileUploadRequest', function (evt) {
                        var fileLoader = evt.data.fileLoader,
                            formData = new FormData(),
                            xhr = fileLoader.xhr;

                        xhr.open('POST', fileLoader.uploadUrl, true);
                        xhr.setRequestHeader('TOKEN', self._cookie.get(CookiesService.KEY));

                        formData.append('upload', fileLoader.file, fileLoader.fileName);
                        fileLoader.xhr.send(formData);

                        // Prevented the default behavior.
                        evt.stop();
                    }, null, null, 4);
                    // 监听返回事件
                    editor.on('fileUploadResponse', function (evt) {
                        // Prevent the default response handler.
                        evt.stop();

                        // Get XHR and response.
                        var data = evt.data,
                            xhr = data.fileLoader.xhr,
                            response = xhr.responseText.split('|');

                        if (response[1]) {
                            // An error occurred during upload.
                            data.message = response[1];
                            evt.cancel();
                        } else {
                            try {
                                if (response[0]) {
                                    const res = JSON.parse(response[0]);
                                    if (res.code === 0) {
                                        data.url = res.data && res.data.key;
                                    } else {
                                        data.message = res.msg;
                                    }
                                } else {
                                    data.message = "上传失败了";
                                }
                            } catch (error) {
                                console.log("上传图片出错", error);
                            }
                        }
                    });
                });
            }
        });
    };
}