ueditor-Baidu visual editor is simple to use

1. ueditor is a visual editing tool for Baidu

2. ueditor official website address

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

3. Development step by step

1. Download the latest version of jsp from the official website

figure 1

2. Unzip the downloaded compressed file and change the folder name to "ueditor";

3. Create the "ueditorTest" project, and add the ueditor to the project;

4. The project directory is as follows

figure 2

5. Copy the jar in the ueditor\jsp\lib directory to the project lib directory (here is the jar for background configuration) , and then ueditor\jsp\lib can be deleted.

6. Create "ueditorTest.jsp" page test

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title> Presentation </ title>
	
	<!--The js that needs to be imported to use ueditor-->
	<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>
	<!-- The container that loads the editor-->
    	<script id="container" name="content" type="text/plain"> </script>
	<script type="text/javascript">
		//<!-- Instantiate the editor -->
		var ue = UE.getEditor('container');
		
    	function test(){
    		//Get html content, return: <p>hello</p>
   			var html = ue.getContent();
   		 	//Get plain text content, return: hello
			var txt = ue.getContentTxt();
			
			alert(html);
			alert(txt);
    	}
	</script>
	
	<input type="button" value="测试" name="ceshi" onClick="test();"/>
</body>
</html>

Effect picture:

image 3

illustrate:

1. The storage path of uploaded pictures, attachments and screenshots is configured in "ueditor/jsp/config.json". If there is no configuration, a directory will be automatically created under the project according to the default configuration;

2. "ueditor\jsp\controller.jsp" is the entry for the ueditor configuration item;

3. ueditor\jsp\lib stores the jar configured in the background, and the jar in this directory must be used in the project;

5. Tips for using ueditor

1. Set some initial values when instantiating

// instantiate the editor
var ue = UE.getEditor('content',{
	initialFrameWidth :590,//Set the editor width
	initialFrameHeight:400,//Set the editor height
	scaleEnabled:false
});

2. Direct assignment

<!--The editor must be initialized in js-->
<td align="left" colspan="3">
	<script id="content" name="content" type="text/plain">
		${news.content}
	</script>	 			
</td>

3. Turn off editing its automatic growth, and change autoHeightEnabled: true to false in the ueditor.config.js configuration file . Image 6

ueditor-Baidu visual editor is simple to use

Guess you like