在JavaWeb中使用wangEditor3简单案例

来源：互联网发布：淘宝客服发的红包编辑：程序博客网时间：2024/05/20 02:27

介绍

wangEditor是一款基于javascript和css开发的 Web富文本编辑器，有轻量、简洁、易用、开源免费等优点。
官网：www.wangeditor.com
文档：www.kancloud.cn/wangfupeng/wangeditor3/332599
源码：github.com/wangfupeng1988/wangEditor
下载链接：github.com/wangfupeng1988/wangEditor/releases

开始

1.新建项目（使用的是struts2，配置不再赘述），将下载好的wangEditor包解压放入项目根目录

这里写图片描述

2.新建index.jsp页面将工具包中 release 文件夹下的 wangEditor.min.js或 wangEditor.js 引入到jsp页面中。index.jsp如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>wangEditor demo</title>    <script src="${pageContext.request.contextPath}/js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script></head><body>    <form action="sys.action" method="post" id="form">    <div id="editor">        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>    </div>    <input type="hidden" name="text.value" id="txt"/>    <button>sss</button>    </form>    <script type="text/javascript" src="${pageContext.request.contextPath}/wangEditor-3.0.8/release/wangEditor.js"></script>    <script type="text/javascript">        var E = window.wangEditor        var editor = new E('#editor')        // 或者 var editor = new E( document.getElementById('#editor') )        editor.create();        $("button").click(function(){            var html= editor.txt.html();            var text=editor.txt.text();            $("#txt").val(html);            $("#form").submit();        })    </script></body></html>

demo.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>My JSP 'demo.jsp' starting page</title>    <meta http-equiv="pragma" content="no-cache">    <meta http-equiv="cache-control" content="no-cache">    <meta http-equiv="expires" content="0">        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="This is my page">    <!--    <link rel="stylesheet" type="text/css" href="styles.css">    --><style type="text/css">        /* table 样式 */table {  border-top: 1px solid #ccc;  border-left: 1px solid #ccc;}table td,table th {  border-bottom: 1px solid #ccc;  border-right: 1px solid #ccc;  padding: 3px 5px;}table th {  border-bottom: 2px solid #ccc;  text-align: center;}/* blockquote 样式 */blockquote {  display: block;  border-left: 8px solid #d0e5f2;  padding: 5px 10px;  margin: 10px 0;  line-height: 1.4;  font-size: 100%;  background-color: #f1f1f1;}/* code 样式 */code {  display: inline-block;  *display: inline;  *zoom: 1;  background-color: #f1f1f1;  border-radius: 3px;  padding: 3px 5px;  margin: 0 3px;  font-family: "Courier New", Courier, monospace;}pre code {  display: block;}/* ul ol 样式 */ul, ol {  margin: 10px 0 10px 20px;}    </style>  </head>  <body>    <div>    ${text.value}    </div>  </body></html>

在action中将编辑器中的值传入demo.jsp中

package base;import vo.Text;public class TextAction {    private Text text;    public String sys(){        System.out.println(text.getValue());        return "success";    }    public Text getText() {        return text;    }    public void setText(Text text) {        this.text = text;    }}

效果

index.jsp
这里写图片描述
demo.jsp

结束

更多功能请阅读官方文档，共勉！

阅读全文

1 0