web富文本编辑器
哈喽,大家好,我今天给大家带来了一个富文本编辑器的使用,也就是如何在你的文本应用中使用富文本编辑器,我是使用的是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="text" name="titli">
</p>
<p>
<textarea name="content" id="MyEditor"> </textarea>
</p>
<p>
<input type="file">
</p>
<button>提交</button>
</from>
<script>
CKEDITOR.replace('MyEditor');
</script>
</body>
</html>
- 处理-doAdd.jsp
<%@page import="java.io.File"%>
<%@page import="java.util.UUID"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%@ page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/**String title = request.getParameter("title");
String content = request.getParameter("content");
out.print(content);
**/
// 通过tomcat去上传图片
// 用轮子 jar 文件上传的jar
// 1. smartUpload (已经停止更新n年了)
// 2. commons fileUpload
// 为基于磁盘的文件项创建工厂
// 接收到你的图片,将图片存到电脑磁盘上
DiskFileItemFactory factory = new DiskFileItemFactory();
// 创建一个新的文件上传处理程序
ServletFileUpload upload = new ServletFileUpload(factory);
// 设置整体请求大小限制
// upload.setSizeMax(1024*5);//5mb
// 让处理程序去解析请求中的数据
List<FileItem> items = upload.parseRequest(request);
// 在List中有普通的数据,文件数据
String title = "";
String content = "";
String newName = "";
for (FileItem item : items) {
// item有可能是文件,普通数据
if (item.isFormField()) {//是不是普通数据
System.out.println("普通:");
// title,content
String name = item.getFieldName();//表单中的name
String value = item.getString("utf-8");//对应的值
System.out.println("\t" name);
System.out.println("\t" value);
//需要进行判断取值
if (name.equals("title")) {
title = value;
}
if (name.equals("content")) {
content = value;
}
} else {
System.out.println("文件:");
//myFile
String name = item.getFieldName();//表单中的name
String oldName = item.getName();//文件名字
System.out.println("\t" name);
System.out.println("\t" oldName);
//生成一个新的名字: 不重复
newName = UUID.randomUUID().toString().replace("-", "");
//生成动态的后缀名
// a.png -> .png
// f.jpg -> .jpg
// 2022040.13.5221.mp4
// [2022040,13,5221,mp4]
String[] strings = oldName.split("\\.");
// id.jpg
newName = "." strings[strings.length - 1];
//保存到本地
item.write(new File("E:\\code Resources\\icons\\upload\\" newName));
}
}
//打印一下
out.println(title);
out.println(content);
//打印一下
out.println(title);
out.println(content);
//图片上传的本质
// 自己的电脑 -> 服务器的电脑
// 文件是保存在服务器?还是数据库呢?
// 用户怎么区分自己的数据呢?
// 1.将图片保存到硬盘中
// 2.将图片的路径存到数据库
// 我只要吧文件夹映射到服务器中,用户就可以访问那张保存的图片
// 我把文件夹映射到服务器中,它的路径是/images
out.print("<img src='https://blog.csdn.net/upload/" newName "'>");
%>
四,CKeditor的下载
提供一个CKeditor4的下载地址
CKeditor 点击下载
五,映射
概念:把文件夹映射到服务器中,让用户可以在浏览器中通过文件夹映射后的路径来访问图片
具体操作:
在eclipse中双击服务器到如 下界面,再点击红色框按钮,分别填入要映射的电脑磁盘中的文件夹的路径和映射后的路径名称:
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhfejbia
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24