• ckeditor 自定义上传图片,丢弃原来的上传 示例代码


    之前一直是Fckeditor 在线编辑器,最近发现对Chorme 支持不是很友好,所以决定采用最新版本ckeditor 4.01版本。

    为了保持和之前上传风格,我决定对ckeditor 进行再次改造。

    和网上任何一个上传都不一样。纯自己想出来的。送给需要的同学。

    首先是调用方式:

    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <script type="text/javascript">
        window.onload = function()
        {
            CKEDITOR.replace('FContent');//FContent:这个对应文本域
        };   
     
     //插入图片 并插入编辑器
          function InsertHTML(s) {
              var editor = CKEDITOR.instances.FContent; //FContent:这个对应文本域
              if (editor.mode == 'wysiwyg') {
                  editor.insertHtml(s);
              }
              CKEDITOR.dialog.getCurrent().hide();//隐藏弹出层
          }

    注册JS:

        config.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', 'blocks', 'align' ] },
            { name: 'styles' },
            { name: 'colors' },
            { name: 'UploadPic' }
        ];
    config.extraPlugins = 'UploadPic';


    定义插件:

    (function () {
     CKEDITOR.plugins.add('UploadPic',
    {    init: function(editor)
        {
            var pluginName = 'UploadPic';
            CKEDITOR.dialog.add(pluginName, this.path + 'dialogs/UploadPic.js');
            editor.addCommand(pluginName, new CKEDITOR.dialogCommand(pluginName));
            editor.ui.addButton('UploadPic',
                {
                    label: '上传图片',
                    command: pluginName,
                    icon: CKEDITOR.plugins.getPath('UploadPic') + 'uploadpic.png'
                });
        }
    }); 
    
     })();

    定义弹出层:

    CKEDITOR.dialog.add("UploadPic", function (a) { a = a.lang.UploadPic; return { title: '上传图片', minWidth: 390, minHeight: 150, contents: [{ id: "tab1", label: "", title: "", expand: !0, padding: 0, elements: [{ type: "html", html: "<form action='/ckeditor/plugins/UploadPic/dialogs/upload.aspx' method='post' enctype='multipart/form-data' target='myiframe' style='margin-top:10px;'><input name='uploadimg'  style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px;line-height: 36px;border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;360px;' id='uploadimg'  type='file' /><br><input name='submit' onclick='return check();'  id='sumit' value='上传' type='submit'style='background: #fbfbfb;url(http://static.zcool.com.cn/images/txtBg.png) repeat-x left top;height: 36px; line-height: 36px; text-align:center; margin-top:10px; border: 1px solid #abadb3;font-size: 14px;padding: 0 5px;70px;' /></form><iframe name='myiframe' id='myiframe' width='100' height='100'frameborder='0' scrolling='yes' marginheight='0' marginwidth='0' ></iframe>"}]}], buttons: [CKEDITOR.dialog.cancelButton]} });

    剩余一个是 上传接受页面,就随别接受下,同学可以根据的需求进行改动。

    运行最好用IIS托管运行下

    示例代码下载ckeditor_upload.zip

  • 相关阅读:
    [Oracle]跨越 DBLINK 访问表时,数据缓存在何处的Data Buffer 中?
    [Oracle]查看数据是否被移入 DataBuffer 的方法
    [Oracle]如何为数据库设置Event(eg: ORA-00235)
    [Oracle][Corruption]究竟哪些检查影响到 V$DATABASE_BLOCK_CORRUPTION
    [Oracle]OpenVMS 运行 Oracle 时的推荐值
    [Oracle]System 表空间的文件丢失
    [Oracle]如果误删了某个数据文件,又没有被备份,能否恢复?
    OFS环境,删除Resource 时出现错误失败,应该如何继续
    基于酷Q的工作秘书机器人
    C++编写简单的俄罗斯方块游戏
  • 原文地址:https://www.cnblogs.com/flyfish2012/p/2953641.html
Copyright © 2020-2023  润新知