在线html编辑器HtmlArea的使用

在线html编辑器---HtmlArea(2007-05-24 12:02:57)

分类：Js+Ajax

在工作中才能提高啊,一直苦苦想解决办法的编辑器,今天问同事才知道如此简单那,就是用一个编辑器!不知道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>

  <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();
     }
     </script>
    </div>
    <div class="clear"></div>
    <div class="line mg10"></div>
    <div class="clear"></div>
    <div class="anniu">
     <ul>
      <li><img name="public" id="public" src="<%=Constant.SQUIDHOST%>/images/blog_back/fabu_anniu.gif" alt="" onclick="check_article();" /></li>
      <% if(article.getDeleteFlag()==2||article.getDeleteFlag()==0){ %><li><img src="<%=Constant.SQUIDHOST%>/images/blog_back/baocun_anniu.gif" id="caogao" name="caogao" onclick="save_article();" /></li><% } %>
      <div class="clear"></div>
     </ul>
    </div>
    <div class="clear"></div>
    </form>
   </div>

</body>
</html>