网页的文本编辑器(可上传图片).doc

1.在新建网站中添加五个文件
Ckeditor----第三方控件，文本编辑器(去网上下载)
uploadImage----存放上传图片的文件夹
jquery,swfupload----JQuery脚本和上传flash控件(网上可下载)

2.将编辑器控件引用到工具箱中，然后把控件托到页面上

3.导入外部JS文件

4.根据帮助文档文件，编写一个JSupload.js文件,固定代码如下，主要用于文件的上传。
var swfu;
var file_id = ""; //最后一个入队的文件id
function fileQueued(file) {
file_id = file.id;
}
function uploadComplete(file) {
file_id = "";
closeD();
//插入图片
edi.insertHtml("<img src='uploadImage/" + file.name + "' />");
}
function uploadProgress(file, complete, total) {
var width = complete / total * 280;
document.getElementById("complete").style.width = width + "px";
}
function openD() {
var top = $(window).height() / 2 - $("#upload_form").height() / 2 + $(document).scrollTop();
var left = $(window).width() / 2 - $("#upload_form").width() / 2;
$("#upload_form").css({ top: top + "px", left: left + "px" });
$("#upload_form_bg").show();
$("#upload_form").show();
}
function closeD() {
$("#upload_form_bg").hide();
$("#upload_form").hide();
}
var edi = null;
window.onload = function () {
swfu = new SWFUpload({
upload_url: "GetUpload.aspx",
post_params: {
"ASPSESSID": "<%=Session.SessionID %>"
},
flash_url: "swfupload/swfupload.swf",
button_width: 160,
button_height: 22,
button_text: '<span class="button">Select Images <span class="buttonSmall">(2 MB Max)</span></span>',
button_placeholder_id: "iambutton",
button_text_style: '.button { font-family: Helvetica, Arial, sans-serif; font-size: 14pt; } .buttonSmall { font-size: 10pt; }',
button_image_url: "images/XPButtonNoText_160x22.png",
file_types: "*.jpg;*.gif;*.rar",
file_size_limit: 0,
//文件进入上传队列事件
file_queued_handler: fileQueued,
//单个文件上传完成事件
upload_complete_handler: uploadComplete,
//上传进度事件
upload_progress_handler: uploadProgress
});

document.getElementById("btnClose").onclick = function () {
closeD();
}
document.getElementById("btnOk").onclick = function () {
if (file_id != "") {
swfu.startUpload(file_id);
}
}

CKEDITOR.plugins.add("plugin_insert_image", {
init: function (editor) {
edi = editor;
editor.addCommand("button_insert_image_click", {
exec: function () {
openD();
}
})
editor.ui.addButton("button_insert_image", {
title: "插入图片",
icon: this.path + "images/icon_error.png",
command: "button_insert_image_click"
});
}
});
}

5.将JSupload导入

6. 在页面增加一个层，用于文件上传的对话框，HTML代码如下（在</form>标签之前：
<div id="upload_form_bg" class="form_bg"></div>
<div id="upload_form" class="form">
<h1 id="upload_form_title" class="form_title">插入图片</h1>
<div id="upload_form_content" class="form_content">
<div id="total" class="total_div"><div id="complete" class="complete_div"></div></div>
<span id="iambutton"></span>
<input type="button" value="确定" id="btnOk" />
<input type="button" value="关闭" id="btnClose" />
</div>
</div>
7. 为上传图片层添加样式，代码如下：
<style type="text/css">
*{ margin:0px; padding:0px;}
body{ font-size:12px; font-family:@Adobe 仿宋? Std R;}
.form{ z-index:2; border:1px solid #000; width:350px; height:200px; position:absolute; left:100px; top:100px; background:#fff; display:none;}
.form_title{ line-height:25px; font-size:12px; background:url(images/table_th.gif); text-indent:20px;}
.form_bg{ width:100%; height:100%; background:#000; position:absolute; top:0px; left:0px; opacity:0.5; z-index:1; display:none;}
.total_div{ width:280px; background:#ccc; line-height:20px; height:20px;}
.complete_div{ width:0px; background:yellow; line-height:20px; height:20px;}
</style>

8. 查看页面代码，在里面写一个方法EditorTools()，内容是定义编辑器的工具栏(根据帮助文档定义)。该方法在页面加载时执行。
protected void EditorTools()
{
CKEditorControl1.config.extraPlugins = "plugin_insert_image";
CKEditorControl1.config.toolbar = new object[]
{
new object[] { "Source", "-", "Save", "NewPage", "Preview", "-", "Templates" },
new object[] { "Cut", "Copy", "Paste", "PasteText", "PasteFromWord", "-", "Print", "SpellChecker", "Scayt" },
new object[] { "Undo", "Redo", "-", "Find", "Replace", "-", "SelectAll", "RemoveFormat" },
new object[] { "Form", "Checkbox", "Radio", "TextField", "Textarea", "Select", "Button", "ImageButton", "HiddenField" },
"/",
new object[] { "Bold", "Italic", "Underline", "Strike", "-", "Subscript", "Superscript" },
new object[] { "NumberedList", "BulletedList", "-", "Outdent", "Indent", "Blockquote", "CreateDiv" },
new object[] { "JustifyLeft", "JustifyCenter", "JustifyRight", "JustifyBlock" },
new object[] { "BidiLtr", "BidiRtl" },
new object[] { "Link", "Unlink", "Anchor" },
new object[] { "Image", "Flash", "Table", "HorizontalRule", "Smiley", "SpecialChar", "PageBreak", "Iframe" },
"/",
new object[] { "Styles", "Format", "Font", "FontSize" },
new object[] { "TextColor", "BGColor" },
new object[] { "Maximize", "ShowBlocks", "-", "About","button_insert_image" }
};
}
9. 上述的编辑器工具中包含一个自定义添加的一个按钮。添加按钮和按钮的图片在JSupload.js文件里面实现。按钮的图片必须在Ckeditor文件夹中的plugins文件内添加一个与你所添加的工具名一样。

在EditorTools方法中增加的工具名字也要一致。

10. 增加一个页面GetUpload.aspx，接收上传的图片，页面加载
protected void Page_Load(object sender, EventArgs e)
{
HttpPostedFile file = Request.Files["Filedata"];
file.SaveAs(Server.MapPath("") + "/uploadImage/" + file.FileName);
}
11. 运行结果如图

刷新uploadImage文件夹，可以看到上传的图片
得到文本类容
string Content = CKEditorControl1.Text;