1.编写HTML部分
<h2>文章发布</h2>
文章标题 <input id="t" placeholder="文章标题" style="width:400px;" /><br /><br />
文章积分 <input id="ss" placeholder="文章积分" value="30" /><br /><br />
文章封面
<input type="file" id="fm" onchange="showPic()" /><br /><br />
<img id="fmpic" width="300" /><br /><br />
文章内容
<div style="border:2px solid black;padding:10px">
<button onclick="jiaCu()">加粗</button>
选择颜色 <input type="color" id="c" onchange="changeColor()" />
上传图片 <input type="file" id="f" onchange="addPic()" />
上传视频 <input type="file" id="v" onchange="addVideo()" />
<button>文字变红</button>
<button onclick="juzhong('left')">左对齐</button>
<button onclick="juzhong('right')">右对齐</button>
<button onclick="juzhong('center')">居中</button>
字体大小:<select onchange="changeFontSize()" id="s">
<option value="10">10px</option>
<option value="12">12px</option>
<option value="14">14px</option>
<option value="16">16px</option>
<option value="18">18px</option>
<option value="20">20px</option>
<option value="24">24px</option>
<option value="28">28px</option>
<option value="32">32px</option>
<option value="40">40px</option>
<option value="50">50px</option>
</select>
<br /><br />
<div id="d1"
onkeyup="saveContent()"
contenteditable
style="overflow:auto;outline:none;padding:10px;width:1000px;height:300px;border: 1px solid #999">
</div>
</div>
<div id="pic_menu" style="cursor:pointer;color:white;font-size:12px;background:orange;display:none;position:absolute;left:0px;top:0px;">
<div onclick="changePicWidth()">调整大小</div>
<!--这三个可以自己试试编写-->
<div>设置透明度</div>
<div>旋转</div>
<div>设置提示文字</div>
</div>
<br /><br />
<button onclick="save()">发布</button>
2.编写js部分
let currentImg;
let pic_src;
function addVideo(){
let req = new XMLHttpRequest();
req.open("post","http://localhost:8084/wechat/upload");
const formdata = new FormData();
formdata.append("file",v.files[0]);
req.upload.onprogress = function(e){
console.log(e);
};
req.send(formdata);
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200){
video_src = req.responseText
const range = window.getSelection().getRangeAt(0);
const video = document.createElement("video");
video.style.width = "300px";
video.autoplay = "autoplay";
video.muted = true;
video.controls = "controls";
video.src = "http://localhost:8084/wechat/find_img?fileName="+video_src
range.insertNode(video);
}
}
}
function save(){
let req = new XMLHttpRequest();
req.open("post","http://localhost:8080/wechat/add_article");
req.setRequestHeader("content-type","application/json;charset=utf-8")
req.send(JSON.stringify({
title:t.value,
content:d1.innerHTML,
pic:pic_src,
score:ss.value
}));
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200){
alert(req.responseText)
}
}
}
let video_src;
function showPic(){
const reader = new FileReader();
reader.readAsDataURL(fm.files[0]);
reader.onload = function(){
fmpic.src = reader.result;
let req = new XMLHttpRequest();
req.open("post","http://localhost:8084/wechat/upload");
const formdata = new FormData();
formdata.append("file",fm.files[0]);
req.send(formdata);
req.onreadystatechange = function(){
if(req.readyState==4&&req.status==200){
pic_src = req.responseText
}
}
}
}
///wechat/add_article
function changePicWidth(){
pic_menu.style.display = "none";
const w = prompt("请输入图片的宽度")
currentImg.style.width = w+"px";
currentImg.style.border = "none";
}
if(localStorage.cnt){
d1.innerHTML = localStorage.cnt;
}
function saveContent(){
localStorage.cnt = d1.innerHTML;
}
function addPic(){
const range = window.getSelection().getRangeAt(0);
const img = document.createElement("img");
img.style.width = "300px";
img.oncontextmenu = function(){
currentImg = this;
pic_menu.style.display = "block";
pic_menu.style.left = img.offsetLeft+d1.offsetLeft;
pic_menu.style.top = img.offsetTop + d1.offsetTop -10;
return false;
}
const filereader = new FileReader();
filereader.readAsDataURL(f.files[0]);
filereader.onload = function(){
img.src = filereader.result;
range.insertNode(img);
}
}
function changeColor(){
const span = document.createElement("span");
span.style.color = c.value;
const range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
function jiaCu(){
const span = document.createElement("span");
span.style['font-weight'] = 900;
const range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
function juzhong(x){
const span = document.createElement("div");
span.style['text-align'] =x;
const range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
function changeFontSize(){
const span = document.createElement("span");
span.style['font-size'] = s.value+"px";
const range = window.getSelection().getRangeAt(0);
range.surroundContents(span);
}
注意:有的事件我是绑定后端服务器接口的
java环境是 SpringBoot 只需要创建一个SpringBoot项目即可
代码如下:
@RestController
public class HomeController {
@PostMapping("/api/add_article")
public String add_article(@RequestBody Map map) throws IOException, SQLException {
Connection dbcon = DriverManager.getConnection(
"jdbc:mysql://数据库连接主机名:3306/数据库名?useSSL=false","用户名","密码");
PreparedStatement ps;
String insertSQL = "insert into article values (null,?,?,?,now(),?)";
ps = dbcon.prepareStatement(insertSQL);
ps.setString(1,map.get("title")+"");
ps.setString(2,map.get("content")+"");
FileWriter fw = new FileWriter(new File(map.get("pic")+".html"));
fw.write("<meta charset='utf-8' /><meta name='viewport' " +
"content='width=device-width' />"+map.get("content")+"");
fw.close();
ps.setString(3,map.get("pic")+"");
ps.setString(4,map.get("score")+"");
int i = ps.executeUpdate();
ps.close();
dbcon.close();
return (i==1)+"";
}
@GetMapping("/wechat/find_img")
public void find_img(String fileName, HttpServletResponse response) throws IOException {
File file = new File(getBasePath() +fileName);
FileInputStream fis = new FileInputStream(file);
byte[] b = new byte[1024];
int num;
response.setHeader("content-Type","image/*");
while((num=fis.read(b))!=-1){
response.getOutputStream().write(b,0,num);
}
response.getOutputStream().flush();
response.getOutputStream().close();
}
@PostMapping("/wechat/upload")
public String upload(MultipartFile file) throws IOException, SQLException {
String basepath = getBasePath();
String fn = System.currentTimeMillis()+"_"+file.getOriginalFilename();
file.transferTo(new File(basepath+fn));
return fn;
}
@NotNull
private String getBasePath(){
String osName = System.getProperties().getProperty("os.name");
//注意路径一定要正确
//苹果系统
String basepath = "存放文件的路径";
//windos系统
if(osName.contains("Windows")){
//basepath = "存放文件的路径";
basepath = "d://uploads/";
}
return basepath;
}
}
数据库文章表结构
为了方便大家,我就直接上SQL语句了
CREATE TABLE `article` (
`id` int NOT NULL AUTO_INCREMENT,
`title` varchar(255) DEFAULT NULL,
`content` longtext,
`pic` varchar(1000) DEFAULT NULL,
`createtime` datetime DEFAULT NULL,
`score` int DEFAULT '30',
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=53 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
网页界面如下: