在ASP.NET中使用CKEditor编辑器，如果想控制图片上传，即把上传的图片路径名存到数据中，可以自定义一个上传功能

首先自定义CKEditor的配置文件

在config.js中添加以下代码，红色部分为增加添加图片插件语句

CKEDITOR.editorConfig = function (config) {
    // Define changes to default configuration here. For example:
    config.language = 'zh-cn';
   // config.skin = 'v2';
    config.uiColor = '#AADC6E';
    config.toolbar =
    [
       ['Source', '-', 'Preview', '-'],
        ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord'],
        ['Undo', 'Redo', '-', 'Find', 'Replace', '-', 'SelectAll', 'RemoveFormat'],
        '/',
        ['Bold', 'Italic', 'Underline'],
        ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent'],
        ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
        ['Link', 'Unlink', 'Anchor'],
        ['addpic', 'Flash', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak'], //此处的addpic为我们自定义的图标，非CKeditor提供。
        '/',
        ['Styles', 'Format', 'Font', 'FontSize'],
        ['TextColor', 'BGColor'],

];

config.extraPlugins = 'addpic';

};

然后需要为添加图片按钮配置图片

在./ckeditor/plugins/目录下新建一个文件夹addpic,然后在其目录下添加两个文件，一个是名叫addpic.jpg的图片，就是添加图片按钮

的图标，另一个是plugin.js,就是配置此按钮的js代码

plugin.js文件内容

(function () {
    //Section 1 : 按下自定义按钮时执行的代码
    var a = {
        exec: function (editor) {
            show();
        }
    },
    b = 'addpic';
    CKEDITOR.plugins.add(b, {
        init: function (editor) {
            editor.addCommand(b, a);
            editor.ui.addButton('addpic', {
                label: '添加图片',
                icon: this.path + 'addpic.JPG',
                command: b
            });
        }
    });
})();

现在编辑器中已经部署好了添加图片的功能图标，接下来我们就需要完成在点击它时，弹出一个上传文件的对话框，

其中弹出对话框我们使用用jquery开发的popup弹出对话框模式，所以在使用前需要加载相应的js文件

<script type="text/javascript" src="./Scripts/scripts/jquery.1.3.2.js"></script>
    <script type="text/javascript" src="./Scripts/scripts/popup_layer.js"></script>

<!--因为我们要把图片加入到编辑其中所以需要通过 CKeditor 的jsAPI来操作，因此也许要加载下面的文件-->
    <script type="text/javascript" src="./ckeditor/ckeditor.js"></script>

<!--下面的JS文件是需要我们自己写的，就是为了完成图片插入编辑器中-->

<script type="text/javascript" src="./ckeditor/addImage.js"></script>

addimage.js文件内容，也可是将其写在应用编辑器的页面test.aspx中,写成JS文件形式，如果在另个页面也需要此功能只需加载

此文件就行了，不必再复制js代码

function show() {

$("#ele6")[0].click();
}
function upimg(str) {//上传文件页面上传成功后将返回图片的完整路径名，然后我们就可以将其插入编辑其中

if (str == "undefined" || str == "") {
        return;
    }
    str = "<img src='" + str + "'></img>";
    CKEDITOR.instances.CKEditor_memo.insertHtml(str);//调用CKEditor的JS接口将图片插入
    close();
}
function close() {

$("#close6")[0].click();
}
$(document).ready(function () {
    new PopupLayer({ trigger: "#ele6", popupBlk: "#blk6", closeBtn: "#close6", useOverlay: true, offsets: { x: 50, y: 0} });
});

其中应用编辑器的页面test.aspx代码如下

具体如何部署CKEdtior官网上有许多详细介绍

这是官网上专门针对使用asp.net的部署，很详细了

http://docs.cksource.com/CKEditor_3.x/Developers_Guide/ASP.NET/Integration_Beginners

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="test.aspx.cs" Inherits="web.test" %>
<%@ Register assembly="CKEditor.NET" namespace="CKEditor.NET" tagprefix="CKEditor" %>
<%@ Register src="Controllers/ClassList.ascx" tagname="ClassList" tagprefix="uc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="./Scripts/scripts/jquery.1.3.2.js"></script>
    <script type="text/javascript" src="./Scripts/scripts/popup_layer.js"></script>
    <script type="text/javascript" src="./ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="./ckeditor/addImage.js"></script>
    <script type="text/javascript">

</script>
    <style type="text/css">
        #form1
        {
            width: 852px;
        }
        #TextArea1
        {
            height: 162px;
            width: 436px;
        }
    </style>
</head>
<body style="width: 908px">
    <form id="form1" runat="server">
    <div>
      <div id="ele6" style="cursor:hand; color: blue; display:none;"></div>
    <div id="blk6" class="blk" style="display:none;">
        <div class="head"><div class="head-right"></div></div>
        <div class="main">                
            <a href="javascript:void(0)"  id="close6" class="closeBtn"></a>                
            <iframe src="upimg.aspx"></iframe>                    
        </div>            
    </div>
    <div style="width: 803px">
        <br />
          <CKEditor:CKEditorControl ID="CKEditor_memo" runat="server" Height="313px"  
            Width="747px"></CKEditor:CKEditorControl>
        <br />
    </div>
    </div>
   </form>
</body>
</html>

下面是上传页面设计

前台设计upimg.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="upimg.aspx.cs" Inherits="web.upimg" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <!--
    <script type="text/javascript" src="./Scripts/scripts/jquery.1.3.2.js"></script>
    <script type="text/javascript" src="./Scripts/scripts/popup_layer.js"></script>
    -->
    <style type="text/css">
        #form1
        {
            height: 112px;
            width: 297px;
        }
    </style>
</head>
<body style="height: 120px; width: 299px;" bgcolor="White">
    <form id="form1" runat="server" style="background-color: #CEFFCE">
     <div style="height: 116px; width: 299px">
         <br />
&nbsp;&nbsp;&nbsp;
        <asp:FileUpload ID="upLoadFile" runat="server" />
         <br />
         <br />
         &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
        &nbsp;&nbsp;&nbsp;
        <asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消" />
        &nbsp;&nbsp;
        </div>
    </form>
</body>
</html>

后台操作代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Security.Cryptography;
using System.IO;
namespace web
{
    public partial class upimg : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {

}

//点击上传按钮，如果文件路径不为空进行上传操作
        protected void Button1_Click(object sender, EventArgs e)
        {
            if (this.upLoadFile.PostedFile.ContentLength != 0)
            {
                string imgdir = UpImg();

//调用前台JS函数，将图片插入编辑器中即我们在addpic.js写的upimg函数
                string script = "window.parent.upimg('" + imgdir + "');"

ResponseScript(script);
            }
            else
            {
                Response.Write("请选择图片");
            }
        }

//点击取消按钮，关闭弹出窗口
        protected void Button2_Click(object sender, EventArgs e)
        {
            string script = "window.parent.close();";
            ResponseScript(script);
        }
        /// <summary>
        /// 输出脚本
        /// </summary>
        public void ResponseScript(string script)
        {
            System.Text.StringBuilder sb = new System.Text.StringBuilder("<script language='javascript' type='text/javascript'>");
            sb.Append(script);
            sb.Append("</script>");
            ClientScript.RegisterStartupScript(this.GetType(), RandomString(1), sb.ToString());
        }
        /// <summary>
        /// 获得随机数
        /// </summary>
        /// <param name="count">长度</param>
        /// <returns></returns>
        public static string RandomString(int count)
        {
            RNGCryptoServiceProvider rng = new RNGCryptoServiceProvider();
            byte[] data = new byte[count];
            rng.GetBytes(data);
            return BitConverter.ToString(data).Replace("-", "");
        }

//上传函数我将图片都存在了服务器根目录下的./upfile/images文件夹下
        public string UpImg()
        {
            string imgdir ="";
            if (this.upLoadFile.PostedFile.ContentLength != 0)
            {
                string fileFullName = this.upLoadFile.PostedFile.FileName;//
                int i = fileFullName.LastIndexOf(".");
                string fileType = fileFullName.Substring(i);
                if (fileType != ".gif" && fileType != ".jpg" &&
                    fileType != ".bmp" && fileType != ".jpeg" &&
                    fileType != ".png")
                {
                    Response.Write("文件格式不正确");
                    Response.End();
                }
                else
                {
                    DateTime now = DateTime.Now;
                    string newFileName = now.Millisecond + '_' + upLoadFile.PostedFile.ContentLength.ToString() + fileType;
                    upLoadFile.PostedFile.SaveAs(Server.MapPath("/upfile/images/" + newFileName));
                    imgdir = "./upfile/images/" + newFileName;
                }
            }
            return imgdir;
            
        }
    }
}

感谢一下博文博主

http://www.cnblogs.com/lts8989/archive/2011/08/04/2127326.html

http://www.cnblogs.com/dg5461/articles/1746484.html

参考代码请到我的资源中下载

CKEditor 自主控制图片上传的更多相关文章

  1. SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传

    SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...

  2. WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION 图片上传

    CKEDITOR  编辑器   图片上传 WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION (CKEditorFuncNum,图片路径,返回信息); CKEditor ...

  3. 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能

    前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...

  4. C#上传图片同时生成缩略图，控制图片上传大小。

    #region 上传图片生成缩略图 /// <summary> /// 上传图片 /// </summary> /// <param name="sender& ...

  5. ci 配置ckeditor + ckfinder 无图片上传按钮

    一:配置路径有问题 {$base_url}assets/js/editor/ckfinder/ckfinder.html  --> http://www.cnblogs.com/assets/j ...

  6. CKeditor如何实现图片上传功能

    http://makaiyuan.blog.51cto.com/5819595/1049521 如何在数据库中导入excel文件内的数据:http://jingyan.baidu.com/album/ ...

  7. ckedit 图片上传 php

    分享ckedit的使用.直接码出来 <input type="hidden" name="id" id="id" value=&quo ...

  8. CKEditor实现图片上传

    本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置. CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 并且预览中有一堆火星 ...

  9. ckeditor+jsp+spring配置图片上传

    CKEditor用于富文本输入是极好的,它还有一些插件支持扩展功能,其中图片上传就是比较常用到的.本文简单记录我的实现步骤. 1.CKEditor除了提供三种标准版压缩包下载,还可根据自己的需求进行个 ...

随机推荐

  1. java压缩zip文件中文乱码问题(转——作者：riching)

    本人遇到了同样的问题,用了以下方案,奇迹般的解决了.我很纳闷为什么,经理说:好读书,不求甚解,不要问为什么... 用java来打包文件生成压缩文件,有两个地方会出现乱码 1.内容的中文乱码问题,这个问 ...

  2. oracle中的DECODE

    原文:oracle中的DECODE   DECODE函数相当于一条件语句(IF).它将输入数值与函数中的参数列表相比较,根据输入值返回一个对应值.函数的参数列表是由若干数值及其对应结果值组成的若干序偶 ...

  3. 纯CSS隔行换色

    原文:纯CSS隔行换色 <head> <meta http-equiv="Content-Type" content="text/html; chars ...

  4. hdu - 4979 - A simple math problem.（可反复覆盖DLX + 打表）

    题意:一种彩票共同拥有 N 个号码,每注包括 M 个号码,假设开出来的 M 个号码中与自己买的注有 R 个以上的同样号码,则中二等奖,问要保证中二等奖至少要买多少注(1<=R<=M< ...

  5. uva 11991 - Easy Problem from Rujia Liu?(STL)

    option=com_onlinejudge&Itemid=8&page=show_problem&problem=3142" target="_blank ...

  6. 探索Android该Parcel机制上

    一．先从Serialize说起 我们都知道JAVA中的Serialize机制.译成串行化.序列化……,其作用是能将数据对象存入字节流其中,在须要时又一次生成对象.主要应用是利用外部存储设备保存对象状态 ...

  7. sql datalength与len区别用法

    原文:sql datalength与len区别用法 len ( string_expression )参数:要计算的字符串 len() 函数len 函数返回文本字段中值的长度. sql len() 语 ...

  8. Asp.Net MVC页面静态化功能实现一：利用IHttpModule，摒弃ResultFilter

    上一篇有提到利用IHttpModule和ResultFilter实现页面静态化功能.后来经过一些改动,将ResultFilter中要实现的功能全部转移到IHttpModule中来实现 Asp.Net ...

  9. python购物淫秽数据分析（2）

    淘宝大数据的游戏,我重新提高自己的思维方式, 插件和代码前前后后写在六个版本,但最好的结果其实是我的第一次2第二码.这让我很惊讶, 但它也说明了一个问题.当你更熟悉的语言,当一方,你缺少的是其他的知识 ...

  10. PhotoShop基本工具 -- 移动工具

    艺术或学习的东西吧, 爱好   比学编程还难 PS版本号 : PhotoShop CS6 1. 移动工具 (1) 工具栏和属性栏 工具栏 和 属性栏 : 左側的是工具栏, 每选中一个工具, 在菜单条的 ...