如何配置一个最基本的web富文本编辑器？--之wangEditor（验证成功）

 

第一步，引用wangEditor的css文件，css文件最好在<head>中引用

<link rel="stylesheet" type="text/css" href="css/wangEditor-1.3.0.min.css">

 

第二步，引用jquery和wangEditor.js，js文件最好在<body>最下方引用

<script type="text/javascript" src='js/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src='js/wangEditor-1.3.0.min.js'></script>

 

第三步，配置富文本框。

<script type="text/javascript">
    $(function(){
        $('#textarea1').wangEditor();
    });
</script>

一个完整的配置实例：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
   <!-- 5.29:wangEditor富文本编辑器：测试成功! -->
  <link rel="stylesheet" type="text/css" href="wangEditor/css/wangEditor-1.3.0.min.css">
    <title>发帖</title>
    
   </head>
    <body>
    
    <form name="myForm" action="ArticleManage.action"  method="post">  
       标题: <input type="text" name="title" size="32">（限输入15个文字）<br> 
      <!--  5.16加个id属性 -->
       内容：<textarea rows="10" id="editor" cols="25" name="content" ></textarea>
        <input type="submit"  value="提交"> 
        <input type="reset"  value="重置"> 
    </form> 
 <script type="text/javascript" src='wangEditor/js/jquery-1.10.2.min.js'></script>
<script type="text/javascript" src='wangEditor/js/wangEditor-1.3.0.min.js'></script> 
<script type="text/javascript">
    $(function(){
        $('#editor').wangEditor();
    });
</script>
 </body>
</html>

 

   我已15年5月30日用了该文本编辑器，并配置成功（struts等其他框架标签的textarea里没配置成功）。即只适用于普遍的HTML的textarea标签中使用

  以上demo是wangEditor的最基本应用。引用css和js文件，为textarea执行一个wangEditor()方法，即可生成富文本框。

  效果展示：

更多配置请参见：文档说明

或http://www.wangeditor.com/doc.html及http://www.wangeditor.com/

posted @ 2015-05-30 18:19  92浩荡天  阅读(4966)  评论(3)  编辑  收藏  举报