首先下载htmleditor所依赖的图形化编辑框架文件GEF，下载地址
http://www.eclipse.org/gef/downloads/index.php ，此处下载最新版GEF-ALL-3.8.1.zip.
接着下载htmleditor插件，地址在
http://sourceforge.jp/projects/amateras/releases/#16537
下载最新版本：tk.eclipse.plugin.htmleditor_2.2.0。
在D:\eclipse\dropins下新建文件夹GEF-ALL-3.8.1，将下载的GEF-ALL-3.8.1下的features和plugins文件夹解压到新建的文件夹里，再把下载的
tk.eclipse.plugin.htmleditor_2.2.0.jar文件放到D:\eclipse\dropins下，重启eclipse就可以了！
附：CSS样式表等的打开方式可能默认不是Eclipse HTML Editor，只需要在菜单栏里的Windows-Preferences-General-Editors-Files Associations里，找到相应的扩展名，在下面选择对应的编辑器，右边点Default就好了。
附：
Eclipse HTML编辑器插件主要提供以下功能：
- HTML/JSP/XML/CSS/DTD/JavaScript语法高亮
- HTML/JSP预览
- JSP/XML验证
- HTML标签，基于DTD的XML，以及JSP标签的内容输入补全
- HTML/JSP/XML创建向导
1、首先在需要嵌入得位置加入以下html代码。2、其次所有需要提交的内容都放在一个表单里面，同样利用object调用的编辑器也放在这个表单里面，同时可以设置一个隐藏的文本区域(或)用以在提交的时候临时保存html在线编辑器的数据。
3、然后点击插入图片的按钮时弹出一个上传图片的窗口，利用自己写的程序来实现上传本机图片到服务器上，需要记录图片的路径，通过html在线编辑器的值中加入显示图片的html标签。
4、在添加的时候将HTML在线编辑器来修改数据提交到数据库后还需要能将数据库的内容用HTML在线编辑器来修改数据。
最近用Extjs做项目，用到htmleditor控件，唯一的缺陷是不可以上传图片，为了以后方便，在基于htmleditor控件上写了一个支持上传图片的。
控件StarHtmleditor
/**
* 重载EXTJS-HTML编辑器
*
* @class HTMLEditor
* @extends Ext.form.HtmlEditor
* @author wuliangbo
*/
HTMLEditor = Ext.extend(Ext.form.HtmlEditor, {
addImage : function() {
var editor = this
var imgform = new Ext.FormPanel({
region : 'center',
labelWidth : 55,
frame : true,
bodyStyle : 'padding:5px 5px 0',
autoScroll : true,
border : false,
fileUpload : true,
items : [{
xtype : 'textfield',
fieldLabel : '选择文件',
name : 'userfile',
inputType : 'file',
allowBlank : false,
blankText : '文件不能为空',
height : 25,
anchor : '90%'
}],
buttons : [{
text : '上传',
type : 'submit',
handler : function() {
if (!imgform.form.isValid()) {return}
imgform.form.submit({
waitMsg : '正在上传',
url : 'Default.aspx',
success : function(form, action) {
var element = document.createElement("img")
element.src = action.result.fileURL
if (Ext.isIE) {
editor.insertAtCursor(element.outerHTML)
} else {
var selection = editor.win.getSelection()
if (!selection.isCollapsed) {
selection.deleteFromDocument()
}
selection.getRangeAt(0).insertNode(element)
}
win.hide()
},
failure : function(form, action) {
form.reset()
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox.alert('警告',
action.result.errors.msg)
}
})
}
}, {
text : '关闭',
type : 'submit',
handler : function() {
win.close(this)
}
}]
})
var win = new Ext.Window({
title : "上传图片",
width : 300,
height : 200,
modal : true,
border : false,
iconCls : "picture.png",
layout : "fit",
items : imgform
})
win.show()
},
createToolbar : function(editor) {
HTMLEditor.superclass.createToolbar.call(this, editor)
this.tb.insertButton(16, {
cls : "x-btn-icon",
icon : "picture.png",
handler : this.addImage,
scope : this
})
}
})
Ext.reg('StarHtmleditor', HTMLEditor)
页面js代码
Ext.onReady(function() {
Ext.QuickTips.init()
Ext.form.Field.prototype.msgTarget = 'side'
var ff = new Ext.FormPanel({
title : "文件上传",
renderTo : document.body,
width : 600,
height : 480,
labelWidth : 55,
frame : true,
items : [{
xtype : "textfield",
name : "title",
fieldLabel : "标题",
anchor : "98%"
}, {
xtype : "combo",
name : "topic_id",
fieldLabel : "所属栏目",
anchor : "98%"
}, {
xtype : "textfield",
name : "keywords",
fieldLabel : "关键字",
anchor : "98%"
}, {
xtype : "StarHtmleditor",
name : "content",
fieldLabel : "内容",
anchor : "98%"
}]
})
})
后台代码简单实现了一下
protected void Page_Load(object sender, EventArgs e)
{
string fileName = string.Empty
string fileURL = string.Empty
string rt = string.Empty
try
{
HttpPostedFile file = Request.Files[0]
fileName = GetFileName(file.FileName)
file.SaveAs(Server.MapPath("upload//") + fileName)
fileURL = "upload/" + fileName
rt = "{success:'true',fileURL:'" + fileURL + "'}"
}
catch
{
rt = "{success:'false',fileURL:'" + fileURL + "'}"
}
Response.Write(rt)
}
private string GetFileName(string FullName)
{
string fileName = string.Empty
int last = FullName.LastIndexOf(@"/")
fileName = FullName.Substring(last + 1, FullName.Length - last - 1)
return fileName
}
实现效果如下
http://blog.csdn.net/zhaozhen1984/article/details/5911839
原文链接请查看谢谢。
http://www.cnblogs.com/wuliangbo/archive/2009/03/08/1406460.html
详查链接。谢谢。
