给别人随手做的小demo，这边只提供思路，代码可再自行完善
<!DOCTYPE html>
<html lang="en">
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- 引用的外部文件 -->
<script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.config.js" type="text/javascript"></script>
<script src="http://apps.bdimg.com/libs/ueditor/1.4.3.1/ueditor.all.min.js" type="text/javascript"></script>
</head>
<body>
<div class="addBox">
<script id="editor_0" type="text/plain" style="width:1024px;height:100px;"></script>
</div>
<div id="btns">
<div>
<button onclick="createEditor()">创建编辑器</button>
<button onclick="deleteEditor()">删除编辑器</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
let arr = []; //存储当前已经存在编辑器id的值,
$(function() {
// 如果后台有数量则，直接遍历渲染
$('.addBox script').each(function() {
arr.push($(this).attr('id').replace(/[^0-9]/ig, "")) //可以直接获取最后一个编辑器的id，取出也行，这边为了后续操作方便，直接存储id
});
arr.forEach(i => {
initEditor(i)
})
});
function createEditor() {
if (arr.length != 0) { //如果已经有创建的编辑器，则直接添加
// 创建时取最后一个编辑器id给他+1
let newId = parseInt($('.addBox div[id^=editor_]:last').attr('id').replace(/[^0-9]/ig, "")) + 1;
appendEditor(newId);
initEditor(newId);
} else {
// 获取到当前已经存在的编辑器id再继续累加，直接使用时间戳当编辑器id也可以
appendEditor(0);
initEditor(0)
}
}
// 删除编辑器
function deleteEditor(id) {
// 删除这边传个ID给下面销毁就好了
UE.getEditor(`editor${id}`).destroy();
}
// 初始化编辑器函数
function initEditor(id) {
UE.getEditor(`editor_${id}`);
}
// 创建编辑器
function appendEditor(index) {
arr.push(index)
$('.addBox').append(`<script id="editor_${index}" type="text/plain" style="width:1024px;height:100px;"><\/script>`);
}
</script>
</body>
</html>
预览效果
预览效果
网友评论