ueditor简单使用

下载ueditor1_4_3的jsp版本,新建maven的web项目并导入ueditor,在项目中新建index.jsp如下

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>

	<script type="text/javascript" src="<%=basePath%>ueditor1_4_3/ueditor.config.js"></script>
	<script type="text/javascript" src="<%=basePath%>ueditor1_4_3/ueditor.all.js"></script>
	<script type="text/javascript" src="<%=basePath%>ueditor1_4_3/lang/zh-cn/zh-cn.js" charset="utf-8"></script>

</head>
<body>

	<form action="server.php" method="post">
		<!-- 加载编辑器的容器 -->
    	<script id="container" name="content" type="text/plain">
    	</script>
    </form>
    
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
        	//UEDITOR_HOME_URL:
        	toolbars: [
     	            [
     	             'fullscreen', 
     	             'source',
     	             '|', 
     	             'bold', 
     	             'italic', 
     	             'underline',
     	             'blockquote',
     	             '|',
     	             'forecolor',
     	             'backcolor',
     	             'insertorderedlist',
     	             'insertunorderedlist',
     	             'paragraph',//段落格式
     	             'fontfamily', //字体
     	             'fontsize', //字号
     	             'justifyleft', //居左对齐
     	             'justifycenter', //居中对齐
     	             'justifyright', //居右对齐
     	             'link', //超链接
     	             'unlink', //取消链接
     	             '|'
     	             ],
     	             [
					  'insertimage', //插入图片
					  'insertcode', //代码语言
					  'horizontal', //分隔线
					  'inserttable', //插入表格
					  '|',
					  'help' //帮助
     	             ]
     	    ],
     	   labelMap:{
               'anchor':'', 'undo':''
           },
           'fontsize':[10, 11, 12, 14, 16, 18, 20, 24],
           contextMenu:[],
     	   autoHeightEnabled: true,
     	   autoFloatEnabled: true
        });
    </script>
</body>
</html>

上传图片需要修改配置文件config.json如下

"imageUrlPrefix": "/ueditor", /* 图片访问路径前缀 */

maven的pom.xml如下

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
  <modelVersion>4.0.0</modelVersion>
  
  <groupId>com.leech</groupId>
  <artifactId>ueditor-demo</artifactId>
  <packaging>war</packaging>
  <version>0.0.1-SNAPSHOT</version>
  
  <name>ueditor-demo Maven Webapp</name>
  
  <dependencies>
    <dependency>
      <groupId>junit</groupId>
      <artifactId>junit</artifactId>
      <version>4.11</version>
      <scope>test</scope>
    </dependency>
    
    <dependency>
	  <groupId>commons-codec</groupId>
	  <artifactId>commons-codec</artifactId>
	  <version>1.9</version>
	</dependency>
    
    <dependency>
	  <groupId>commons-fileupload</groupId>
	  <artifactId>commons-fileupload</artifactId>
	  <version>1.3.1</version>
	</dependency>
    
    <dependency>
	  <groupId>commons-io</groupId>
	  <artifactId>commons-io</artifactId>
	  <version>2.4</version>
	</dependency>
    
    <!-- <dependency>
	  <groupId>org.json</groupId>
	  <artifactId>json</artifactId>
	  <version>20141113</version>
	</dependency> -->
	
	<dependency>
	  <groupId>com.baidu</groupId>
	  <artifactId>ueditor</artifactId>
	  <version>1.1.1</version>
	</dependency>
    
  </dependencies>
  
  <build>
    <finalName>ueditor-demo</finalName>
  </build>
  
</project>


你可能感兴趣的:(ueditor)