CKEditor 自定义image插件

1. 创建image.js
   

   

(function () {

    var imageUploadId = "imageUploadId_" + new Date().getTime() + parseInt(Math.random() * 1000); // 生成唯一编号

    function init(editor) {
        return {
            title: editor.lang.image["title"],
            minWidth: 420,
            minHeight: 360,
            onShow: function () {
                var selectedImg = editor.getSelectedHtml();
                var imgSrc = $(selectedImg["$"].firstChild).attr("src");
                var imgStyle = $(selectedImg["$"].firstChild).attr("style");
                $("#" + imageUploadId + " img.previewImage").attr("src", imgSrc);
                $("#" + imageUploadId + " img.previewImage").attr("style", imgStyle);
            },
            onOk: function () {
                var previewImg = $("#" + imageUploadId + " img.previewImage");
                var previewImageSrc = previewImg.attr("src");
                var previewImageStyle = previewImg.attr("style");
                if (previewImageSrc == null || previewImageSrc == "") {
                    return;
                }
                var image = editor.document.createElement('img');
                image.setAttribute("src", previewImageSrc);
                image.setAttribute("style", previewImageStyle);
                editor.insertElement(image);

            },
            onLoad: function () {

            },
            onHide: function () {
                $("#" + imageUploadId + " img.previewImage").attr("src", "");
                $("#" + imageUploadId + " .width").val("");
                $("#" + imageUploadId + " .height").val("");
                $("#" + imageUploadId + " img.previewImage").css("width", "inherit");
                $("#" + imageUploadId + " img.previewImage").css("height", "inherit");
            },
            contents: [
                {
                    id: "info",
                    label: editor.lang.image.infoTab,
                    accessKey: "I",
                    elements: [{
                        type: "html",
                        html: "<div style='margin-bottom:20px' id='" + imageUploadId + "' >" +
                                  "<div style='padding-bottom:20px;'>" +
                                      "<a class='uploadFile cke_dialog_ui_button cke_dialog_ui_button_ok' style='cursor: pointer;'>上传文件</a>" +
                                      "<label style='margin-left:20px;'>宽度</label><input class='width cke_dialog_ui_input_text' style='width:120px;' type='text'/>px" +
                                      "<label style='margin-left:20px;'>高度</label><input class='height cke_dialog_ui_input_text' style='width:120px;' type='text'/>px" +
                                  "</div>" +
                                  "<img class='previewImage'/>" +
                              "</div>"
                    }]
                }]
        }
    };
    CKEDITOR.dialog.add("image", function (editor) {
        return init(editor)
    });


    // 注册事件
    $("#" + imageUploadId + " .uploadFile").ysSimpleUploadFile({
        changeCallback: function (file) {
            var fileReader = new FileReader();
            fileReader.onload = function () {
                $("#" + imageUploadId + " img.previewImage").attr("src", this.result);
            };
            fileReader.readAsDataURL(file);
        }
    });

    $(document).on("keyup", "#" + imageUploadId + " .width", function (e) {
        e.stopPropagation();
        e.preventDefault();
        var val = $(this).val();
        if (isNaN(parseInt(val))) {
            return;
        }
        $("#" + imageUploadId + " img.previewImage").css("width", val);
    });

    $(document).on("keyup", "#" + imageUploadId + " .height", function (e) {
        e.stopPropagation();
        e.preventDefault();
        var val = $(this).val();
        if (isNaN(parseInt(val))) {
            return;
        }
        $("#" + imageUploadId + " img.previewImage").css("height", val);
    });


})();

2. 创建 ys_simple_file_upload.js

(function($){

    var defaultSettings = {
        acceptTypes:["jpg","png"], // 接受的上传文件类型
        changeCallback:function(file){

        } // 自定义input[type=file] change事件
    };

    var renderHtml = "<input type='file' style='display:none;'/>";

    // 添加隐藏的
    function renderInputFile(target,settings){
        // 生成dialog唯一标识
        var id = "ys_simple_file_upload_"+new Date().getTime()+""+parseInt(Math.random());
        $(target).attr("ys_simple_file_upload",id);
        $(renderHtml).attr("id",id).appendTo("html"); // 添加到文档中去
        return $("#"+id);
    }

    function bindEventHandlers(container,settings){
        var changeCallback = settings.changeCallback;

        $(container).change(function(e){
            e.preventDefault();
            e.stopPropagation();
            var file = e.target.files[0];

            if(file==null){
                return;
            }

            if(!validateFileType(file,settings)){
                alert("文件类型不正确!");
                return;
            }

            changeCallback(file);

            // 清除value
            $(this).val("");
        });
    }

    // 验证文件类型
    function validateFileType(file,settings){
        var acceptTypes = settings.acceptTypes;
        var name = file.name;
        var fileSuffix = name.substr(name.lastIndexOf(".")+1);
        for(var i=0;i<acceptTypes.length;i++){
            var acceptType = acceptTypes[i];
            if(acceptType==fileSuffix){
                return true;
            }
        }
        return false;
    }

    var options = {
        ysSimpleUploadFile:function(settings) {
            var mergedSettings = {};
            $.extend(mergedSettings,defaultSettings,settings);

            var container = renderInputFile(this,mergedSettings);

            bindEventHandlers(container,mergedSettings);
            $(document).on("click",$(this)["selector"],function(e){
                e.preventDefault();
                e.stopPropagation();
                $(container).click();
            });
            //$(this).click(function(e){
            //    e.preventDefault();
            //    e.stopPropagation();
            //    $(container).click();
            //});
        }
    };
    $.fn.extend(options);
})(jQuery);

3. editor.html

<!DOCTYPE html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title></title>
<body>
<textarea id="editor"></textarea>

<script src="../static/dist/js/jquery-1.11.3.min.js"></script>
<script src="../static/dist/js/ckeditor.js"></script>
<script src="../static/js/ys_ui_plugin/ys_simple_file_upload.js"></script>
<script src="../static/dist/js/plugins/imageupload/dialogs/image.js"></script>

<script>
    CKEDITOR.replace( 'editor');
</script>

</body>
</html>

4. 效果