JavaWeb富文本编辑器与文件上传

時宜

已于 2022-04-08 16:01:19 修改

阅读量1.9k

点赞数 9

文章标签： eclipse tomcat java html

于 2022-04-08 15:55:19 首次发布

本文链接：https://blog.csdn.net/weixin_62270300/article/details/124039563

版权

本文介绍了在JavaWeb项目中如何使用富文本编辑器CKEditor，并详细讲解了文件上传的规则、案例及文件夹访问的配置，包括使用commons-fileupload组件进行文件上传的操作步骤和注意事项。

摘要由CSDN通过智能技术生成

一、富文本编辑器

富文本编辑器在项目中很常见，它可以将文本，图片等信息存入数据库，再编辑一些图文混排的信息的时候很有用，比如商城项目的商品详情页，包含很多带有样式的文字和图片。

接下来我们来看看用法吧！

1、下载富文本编辑器

首先先下载好富文本编辑器，官方链接如下：

CKEditor 4 Quick Start Guidehttps://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

点击进入页面根据上方提示下载好将文件解压

解压后的文件入下：

2、富文本编辑器的应用

将解压后的文件复制到webapp文件中

3、新建一个jsp页面，看看效果

界面效果如下：

界面代码如下：

实现富文本编辑器三步骤：

导入js
定义文本域文本域需要id
根据id生成对应的富文本编辑器

<%@ 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>
<%--导入js --%>
<script src="ckeditor/ckeditor.js"></script>
</head>
<body>
<h1>新闻增加界面</h1>

<form action="doAdd.jsp" method="post" enctype="multipart/form-data">
    <p><input type="text" name="title"></p>
    <%--定义文本域 文本域需要id --%>
    <p><textarea id="myEditor" type="text" name="content"></textarea></p>
    <p>
    <%--文件选择器 --%>
      <input type="file" name="myFile">
    </p>
    <button&