<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>wangEditor编辑器表单提交</title>
</head>
<body>
<form action="" onsubmit="return false">
<div id="content"></div>
<button type="submit" onclick="Jform()">提交</button>
</form>
<p>以下是表单提交的内容</p>
<textarea id="test" style="width:100%;min-height:400px;"></textarea>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/wangeditor@latest/dist/wangEditor.min.js"></script>
<script>
const WangEditor = window.wangEditor
function creatWangEditor (id) {
let text_id = "text_"+id;
let old_text = $("#"+id).html();
$("#"+id).empty();
$('#'+id).append(`<input name="${id}" type="hidden" />`);
$(`input[name=${id}]`).val(old_text);
let new_wrap = "wrap_" +id;
$('#'+id).append(`<div id="${new_wrap}" ></div>`);
const editor = new WangEditor('#'+new_wrap)
editor.config.uploadImgServer = '上传图片地址'
editor.config.onchange = function (newHtml) {
$(`input[name=${id}]`).val(newHtml);
}
editor.create()
editor.txt.html(old_text)
}
</script>
<script>creatWangEditor('content');</script>
<script type="text/javascript">
function Jform() {
var content = $('input[name=content]').val();
$('#test').val(content);
}
</script>
</body>
</html>
