html——简单⽂章发布html页⾯及富⽂本编辑器wangEditor的使⽤实现结果截图：
说明：
1、主要组件使⽤了bootstrap4，富⽂本编辑器使⽤wangEditor，在使⽤前需要下载wangEditor的js⽂件，地址参考
2、所⽤图⽚就导航栏的两张，可以⾃⼰换成⾃⼰的，这⾥就不贴了。
3、对于简单的⽂本编辑需求，wangEditor3使⽤简单，上⼿快，推荐使⽤。
下⾯直接上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>发布⽂章</title>
<link rel="stylesheet"href="/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="/jquery/3.2.1/jquery.min.js"></script>
<script src="/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="wangEditor.min.js"></script>
<style>
.mainHeader{
padding-top: 1px;
padding-bottom: 1px;
background-color: white !important;
border-bottom: 5px solid #0b6cb8;
}
.logo_icon{
height: 38px;
}
.liColor{
color: #4f4f4f
}
.toolbar{
border: 1px solid #ccc;
}
.text{
border: 1px solid #ccc;
height: 500px;
}
</style>
<script>
$(function(){
//富⽂本编辑器初始化代码
var E= window.wangEditor;
var editor =new E('#div1','#div2');
editor.customConfig.uploadImgShowBase64 =true;// 使⽤ base64 保存图⽚ ate();
//创建replaceAll()函数,⽤于替换字符串中出现的所有某个字符
asp富文本编辑器placeAll=function(FindText, RepText){
place(new RegExp(FindText,"g"), RepText);
};
/
/发布⽂章按钮的点击事件，即封装数据，向后台传递
$("#publishBtn").click(function(){
console.info("click");
var postData={};
postData.title=$("#titleInput").val();
postData.category=$("#categoryInput").val();
//替换双引号为两个单引号，⽅便编写SQL语句插⼊数据库中
var html().replaceAll("\"","\'\'");
console.info(content);
postData.author_acc="123";
postData.author_name="admin";
postData.last_edit_time=new Date().toLocaleDateString();
console.info(postData);
//向后台传递数据，需要根据具体后台来改
$.post("localhost:8099/publishArticle",postData,function(data){
alert(data);
})
})
})
</script>
</head>
<body >
<div class="container-fluid">
<!-- 顶部导航栏-->
<div class="row">
<div class="col-md-12" >
<nav class="navbar navbar-expand-lg navbar-light bg-light mainHeader">
<!-- <a class="navbar-brand" href="#">Navbar w/ text</a>-->
<div class="logoDiv"id="logoIcon" >
<img class="logo_icon"src="logo_icon_white.png"/>
</div>
<div class="logoDiv"id="logoText">
<img class="logo_icon"src="logo_text_white.png"/>
</div>
<div class="collapse navbar-collapse"id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item" >-->
<!-- <a class="nav-link nav-item" href="#">⾸页 </a>-->
<!-- </li>-->
</ul>
<span class="navbar-nav">
<a class="nav-link navbar-item active"href="#">个⼈中⼼</a>
</span>
</div>
</nav>
</div>
</div>
<div class="row" ></div>
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-2" >
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-9">
<div class="card">
<ul class="nav nav-pills nav-fill flex-column">
<li class="nav-item">
<a class="nav-link active list-group-item"href="#">发布⽂章</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item"href="#">⽂章管理</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item"href="#">分类管理</a>
</li>
<li class="nav-item">
<a class="nav-link liColor list-group-item"href="#">退出</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="col-md-6" >
<div class="card">
<div class="card-header" >
<div class="row">
<div class="col-md-3" >发布⽂章</div>
<!-- <div class="col-md-9" >当前位置>专委会介绍>⽂件资料</div>--> </div>
</div>
</div>
<div class="card-body" >
<div class="row">
<div class="col-md-12">
<div class="input-group mb-1 mt-2 ml-0 mr-1">
<div class="input-group-prepend">
<span class="input-group-text">⽂章标题</span>
</div>
<input id="titleInput"type="text"class="form-control"placeholder="不多于100字" >
</div>
</div>
</div>
<div ></div>
<div id="div1"class="toolbar">
</div>
<div id="div2"class="text"><!--可使⽤ min-height 实现编辑区域⾃动增加⾼度-->
<!-- <p>请输⼊内容</p>-->
</div>
<div class="row">
<div class="col-md-5">
<div class="input-group mb-3 mt-3 ml-0">
<div class="input-group-prepend">
<span class="input-group-text"id="inputGroup-sizing-default">⽂章分类</span>
</div>
<input id="categoryInput"type="text"class="form-control">
</div>
</div>
</div>
<div class="row" >
<div class="col-md-1"></div>
<div class="col-md-2 ml-0">
<button type="button"class="btn btn-primary"id="publishBtn">发布⽂章</button>
</div>
<div class="col-md-4">
<button type="button"class="btn btn-light">返回</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
</div>
</div>
</div>
</body> </html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论