ueditor-百度可视化编辑器简单使用方法

1、ueditor是百度可视化编辑工具

 

2、ueditor官网地址

    http://ueditor.baidu.com/website/index.html

 

3、开发步逐

    1、在官网上下载最新版本的jsp版本

ueditor-百度可视化编辑器简单使用方法_第1张图片图1


    2、将下载的压缩文件解压,改文件夹名称为“ueditor”;

    3、创建“ueditorTest”项目,ueditor添加到项目中;

    4、项目目录如下

ueditor-百度可视化编辑器简单使用方法_第2张图片
 图2

    5、将ueditor\jsp\lib目录下的jar复制到项目lib目录下(这里是做后台配置的jar),然后ueditor\jsp\lib可以删除。

    6、创建”ueditorTest.jsp“页面测试

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>提示</title>
	
	<!--使用ueditor需要导入的js-->
	<script type="text/javascript" src="common/js/ueditor/ueditor.config.js"></script>
	<script type="text/javascript" src="common/js/ueditor/ueditor.all.min.js"></script>
	<script type="text/javascript" src="common/js/ueditor/lang/zh-cn/zh-cn.js"></script>
	
	<style type="text/css">
	    #div_1 {
			border: thin none #069;
			padding: 1px;
			float: none;
			width: 500px;
			height: 300px;
			background-color: #9C6;
		}
    </style>
</head>
<body>
	<div id="div_1">
		<!-- 加载编辑器的容器 -->
    	<script id="container" name="content" type="text/plain"> </script>
	</div>
	
    
	<script type="text/javascript">
		//<!-- 实例化编辑器 -->
		var ue = UE.getEditor('container');
		
    	function test(){
    		//获取html内容,返回: <p>hello</p>
   			var html = ue.getContent();
   		 	//获取纯文本内容,返回: hello
			var txt = ue.getContentTxt();
			
			alert(html);
			alert(txt);
    	}
	</script>
	
	<input type="button" value="测试" name="ceshi" onClick="test();"/>
</body>
</html>

   

    效果图:

图3 

    说明:

          1、上传图片、附件、截图存放路径在“ueditor/jsp/config.json”配置,如果没有配置会根据默认配置在工程下自动创建目录;

          2、"ueditor\jsp\controller.jsp",为ueditor配置项入口;

          3、ueditor\jsp\lib存放后台配置的jar,使用是须将该目录下的jar负责到项目中;

你可能感兴趣的:(ueditor)