javaWeb富文本编辑器&文件上传功能

富文本编辑器

简介: 富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于word 文档的编辑功能,富文本编辑器的应用非常广泛
常见的富文本编辑器: TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。 Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。 UEditor是由百度出品的富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源免费。这款编辑器用过的人也非常多,功能非常全面,插件很多,还可以很方便插入百度地图,接入十分简单。 KindEditor历史也很长了,用户数也不少,国内某公司出品。免费开源。界面类似于office word,界面和功能中规中矩,文档齐全,使用还算方便。 WangEditors轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。
下载地址 https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

使用步骤

下载好富文本编辑器解压引入到javaWeb项目中

引入代码

文件上传功能

先导入jar包

新闻增加页面,代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻增加界面</title>
<!-- 先将下载后的富文本编辑器文件夹复制到项目的webapp目录下,再: -->
<!-- 1.导入src:ckeditor目录下面的ckeditor.js -->
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>
	<%--
	文件上传中表单必须注意的规则:
    	1. 必须是post method="POST"
   	 	2. 必须是多段式表单 enctype="multipart/form-data"
   	 但是多段式表单出现中文乱码情况时不能用request.getCharacterEncoding()来解决
   	 ,因为这种方法只对普通表单有用,对于多段式表单,可以使用破碎重组
	--%>
	<form action="doAdd1.jsp" method="post" enctype="multipart/form-data">
		<p><input type="text" name="title"></p>
	<p>
		<!-- 2.定义文本域,具备id -->
		<textarea name="content" id="myEditor"></textarea>
	</p>
		<%--文件选择器--%>
        <input type="file" name="myFile">
	<button>提交</button>
	</form>
	<script>
		//根据id生成富文本编辑器
		CKEDITOR.replace(myEditor);
	</script>
</body>
</html>

doAdd.jsp新闻添加处理页面

经验分享 程序员 微信小程序 职场和发展