CKEditor+SWFUpload实现功能较为强大的编辑器-服务器评测

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

所谓一复制，一拖，一换就大功告成

但是普通的CKEditor由于会产生诸如<,>这样的危险符号，在用asp.net时必须在页面头的标签的ValidateRequest属性设置为false

在WebConfig文件中的httpRuntime节点配置requestValidateMode=”2.0″，否则会报错。

这样虽然功能可是实现，但是有可能造成XSS跨站脚本攻击，这是十分危险的

所以普通的CKEditor一般是给网站的管理员使用的（=。=管理员应该不会去做某些危险的事情吧）

给用户使用的都是UBB编译器

网上可以找到很多很多UBB编译器，但是现在的CKEditor中集成了这个功能，所以使用起来比较得心应手

现在进入主题

CKEditor3.6.5版本下载地址（最新版本的CKEditor我没有找到UBB的功能= =是不是下错包了郁闷）：

CKEditor3.6.5 及本文后面几页要用到的文件下载：

——————————————分割线——————————————

免费下载地址在 http://linux.linuxidc.com/

用户名与密码都是www.linuxidc.com

具体下载目录在 /2015年资料/2月/7日/CKEditor+SWFUpload实现功能较为强大的编辑器/

下载方法见 http://www.linuxidc.com/Linux/2013-07/87684.htm

——————————————分割线——————————————

下面是具体的使用流程：

1.下载完之后打开_samples文件夹，这里面有所有插件的使用方法，可以根据自己的需要进行选择，这里选择bbcode.htm

2.在你的页面上必须有一个textarea文本域，取好id之后（这里以editor1为例）在这个文本域的后面添加一段js代码，或者在window.onload()里面添加也是一样的

3.在bbcode.htm页面右键查看源，找到textarea后面的那段js代码

这里将它贴出来示众一下（快跟大家问好= 。=）

// Replace the <textarea id=”editor”> with an CKEditor
// instance, using the “bbcode” plugin, shaping some of the
// editor configuration to fit BBCode environment.
CKEDITOR.replace( ‘editor1’,
{
extraPlugins : ‘bbcode’,
// Remove unused plugins.
removePlugins : ‘bidi,button,dialogadvtab,div,filebrowser,flash,format,forms,horizontalrule,iframe,indent,justify,liststyle,pagebreak,showborders,stylescombo,table,tabletools,templates’,
// Width and height are not supported in the BBCode format, so object resizing is disabled.
disableObjectResizing : true,
// Define font sizes in percent values.
fontSize_sizes : “30/30%;50/50%;100/100%;120/120%;150/150%;200/200%;300/300%”,
toolbar :
[
[‘Source’, ‘-‘, ‘Save’,’NewPage’,’-‘,’Undo’,’Redo’],
[‘Find’,’Replace’,’-‘,’SelectAll’,’RemoveFormat’],
[‘Link’, ‘Unlink’, ‘Image’, ‘Smiley’,’SpecialChar’],
‘/’,
[‘Bold’, ‘Italic’,’Underline’],
[‘FontSize’],
[‘TextColor’],
[‘NumberedList’,’BulletedList’,’-‘,’Blockquote’],
[‘Maximize’]
],
// Strip CKEditor smileys to those commonly used in BBCode.
smiley_images :
[
‘regular_smile.gif’,’sad_smile.gif’,’wink_smile.gif’,’teeth_smile.gif’,’tounge_smile.gif’,
’embaressed_smile.gif’,’omg_smile.gif’,’whatchutalkingabout_smile.gif’,’angel_smile.gif’,’shades_smile.gif’,
‘cry_smile.gif’,’kiss.gif’
],
smiley_descriptions :
[
‘smiley’, ‘sad’, ‘wink’, ‘laugh’, ‘cheeky’, ‘blush’, ‘surprise’,
‘indecision’, ‘angel’, ‘cool’, ‘crying’, ‘kiss’
]
} );

//]]>
</script>

4.现在要做的就是把CKEDITOR.replace( ‘editor1’, 这个editor1替换成自己定义的文本域的id就ok了

现在在重新打开一下测试的页面，是不是发现textarea已经变成了一个UBB编译器啦

需要注意的是：这时候这个textarea已经不是一个文本域了，而是被替换成了一个编辑器

不能再使用window,getElementById(“editor1”).value;或者$(“#editor1”).val()这种方式来获得里面输入的值了

而是要使用

var oEditor = CKEDITOR.instances.editor1;

oEditor .getData();

这种方式来获取

设置通过oEditor .setData();来控制

随便输入几个文字，添加点样式，然后转换到源码模式，传说中的ubb代码就出现了~

最后，由于在我的项目中引用了很多js文件，而且都是必须的，然后不知道怎么滴。。CKEDITOR一直报错，而且还不止一个，怎么搞都不行

最后只能换了一个包试试，竟然神奇的可以用了，但是老是出现一个NotSupportedError错误，如图所示

CKEditor+SWFUpload实现功能较为强大的编辑器

唉，最后疯了直接在浏览器点了不在显示此消息。。。眼不见心不烦

希望有高手知道这是怎么回事，求教育！！

CKEditor的使用方法 http://www.linuxidc.com/Linux/2014-03/99201.htm

CKEditor协同KCFinder实现图片的远程管理和图文并茂的内容发布 http://www.linuxidc.com/Linux/2013-12/93827.htm

更多详情见请继续阅读下一页的精彩内容： http://www.linuxidc.com/Linux/2015-02/113063p2.htm

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

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

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

这时候就需要SWFUpload出场啦

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

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

SWFUpload 下载见本文第一页

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

1.swfupload.js

2.handlers.js

3.swfupload.swf

4.swfuploadbutton.swf

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

要注意路径的问题

引用完毕之后，是时候展现威力了！

在页面中添加几个必要的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: ‘插入图片(2 MB Max)’,
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之后就可以满足基本的需求了

在这里，我配置的接收异步上传的图片的页面为upload.ashx

在这个ashx中对上传的图片处理的流程如下：

context.Response.ContentType = “text/plain”;
HttpPostedFile file = context.Request.Files[“Filedata”];//接收到上传的图片
string fileName = string.Empty;
string fileExtension = string.Empty;
if (file != null)
{
fileName = Path.GetFileName(file.FileName);//获取图片名
fileExtension = Path.GetExtension(file.FileName);//获取扩展名
}
if (fileExtension == “.jpg”)
{
string saveDir = “/upload/” + DateTime.Now.Year + “/” + DateTime.Now.Month + “/” + DateTime.Now.Day + “/”;//根据当前年月日在upload文件夹中创建该图片的保存路径，便于管理
Directory.CreateDirectory(Path.GetDirectoryName(context.Server.MapPath(saveDir)));//创建路径
string fullDir = saveDir + GetMD5.GetFileMD5(file.InputStream) + fileExtension;//使用图片的md5作为该图片保存的名字
file.SaveAs(context.Server.MapPath(fullDir));
context.Response.Write(“ok;” + fullDir);//保存完毕之后将图片的路径返回
}

需要注意的几点是：

1.在服务器端保存文件一定要用绝对路径，如context.Server.MapPath(fullDir)

2.使用图片的md5值作为图片的名字，一来保证图片名不会重复，二来在用户上传同一张照片的时候可以将其覆盖

最后，功能比较完善的Ubb编辑器诞生了~~

不过由于编辑器可以转成源码模式

用户还是可以直接在源码模式下输入<,>这些符号

所以在后台接收用户输入的数据的时候

msg = msg.Replace(“<“, “&lt”).Replace(“>”, “&gt”);

需要对<,>进行替换

最后的最后~

在向用户展示信息的时候，需要把ubb代码转换成html，这样浏览器才能解析

提供一个写好的静态类，要用的时候将ubb代码传进去，返回的就是html代码

UbbHelper 下载见本文第一页

里面有挺多的问题，需要根据自己的需求更改代码

至此，大功告成！

CKEditor 的详细介绍：请点这里
CKEditor 的下载地址：请点这里

本文永久更新链接地址：http://www.linuxidc.com/Linux/2015-02/113063.htm

CKEditor+SWFUpload实现功能较为强大的编辑器

相关推荐

分类

其他操作

听说打赏我的人，都进福布斯排行榜啦！

支付宝扫一扫打赏

微信扫一扫打赏

QQ咨询

回顶部