wangEditor基於javascript和css開發的 Web富文本編輯器， 輕量、簡潔、易用、開源免費
更多配置請查閱官網文檔：https://www.kancloud.cn/wangfupeng/wangeditor3/335782
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="hjl">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>wangEditor</title>
<!--預覽樣式-->
<style>
#previewbox {
position: fixed;
z-index: 999999999;
display: none;
top: 0px;
bottom: 100px;
width: 300px;
height: 1000px;
background: url(../img/phone.png) no-repeat;
margin: 0px 650px;
background-size: contain;
padding: 120px 25px 116px 25px;
}
.preview-title{
font-size: 15px; font-weight: 700;
}
.preview-author{
color: rgb(96, 127, 166); font-size: 12px;cursor:pointer;
}
.preview-date{
color: rgb(140, 140, 140); font-size: 12px; font-style: normal;
}
.preview-content{
height: 100%; padding-right: 0px;overflow-y: scroll;overflow-x: hidden;
}
.preview-close{
top: 0px; width: 50px; height: 50px; right: -17px; font-size: 30px; font-weight: 700; position: absolute; cursor: pointer;
}
.preview-content::-webkit-scrollbar{
width:2px;
}
</style>
<!--只需要導入js 可以到官網下載對應的版本-->
<script src="wangEditor.js" type="text/javascript"></script>
</head>
<body>
<div id="wangEditor"></div>
<!-- 預覽 -->
<button type="button" class="btn btn-primary" id="viewButton"><i class="fa fa-eye"></i> 預覽</button>
<div id="previewbox">
<div id="previewContent" class="preview-content" style="height:50%"></div>
<div onclick = "previewboxClose()" class="preview-close">X</div>
</div>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#wangEditor');
//定義上傳圖片名
editor.customConfig.uploadFileName = 'file'
// 配置服務器端地址上傳圖片地址
/** 返回格式
{
// errno 即錯誤代碼，0 表示沒有錯誤。
// 如果有錯誤，errno != 0，可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
"errno": 0,
// data 是一個數組，返回若干圖片的線上地址
"data": [
"圖片1地址",
"圖片2地址",
"……"
]
}
**/
editor.customConfig.uploadImgServer = "/upload",
editor.create();
function previewboxClose(){
$("#previewbox").hide();
$("#previewContent").html("");
}
$("#viewButton").click(function(){
previewboxShow();
});
function previewboxShow(){
//獲取輸入的文本代碼
var sHTML = editor.txt.html();
//console.log(sHTML);
$("#previewContent").html(sHTML);
$("#previewbox").show();
}
</script>
</body>
</html>
