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

最新推荐文章于 2024-08-28 16:55:32 发布

王真教掌门

最新推荐文章于 2024-08-28 16:55:32 发布

阅读量724

点赞数 5

文章标签： java html

本文链接：https://blog.csdn.net/WZJ278/article/details/124055299

版权

一、富文本编辑器

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

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

下载富文本编辑器

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

https://ckeditor.com/docs/ckeditor4/latest/guide/dev_installation.html

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

解压后的文件入下：

富文本编辑器的应用

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

新建一个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>