一、ckeditor富文本编辑器的使用

一、ckeditor富文本编辑器的使用

1.ckeditor富文本编辑器包的下载

ckeditor富文本编辑器包下载 提取码:2fht

2.ckeditor富文本编辑器的使用

	将该包复制到WebContent的根目录下。然后引入js。
	具体使用可以查看该包中的帮助文档。
	下面的例子只是富文本编辑器的一种使用方式

例子:

	1.引入富文本编辑器的所需的js、css
	2.给textarea元素添加class='ckeditor' 即可

inedx.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!--1.引入富文本编辑器的所需的js、css-->
<script src="./ckeditor/ckeditor.js"></script>
<link rel="stylesheet" href="./ckeditor/samples/sample.css">

</head>
<body>
<%if(request.getAttribute("content")!=null){
	out.write("content:");
} %>
${requestScope.content}

<form action="./dis" method="get">
		<!--2.给textarea元素添加class='ckeditor' 即可-->
		<textarea rows="10"  cols="10" class="ckeditor" name="content"></textarea>
		<input  type="submit" value="提交">
</form>
</body>
</html>

效果图:
在这里插入图片描述

发布了113 篇原创文章 · 获赞 0 · 访问量 1292

猜你喜欢

转载自blog.csdn.net/weixin_45602227/article/details/104419488