Ckeditor调用示例

MyCkEditor.js
//编辑器工作模式判断
function isWysiwygareaAvailable() {
    if (CKEDITOR.revision == ('%RE' + 'V%')) {
        return true;
    }
    return !!CKEDITOR.plugins.get('wysiwygarea');
}
//启动ckeditor编辑页面区块
function htmlCkeditor(id) {
    var obj = $('#' + id);
    var editor;
    if (CKEDITOR.env.ie && CKEDITOR.env.version < 9)
        CKEDITOR.tools.enableHtml5Elements(document);

    CKEDITOR.config.height = obj.height();
    CKEDITOR.config.width = obj.width();

    var wysiwygareaAvailable = isWysiwygareaAvailable();

    var editorElement = CKEDITOR.document.getById(id);

    if (wysiwygareaAvailable) {
        editor = CKEDITOR.replace(id);
    } else {
        editorElement.setAttribute('contenteditable', 'true');
        editor = CKEDITOR.inline(id);
    }
    var cssFiles = document.getElementsByTagName('link');
    var css = [];
    for (var i = 0; i < cssFiles.length; i++) {
        var file = cssFiles[i];
        css.push(file.href);
    }
    editor.config.contentsCss = css;
    return editor;
}
//启动编辑模式
var selectEditElement, oldCss, oldZindex;
function startEditModel() {    
    $(document).unbind("click");
    $(document).bind("click", function (e) {
        var curr = e.originalEvent.srcElement;
        if (selectEditElement != curr && curr.id != 'btnEditorModel') {
            $(selectEditElement).css('border', oldCss).css('z-index', oldZindex);
            oldCss = $(curr).css('border');
            oldZindex = $(curr).css('z-index');
            $(curr).css('border', '1px dotted red').css('z-index', '9995').on('dblclick', function () {
                this.id = this.id || 'ck_' + (new Date().getTime());
                htmlCkeditor(this.id);
            });
            selectEditElement = curr;
            e.stopPropagation();
        }
    });
}
//终止编辑模式
function endEditModel() {
    //解除页面文档的点击事件绑定
    $(document).unbind("click");
    //还原选中的页面区块样式
    $(selectEditElement).css('border', oldCss).css('z-index', oldZindex);
    for (var editor in CKEDITOR.instances) {
        //还原编辑器覆盖的区块
        $('#' + editor).css({ visibility: '' }).show();
        //还原编辑器覆盖的区块
        $('#' + editor).unbind("dblclick");;
        //销毁编辑器实例
        CKEDITOR.remove(CKEDITOR.instances[editor]);
        //移除编辑器Jquery对象
        $('#cke_' + editor).remove();
    }
}

//(function () {
//    $('body').append('<div id="btnEditorModel" style="width:160px; height:30px; line-height:30px; text-align:center; vertical-align:middle;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color:#25b3d3; position:fixed; top:0px; right:180px;font-weight:bolder;font-size:18px;color:#88FF88;">Start Edit</div>');
//    $('#btnEditorModel').on("click", function (e) {
//        if (this.innerHTML == 'Start Edit') {
//            this.innerHTML = 'End Edit';
//            startEditModel();
//        } else {
//            this.innerHTML = 'Start Edit';
//            endEditModel();
//        }
//    });
//}());


config.js

/**
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.md or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
	// Define changes to default configuration here. For example:
	// config.language = 'fr';
    // config.uiColor = '#AADC6E';
    config.toolbar = 'Full';
    //config.toolbar_Full = [
    //    ['NewPage', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Templates', 'Preview'],
    //    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    //    ['Link', 'Unlink', 'Anchor', 'Iframe'],
    //    ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'], 
    //    ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', 'RemoveFormat', 'TextColor', 'BGColor'],
    //    ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', 'bidiltr', 'bidirtl'],
    //    ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
    //    ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'SpellChecker', 'Scayt'], 
    //    ['Language', 'Styles', 'Format', 'Font', 'FontSize'],
    //    ['Maximize', 'ShowBlocks'], ['Source'], ['complete']
    //];
    config.toolbar_Full = [
        ['NewPage', 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Templates', 'Preview'],['Link', 'Unlink'],        
        ['Image', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar'],
        ['Bold', 'Italic', 'Underline', 'Strike', '-', 'Subscript', 'Superscript', 'RemoveFormat', 'TextColor', 'BGColor'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv', 'bidiltr', 'bidirtl'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], ['Maximize', 'ShowBlocks'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'SpellChecker', 'Scayt'],
        ['Styles', 'Format', 'Font', 'FontSize','Source']        
    ];
    config.extraPlugins += (config.extraPlugins ? ',complete' : 'complete');
    // config.font_names = 'Arial;Times New Roman;Verdana';
    //config.font_names = "Arial/Arial, Helvetica, sans-serif;Comic Sans MS/Comic Sans MS, cursive;Courier New/Courier New, Courier, monospace;Georgia/Georgia, serif;Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;Tahoma/Tahoma, Geneva, sans-serif;Times New Roman/Times New Roman, Times, serif;Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;Verdana/Verdana, Geneva, sans-serif";
    config.font_names = '宋体/SimSun;新宋体/NSimSun;仿宋/FangSong;楷体/KaiTi;仿宋_GB2312/FangSong_GB2312;' +
        '楷体_GB2312/KaiTi_GB2312;黑体/SimHei;华文细黑/STXihei;华文楷体/STKaiti;华文宋体/STSong;华文中宋/STZhongsong;' +
        '华文仿宋/STFangsong;华文彩云/STCaiyun;华文琥珀/STHupo;华文隶书/STLiti;华文行楷/STXingkai;华文新魏/STXinwei;' +
        '方正舒体/FZShuTi;方正姚体/FZYaoti;细明体/MingLiU;新细明体/PMingLiU;微软雅黑/Microsoft YaHei;微软正黑/Microsoft JhengHei;' +
        'Arial Black/Arial Black;' + config.font_names;
    config.allowedContent = true              //是否保留样式
    config.disableObjectResizing = false;     //图片表格大小调整功能
    config.disableNativeTableHandles = true;  //表格编辑功能(plugins/wysiwygarea/plugin.js)
    config.startupMode = 'wysiwyg';
    config.stylesCombo_stylesSet = 'default'; //是否载入样式文件(plugins/stylescombo/plugin.js)
    config.resize_enabled = false;            //禁止调整编辑器大小(考虑到页面选中编辑的区块大小,目前不予修改)
    //config.filebrowserUploadUrl = "Blog/CkeditorUpload";
    //config.filebrowserImageBrowseUrl = 'Blog/CkeditorImageUpload';
    //config.filebrowserFlashBrowseUrl = 'Blog/CkeditorFlashUpload';
    config.filebrowserImageUploadUrl = '../CkEditor/ImageUpload';
    config.filebrowserFlashUploadUrl = '../CkEditor/FlashUpload';
    config.filebrowserAudioUploadUrl = '../CkEditor/AudioUpload';
    config.saveBlockHtmlUrl = '../CkEditor/Save';
    config.language = 'en';
    //config.skin = 'moono';
};

后台接受上传图片的方法:

 public ContentResult ImageUpload(string CKEditorFuncNum)
        {
            var types = "jpg,gif,png".ToLower().Split(',');
            var result = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum + ",'";
            if (Request.Files.Count > 0)
            {
                var user = CommonController.GetxAccountData();
                var account = user == null ? "Default" : user["xAccountCode"].ToString();                
                var file = Request.Files[0];
                var fileName = file.FileName.Substring(file.FileName.LastIndexOf('\\') + 1);
                var path = Server.MapPath("~") + "Images\\" + account;
                var msg = ImageHelper.SaveImage(file, path, fileName, types, 5);
                result += "http://" + Request.Url.Authority + "/Images/" + account + "/" + fileName + "','" + msg + "');</script>";
            }
            else
            {
                result += "','请选择需要上传的文件!');</script>";
            }
            return Content(result);
        }


posted on 2015-11-27 13:31  丰云  阅读(230)  评论(0编辑  收藏  举报

导航