jsp引用KindEditor将多行文本框变成编译器

KindEditor下载

1.下载后,引入到web项目中的webContent中。
jsp引用KindEditor将多行文本框变成编译器_第1张图片
2.当你导入后,jsp中的两个页面可能会报错。
在这里插入图片描述
3.找到jsp下的lib包将这三个jar 导入到项目中就可以了。(右键选中–>build path–>add to build path)
jsp引用KindEditor将多行文本框变成编译器_第2张图片
4.引入到我们的jsp页面。

<script type="text/javascript" src="kindeditor-4.1.10/kindeditor.js"></script>
<script type="text/javascript">
	KindEditor.ready(function(K) {
     
		K.create('#content', {
     
			uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',
			fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',
			allowFileManager : true
		});
	});
</script>

5.改一下多行文本域的id为content就可以了。

<textarea id="content" name="newscontent" rows=" 8" cols="70"></textarea>

6.效果截图:
jsp引用KindEditor将多行文本框变成编译器_第3张图片
7.页面代码:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加新闻</title>
<script type="text/javascript" src="kindeditor-4.1.10/kindeditor.js"></script>
<script type="text/javascript">
	KindEditor.ready(function(K) {
     
		K.create('#content', {
     
			uploadJson : 'kindeditor-4.1.10/jsp/upload_json.jsp',
			fileManagerJson : 'kindeditor-4.1.10/jsp/file_manager_json.jsp',
			allowFileManager : true
		});
	});

</script>
</head>
<body>
	<form method="post">
		<input type="text" name="newsTitle" placeholder="请输入标题"/><br/>
		新闻栏目
		<select>
			<option value="JQuery">jQuery</option>
			<option value="Java">Java</option>
			<option value="MySQL">MySQL</option>
		</select><br/>
		<textarea id="content" name="newscontent" rows=" 8" cols="70"></textarea>
	</form>
</body>
</html>

你可能感兴趣的:(Java,Web)