第一步，引用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/