<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<meta http
-equiv="X
-UA
-Compatible" content="ie=edge">
<title>文章列表</title>
<link rel="stylesheet" href="
js/bootstrap/
css/bootstrap.min.
css">
<link rel="stylesheet" href="
css/reset.
css">
<link rel="stylesheet" href="
css/iconfont.
css">
<link rel="stylesheet" href="
css/main.
css">
<link type="text/
css" rel="stylesheet" href="
js/jedate/
css/jedate.
css">
<script src="
js/jquery
-1.12.4.min.
js"></script>
<script src="
js/jedate/
js/jedate.
js"></script>
<script src="
js/tinymce/
js/tinymce/tinymce.min.
js"></script>
<script src="
js/tinymce/
js/tinymce_setup.
js"></script>
<script src="axios.min.
js"></script>
</head>
<body>
<div class="container
-fluid">
<div class="common_title">
文章编辑
</div>
<div class="container
-fluid common_con">
<form class="form
-horizontal article_form">
<div class="form
-group">
<label for="inputEmail3" class="col
-sm
-2 control
-label">文章标题：</label>
<div class="col
-sm
-10">
<input type="text" name="title" class="form
-control title" id="inputEmail3" value="文章标题文字">
</div>
</div>
<div class="form
-group">
<label for="inputPassword3" class="col
-sm
-2 control
-label">文章封面：</label>
<div class="col
-sm
-10">
<img src=" " class="article_cover">
<input name="cover" type="file" id="exampleInputFile">
</div>
</div>
<div class="form
-group">
<label for="inputEmail3" class="col
-sm
-2 control
-label">文章类别：</label>
<div class="col
-sm
-4">
<select class="form
-control category" name="categoryId" id="article_category">
</select>
</div>
</div>
<div class="form
-group">
<label for="inputEmail3" class="col
-sm
-2 control
-label">发布时间：</label>
<div class="col
-sm
-4">
<div class="input
-group">
<input type="text" name="date" class="form
-control" value="2019
-05
-17" id="dateinput">
<span class="input
-group
-btn">
<button class="btn btn
-default" type="button"
onclick="jeDate('#dateinput',{trigger:false,format: 'YYYY
-MM
-DD'})"><i
class="iconfont icon
-icondate"></i></button>
</span>
</div>
</div>
</div>
<div class="form
-group">
<label for="inputEmail3" class="col
-sm
-2 control
-label">文章内容：</label>
<div class="col
-sm
-10">
<textarea id="rich_content" name="content" class="form
-control"
placeholder="文章内容">文章内容</textarea>
</div>
</div>
<div class="form
-group">
<div class="col
-sm
-offset
-2 col
-sm
-10">
<button type="submit" class="btn btn
-success btn
-edit">修改</button>
</div>
</div>
</form>
</div>
</div>
<!
-- 引入一个模板引擎
js文件
-->
<script src="./
js/template
-web.
js"></script>
<!
-- 准备一个 文章分类 模板
-->
<script id="cateList" type="text/html">
{{each data v}}
<option value='{{v.id}}'>{{v.name}}</option>
{{/each}}
</script>
<script>
// 入口函数
$(function () {
const instance = axios.create({
baseURL: 'http://139.196.82.122:8080/api/v1',
timeout: 5000,
headers: {
'Content
-Type': 'application/x
-www
-form
-urlencoded',
"Authorization": localStorage.getItem("token"),
}
});
// 获取文章列表
async function getId() {
const id = window.location.search.split("=")[1];
if (id) {
const { data } = await instance.get(`admin/article/search?id=${id}`);
if (data.code === 200) {
const { title, cover, categoryId, date, content } = data.data;
$("#inputEmail3").val(title);
$(".article_cover").attr("src", cover);
$(".category").val(categoryId);
$("#dateinput").val(date);
tinyMCE.get('rich_content').setContent(content);
}
else {
alert("获取文章列表错误");
}
}
}
getId();
async function getCategoryList() {
const { data } = await instance.get("admin/category/list");
if (data.code == 200) {
$('#article_category').html(
data.data.map((element) => {
return `<option value="${element.id}">${element.name}</option>`
})
)
} else {
alert("获取列表类别错误");
}
};
getCategoryList();
$('#exampleInputFile').change(function () {
let icon = this.files[0];
let url = URL.createObjectURL(icon);
$(this).prev().attr('src', url);
});
$('.btn
-edit').click(async function (event) {
event.preventDefault();
const formData = new FormData($('form')[0]);
formData.append('content', tinyMCE.activeEditor.getContent());
formData.append('state', "已发布");
let { data } = await axios.post('http://139.196.82.122:8080/api/v1/admin/article/edit', formData, {
headers: {
Authorization: localStorage.getItem("token"),
}
});
if (data.code == 200) {
alert("修改成功");
window.location.href = "article_list.html";
}
});
});
</script>
</body>
</html>为什么报错
GAE博客搭建与JS-RichEditor应用
本文介绍了一位开发者如何在Google App Engine (GAE)上使用JS-RichEditor实现轻量级博客搭建的过程，并分享了自定义代码高亮功能的实现方法。
扫一扫
221
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
