<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<meta name="format-detection" content="telephone=no,email=no">
<base>
<title>文本域</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="./css/base.css">
<link rel="stylesheet" href="./css/Eleditor.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="textarea">
<div id="div1">
<div class="toolbar"></div>
<div class="title">
<div contenteditable="true" class="head" placeholder="请在这里输入标题"></div>
<div contenteditable="true" class="author" placeholder="请输入作者"></div>
<div class="editorcontent" contenteditable="true" id="editorcontent"><div ></div></div>
</div>
</div>
<p class="abstract">封面摘要：</p>
<div class="cover_abstract">
<div class="imgload">
<input type="file" class="fileImg" accept="image/png,image/gif，image/jpg, image/jpeg" onchange="Upload(this)">
<img src="" class="avatar" style="display:none"/>
<i class="addIcon"></i>
</div>
<textarea autocomplete="off" placeholder="请输入内容" class="el-textarea__inner" style="min-height: 33px;height: 90px; 72%"></textarea>
</div>
</div>
<form style="display: none;" class="lables">
<p>标签：</p>
<div class="lables_box">
<label><input type="radio" name="1" value="旅游1" checked="checked">旅游1</label>
<label><input type="radio" name="1" value="美食1" checked="checked" >美食1</label>
<label><input type="radio" name="1" value="旅游2" checked="checked">旅游2</label>
<label><input type="radio" name="1" value="美食2" checked="checked" >美食2</label>
</div>
<button id="sures" type="button">确定</button>
</form>
</body>
<script
type="text/javascript"
src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"
></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<!-- <script type="text/javascript" src="./js/webuploader.min.js"></script> -->
<script type="text/javascript" src="./js/Eleditor.min.js"></script>
<script type="text/javascript">
// 富文本的创建
const E = window.wangEditor
const editor = new E(".toolbar", ".editorcontent")
// 设置编辑区域高度为 550px
editor.config.height = 550
editor.create()
/*实例化一个编辑器*/
var artEditor = new Eleditor({
el: '#editorcontent',
toolbars: [
{
id: 'insertLable',
name: '插入标签',
handle: function(select, controll) { //回调返回选择的dom对象和控制按钮对象
artEditor.saveState();
$(".lables").show();
$("#sures").click(function(){
artEditor.getEditNode().attr('data_sss',$("input[name='1']:checked").val()).attr('class','seldiv');
let arr= [];
if (artEditor.getEditNode().find('.label').length>0) {
for(var i=0;i<artEditor.getEditNode().find('.label').length;i++) {
arr.push(artEditor.getEditNode().find('.label')[i].innerText.replace(/s/g, ''))
}
if(arr.indexOf($("input[name='1']:checked").val()) === -1){
artEditor.getEditNode().prepend(`<div class="label" contenteditable="false">
${$("input[name='1']:checked").val()} </div>`);
}
}else {
artEditor.getEditNode().prepend(`<div class="label" contenteditable="false">${$("input[name='1']:checked").val()} </div>`);
}
artEditor.hideEditorControllerLayer();
artEditor.saveState();
$(".lables").hide() ;
})
return false;
}
},
{
id: 'cancel',
name: '取消',
handle: function(select, controll) { //回调返回选择的dom对象和控制按钮对象
artEditor.saveState();
$(".lables").hide() ;
artEditor.hideEditorControllerLayer();
return false;
}
},
{
id: 'undo',
name: '撤销',
handle: function(select, controll) { //回调返回选择的dom对象和控制按钮对象
artEditor.saveState();
artEditor.getEditNode().find('.label').remove();
$(".lables").hide() ;
artEditor.hideEditorControllerLayer();
return false;
}
},
]
});
function Upload(obj) {
var file = obj.files[0];
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (ev) {
$(".avatar").attr("src", ev.target.result)
$(".avatar").show();
$(".addIcon").hide();
}
}
</script>
</html>