在线html编辑器---HtmlArea的使用

在线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;width: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>
  

<div class="clear"></div>
  </div>


</body>
</html>

你可能感兴趣的:(html)