在前面配置完CKEditor之后,就可以拥有一个功能挺强大的编辑器了

但是现在还不够,还要能够在发表文字中插入自己电脑上的图片

CKEditor自己好像有这个功能,但是实在是。。。没法说,很难用(这是听别人说的,我自己测试的时候根本就不能用。。。)

这时候就需要SWFUpload出场啦

具体介绍就不说了,百度之。

简单的说SWFUpload是一个能够实现文件无刷新上传的一个神奇的东西

下载地址:SWFUpload

下载下来之后,真正有用的东西有四个

1.swfupload.js

2.handlers.js

3.swfupload.swf

4.swfuploadbutton.swf

以上四个文件都在js文件夹下,将它们拷到项目中,还是放在js文件夹下,接着添加对两个js文件的引用(加上之前的CKEditor)

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

要注意路径的问题

引用完毕之后,是时候展现威力了!

在页面中添加几个必要的div

<label for="editor1">
发表留言:</label>
<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>

<div id="content">
<div id="swfu_container" style="margin: 0px 10px;">
<div>
<span id="spanButtonPlaceholder"></span>
</div>
<div id="divFileProgressContainer" style="height: 75px;">
</div>
</div>
</div>

就添加在CKEditor替换的textarea的后面,这几个div都是必须的,就是将这些个div配置成无刷新上传的控件

配置的js代码如下:

//SWF----------------------------------
var swfu;
swfu = new SWFUpload({
// Backend Settings
upload_url: "Upload.ashx",//这里是图片上传到后台的一个接收页面
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
}, // File Upload Settings
file_size_limit: "2 MB",//文件大小的限制
file_types: "*.jpg",//类型限制
file_types_description: "JPG Images",
file_upload_limit: "0", // Zero means unlimited // Event Handler Settings - these functions as defined in Handlers.js
// The handlers are not part of SWFUpload but are part of my website and control how
// 上传之后的一系列事件,可以自定义,这里的success就是自定义的,当图片上传成功之后的回调方法
file_queue_error_handler: fileQueueError,
file_dialog_complete_handler: fileDialogComplete,
upload_progress_handler: uploadProgress,
upload_error_handler: uploadError,
upload_success_handler: success,
upload_complete_handler: uploadComplete, // 显示的按钮的相关设置
button_image_url: "images/XPButtonNoText_160x22.png",
button_placeholder_id: "spanButtonPlaceholder",
button_width: 160,
button_height: 22,
button_text: '<span class="button"> 插入图片 <span class="buttonSmall">(2 MB Max)</span></span>',
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_text_top_padding: 1,
button_text_left_padding: 5, // Flash Settings
flash_url: "js/swfupload.swf", // .swf文件,注意路径问题 custom_settings: {
upload_target: "divFileProgressContainer"//
}, // Debug Settings
debug: false
}); //------------------------------------------------------以下为自定义的SWFupload函数
var data;
function success(file, serverData) {//自定义方法的时候需要注意,参数是固定的只有两个,其中serverData是服务器接收完图片之后返回的数据,这里我返回的是一个字符串ok+刚刚上传的图片路径,以分号隔开
data = serverData.split(";");
if (data[0] == "ok") {
var msg = oEditor.getData();//向原有的编辑器中插入刚刚的图片
oEditor.setData(msg + "[img=110,90]" + data[1] + "[/img]");//图片为ubb代码
}
}

注意js代码中中文注释的部分,这是很容易出错的地方,其中success是将用户选择的图片异步上传到服务器成功之后的回调函数,由于我在后台保存完上传的图片之后将这张图片的路径返回给前台,所以前台能够根据路径访问到这张图片

html代码<img src='图片路径' height='20' width='20'/>

对应的ubb代码为[img=20,20]图片路径[/img]

这个时候,前台已经配置完毕,我们可以再ubb编辑器中随意的插入想要的图片了

需要注意的是,使用SWFUpload异步上传的文件

在后台使用HttpPostedFile file = context.Request.Form["Filedata"];来接收

CKEditor+SWFUpload实现功能较为强大的编辑器(二)---SWFUpload配置的更多相关文章

  1. CKEditor+SWFUpload实现功能较为强大的编辑器(三)---后台接收图片流程

    在前台配置完CKEditor和SWFUpload之后就可以满足基本的需求了 在这里,我配置的接收异步上传的图片的页面为upload.ashx 在这个ashx中对上传的图片处理的流程如下: contex ...

  2. CKEditor+SWFUpload实现功能较为强大的编辑器(一)---CKEditor配置

    CKEditor爆表的强大功能大家都有目共睹,号称最强大的在线编辑器,只要将文件复制到项目中,在添加引用,在一句代码就可以将普通的textarea变成华丽的编辑器 所谓一复制,一拖,一换就大功告成 但 ...

  3. 富文本文件CKEDITOR增加上传图片功能(.net)

    如题,本身的CKEDITOR控件并没有开启上传图片的功能, 打开图像按钮,只有图像信息和高级两个table选项卡,版本不同,显示略有差异,我的实现是有两种方法都可以添加上传功能, 第一种方法使用CKE ...

  4. python模块之httplib(在py3中功能进一步强大,请详看文档)

    # -*- coding: utf-8 -*-#python 27#xiaodeng#python模块之httplib(在py3中功能进一步强大,请详看文档) import httplib#是较为底层 ...

  5. 推荐一个简单、轻量、功能非常强大的C#/ASP.NET定时任务执行管理器组件–FluentScheduler定时器

    在C#WINFORM或者是ASP.NET的WEB应用程序中,根据各种定时任务的需求,比如:每天的数据统计,每小时刷新系统缓存等等,这个时候我们得应用到定时器这个东东. .NET Framework有自 ...

  6. 功能更强大的格式化工具类 FormatUtils.java

    package com.util; import java.text.DecimalFormat; import java.text.ParseException; import java.text. ...

  7. drupal7中CKEditor开启上传图片功能

    在drupal建站中,所见即所得编辑器提供了友好的界面.也提高开发效率,而CKEditor是一款非常不错的编辑器.定制性相当高,在这推荐给大家. CKEditor和其它模块(IMCE)搭配下在文字排版 ...

  8. 让Docker功能更强大的10个开源工具

    让Docker功能更强大的10个开源工具 更好的管理.Web前端程序.更深入地了解容器应用程序,Docker生态系统正在迅速发展,这还得归功于其充满活力的开源社区. 软件项目的成功常常根据其催生的生态 ...

  9. pandas的筛选功能,跟excel的筛选功能类似,但是功能更强大。

    Select rows from a DataFrame based on values in a column -pandas 筛选 https://stackoverflow.com/questi ...

随机推荐

  1. Python实现队列

    队列的数据结构的主要结构:一个结点类和两个方法:出队列和进队列 class Node(object): def __init__(self,val): self.val = val self.next ...

  2. 关于#include <bits/stdc++.h>

    经常看人写#include <bits/stdc++.h>却不知道是干啥的? #include<bits/stdc++.h>包含了目前c++所包含的所有头文件 对比: #inc ...

  3. 汕头市队赛 SRM13 T3

    这道题可以贪心 维护一个答案队列 枚举位置 每次将比当前位置大的队尾全部替代掉 记录删了多少了就好了 #include<cstdio> #include<iostream> # ...

  4. PHP高性能开发-多进程开发

    硬件多核时代的软件业以前计算能力的提升一直在摩尔定律的指引下,沿着提升CPU时钟频率这条道路前进,从初期的几十MHz到如今的几GHz.但是,进入2002年以 来,CPU提升主频的困难越来越大,因为主频 ...

  5. Generator函数的语法

    简介 Generator函数是ES6关于异步编程的解决方案.Generator函数能够让函数暂停执行(即交出函数的执行权),简单直白点来理解,Generator函数就是一个状态机,内部封装了多个状态( ...

  6. AUTOIT3设置用户包含目录

     

  7. commons-lang3中DateUtils类方法介绍

    添加commons-lang3的Maven依赖 <dependency> <groupId>org.apache.commons</groupId> <art ...

  8. how to configure team on liunx(RHEL7.x/Centos7.x)

    #install team sofeware yum install teamd -y #check team configuration nmcli con show #Next we create ...

  9. UVA 11925:Generating Permutations(冒泡排序 Grade D)

    VJ题目链接 题意:n个数(n<300),是一个1~n的某个排列.有两种操作:操作1把前两个数换位置,操作2把第一个数移动到最后.问给出一个排列,问通过怎样的操作,能把1,2,3,...,n变到 ...

  10. flask框架下的jinja2模板引擎(3)(模板继承与可以在模板使用的变量、方法)

    flask 框架下的jinja2模块引擎(1):https://www.cnblogs.com/chichung/p/9774556.html flask 框架下的jinja2模块引擎(2):http ...