• 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="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);
            }


  • 相关阅读:
    es6箭头函数
    微信小程序入门
    浏览器常见错误代码
    nginx学习
    windows下mongodb安装与使用整理
    mongodb简单的增删改查
    github入门到上传本地项目
    Robomongo
    对象(面向对象、创建对象方式、Json)
    代码编辑器——Visual Studio Code
  • 原文地址:https://www.cnblogs.com/foren/p/6009096.html
Copyright © 2020-2023  润新知