• 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

  • 相关阅读:
    struct resbuf 结构就象LISP里面的表(
    CString互转int
    C++中std::sort/std::stable_sort/std::partial_sort的区别及使用
    *ARX对数据的类型和单位进行转换
    c++常见容器操作
    C++中const关键字的使用方法,烦透了一遍一遍的搜,总结一下,加深印象!!!
    ARX 简单程序(不错的例子)
    ARX对象的一些文字说明
    CAD ObjectARX扩展工具的源码(一)
    CAD ObjectARX扩展工具的源码(三)
  • 原文地址:https://www.cnblogs.com/flyfish2012/p/2953641.html
Copyright © 2020-2023  润新知