哈喽,大家好,我今天给大家带来了一个富文本编辑器的使用,也就是如何在你的文本应用中使用富文本编辑器,我是使用的是CKeditor ,下面,就跟我一起去学习吧
一,为什么要使用富文本编辑器
富文本编辑器(Rich Text Editor,RTE)是一种可内嵌于浏览器,所见即所得的文本编辑器。它提供类似于Office Word 的编辑功能,方便那些不太懂HTML用户使用,富文本编辑器的应用非常广泛,在一些情况下,用户不好编辑增加需要的文字,使用就需要富文本自编辑器来提升用户体验!
二,常用的富文本编辑器
- TinyMCE是一个开源的所见即所得的HTML编辑器,界面相当清新,界面模拟本地软件的风格,顶部有菜单栏。支持图片在线处理,插件多,功能非常强大,易于集成,并且拥有可定制的主题。支持目前流行的各种浏览器,它可以达到微软Word类似的编辑体验。
- Ckeditor也是一款非常经典的富文本编辑器,官方下载量过千万。Ckeditor有高性能的实时预览,它特有行内编辑功能,使得编辑内容更加直观,仿佛是在编辑网页一样,有很强的可扩展性,被各大网站广泛运用。
- UEditor是由百度出品的富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源免费。这款编辑器用过的人也非常多,功能非常全面,插件很多,还可以很方便插入百度地图,接入十分简单。
- ** KindEditor**历史也很长了,用户数也不少,国内某公司出品。免费开源。界面类似于office
word,界面和功能中规中矩,文档齐全,使用还算方便。
- WangEditors轻量级,小巧实用,配置方便,使用简单。可以自定义皮肤功能,免费开源。用户数量也很多,尤其是用在一些轻型环境,比如论坛社区回帖。wangEditor是国人出品的开源项目。
三,使用CKeditor
-
首先导入CKeditor
将你下载的CKeditor解压copy进你的项目
-
导入jar包(也可以自己写)
完成后是这样的
-
开始写代码
- indext.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>新闻系统</title>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加页面</h1>
<from action="doAdd.jsp" method="post" enctype="multipart/form-data">
<p>
<input tyep