在线html编辑器---HtmlArea(2007-05-24 12:02:57)
在工作中才能提高啊,一直苦苦想解决办法的编辑器,今天问同事才知道如此简单那,就是用一个编辑器!不知道sina这个文本编辑器是用的自己开发的还是开源的,下面介绍下htmlarea...
1.将htmlarea放到你的目录里
2.添加一段js,增加一个函数
var editor = null;
function initEditor(){
editor = new HTMLArea("content");//内容
editor.generate();
}
3.在body的onload时间中加载initEditor();
4.表单的onsubmit事件调用this("content").value=editor.getHTML();
给出一个例子:
<%@ page language="java" contentType="text/html; charset=UTF-8" %>
<%@ page import="util.Constant" import="ent.javabean.BlogInfo" import="ent.javabean.Article" %>
<%@ page import="java.util.List" import="ent.javabean.Type" import="java.util.Iterator" %>
<%
BlogInfo ent = (BlogInfo)request.getAttribute("ent");
Article article = (Article)request.getAttribute("article");
List list = (List)request.getAttribute("ts");
Iterator it = list.iterator();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>企业博客</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="<%=Constant.SQUIDHOST %>/js/ent.js"></script>
<link rel="stylesheet" type="text/css" href="<%=Constant.SQUIDHOST%>/css/global.css" />
<link rel="stylesheet" type="text/css" href="<%=Constant.SQUIDHOST%>/css/ent/blog_back.css" />
<script>
_editor_url = "<%=Constant.ENTHOST %>/webapp/jsp/ent/htmlarea/";
_editor_lang = "zh-cn-utf8";
</script>
<script>
if(window.top==window){
window.location.href = "<%=Constant.ENTHOST %>/MainCtrl?page=LoadBlogMainPage&right=art_pub";
}
</script>
</head>
<body onload="initEditor();">
<div class="col707">
<div class="col707_top"></div>
<div class="con2 h1">
<form name="article_form" id="article_form" action="TranslateCtrl" method="post" >
<input type="hidden" name="id" id="id" value="<%=article==null?0:article.getId() %>" />
<input type="hidden" name="page" id="page" value="EditArticlePage" />
<input type="hidden" name="item" id="item" value="article" />
<input type="hidden" name="path" id="path" value="<%=Constant.ENTHOST %>" />
<h2>发布文章</h2>
<div class="part">
<div class="l">文章标题：</div>
<% String title = article==null?null:article.getTitle(); %>
<div class="r">
<input type="text" name="article_title" id="article_title" size="40" maxlength="20" value="<%=title==null?"请输入标题":title %>" onclick="set_value('请输入标题',this);" />
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="part">
<div class="l">所属栏目：</div>
<div class="r">
<select name="tid">
<%
while(it.hasNext()){
Type type = (Type)it.next();
%>
<option value="<%=type.getId() %>" <% if(article.getType()==type.getId()){ %>selected<% } %>><%=type.getName() %></option>
<% } %>
</select>
</div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div style="text-align:left;630px;margin:10px auto">文章内容：</div>
<div class="fabu">
<% String content = article==null?"":(article.getContent()==null?"":new String(article.getContent())); %>
<textarea name="article_content" id="article_content" class="inputstyle2"><%=content %></textarea>
<script type="text/javascript" src="<%=Constant.ENTHOST %>/webapp/jsp/ent/htmlarea/htmlarea.js"></script>
<script>
var editor = null;
function initEditor() {
editor = new HTMLArea("article_content");
editor.generate();
}