CKEditor 自主控制图片上传
在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 />
<asp:FileUpload ID="upLoadFile" runat="server" />
<br />
<br />
<asp:Button ID="Button1" runat="server" Text="上传" onclick="Button1_Click" />
<asp:Button ID="Button2" runat="server" onclick="Button2_Click" Text="取消" />
</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 自主控制图片上传的更多相关文章
- SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
- WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION 图片上传
CKEDITOR 编辑器 图片上传 WINDOW.PARENT.CKEDITOR.TOOLS.CALLFUNCTION (CKEditorFuncNum,图片路径,返回信息); CKEditor ...
- 在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言 之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
- C#上传图片同时生成缩略图，控制图片上传大小。
#region 上传图片生成缩略图 /// <summary> /// 上传图片 /// </summary> /// <param name="sender& ...
- ci 配置ckeditor + ckfinder 无图片上传按钮
一:配置路径有问题 {$base_url}assets/js/editor/ckfinder/ckfinder.html --> http://www.cnblogs.com/assets/j ...
- CKeditor如何实现图片上传功能
http://makaiyuan.blog.51cto.com/5819595/1049521 如何在数据库中导入excel文件内的数据:http://jingyan.baidu.com/album/ ...
- ckedit 图片上传 php
分享ckedit的使用.直接码出来 <input type="hidden" name="id" id="id" value=&quo ...
- CKEditor实现图片上传
本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置. CKEditor编辑器的工具栏中初始的时候应该是这样子的,没有图片上传按钮 并且预览中有一堆火星 ...
- ckeditor+jsp+spring配置图片上传
CKEditor用于富文本输入是极好的,它还有一些插件支持扩展功能,其中图片上传就是比较常用到的.本文简单记录我的实现步骤. 1.CKEditor除了提供三种标准版压缩包下载,还可根据自己的需求进行个 ...
随机推荐
- IntelliJ IDEA —— Android开发的另一个选择
IntelliJ IDEA —— Android开发的另一个选择 很早就听过Eclipse的大名,但在我初学Java的时候,一位前辈推荐的IDE却是IntelliJ IDEA.因为之前用过JetBra ...
- webkit的几个属性
-webkit-text-size-adjust 1.当样式表里font-size<12px时,中文版chrome浏览器里字体显示仍为12px,这时可以用 html{-webkit-text-s ...
- HTML页面的动画的制作及性能
原文:HTML页面的动画的制作及性能 WEB页面的动画的制作及性能 简介 目前WEB页面做动画的方式大的分两种1.JS间隔时间不断修改元素属性值,这也是CSS3出来前常用的做法,貌似也是唯一的做法.2 ...
- Android学习小Demo（21）ListView的联动选择
在日常的App开发中,尤其是在开发生活服务的应用上,非常多时候,我们会须要联动地展现省市区的数据等,需求大概例如以下: 1)展现全部省份 2)当点击某省份的时候,在二级菜单上展现此省份以下所属的城市列 ...
- openwrt固件支持3G和4G上网卡
http://wiki.openwrt.org/doc/howtobuild/wireless-router-with-a-3g-dongle Building image with support ...
- JS获取字符串实际长度
JS中默认中文字符长度和其它字符长度计算方法是一样的,但某些情况下我们需要获取中文字符串的实际长度,代码如下: function strLength(str) { var realLength = 0 ...
- ubuntu下使用openocd+jlink进行STM32开发调试
安装openocd就不用多说了,使用 apt-get install openocd 这个命令就可以做到. 对于使用stm32w系列的MCU,需要下载新的openocd-0.7及以上版本才能支持.0. ...
- java这些东西发展（4）-------无穷time of error
今天,有些郁闷的心情啊.空指针下午折磨.到现在为止仍然没有得到解决,专家的招募结果没拿到,我们必须继续自己的,进而改变一点点一点点地找到它,但现在我不想搞,准备回家,这浪费了一个多小时,之前记录的下一 ...
- 使用rem设计移动端自适应页面三（转载）
使用rem 然后根据媒体查询实现自适应.跟使用JS来自适应也是同个道理,不过是js更精确一点.使用媒体查询: html { font-size: 62.5% } @media only screen ...
- Nhibernate分页测试续
Nhibernate分页测试续(附源码) 接着上一篇Nhibernate分页测试,最近一直在接触Nhibernate,接触的越多.了解越深,越是感觉他的强大,很多功能都封装的很好,对数据操作是那么的简 ...