在JavaWeb中使用wangEditor3简单案例

介绍

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包解压放入项目根目录

在JavaWeb中使用wangEditor3简单案例_第1张图片

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

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<html>
<head>
    <meta charset="UTF-8">
    <title>wangEditor demotitle>
    <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>wangEditorb> 富文本编辑器p>
    div>
    <input type="hidden" name="text.value" id="txt"/>
    <button>sssbutton>
    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"%>

<html>
  <head>
    <title>My JSP 'demo.jsp' starting pagetitle>
    <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">
    
<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
在JavaWeb中使用wangEditor3简单案例_第2张图片
demo.jsp
在JavaWeb中使用wangEditor3简单案例_第3张图片

结束

更多功能请阅读官方文档,共勉!

你可能感兴趣的:(java)