代码片段 | wangedit弹出框显示-王明昌博客

如果你对该文章中的内容有疑问/不解,可以点击此处链接提问

要注明问题和此文章链接地址点击此处跳转

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div class="set_bottom_editbtn compile">编辑</div>
<div class="page" style="display: none;">
	<div class="page_content">
		<div class="editor"></div>
		<table style="width:100%; margin-top:10px;margin-left:0px;">
    		<tr>
				<td colspan="2"><input type="button" id="btn1" value="提交" class="sub" style="color:#fff; background:#00a1e9; color:#fff; font-size:15px; border-radius:30px; height:35px; width:150px; border:none;display: block;margin:15px auto 0px;"></td>
    		</tr>
    	</table>
	</div>
</div>
<div id="editor" style="display: none;">
        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
    </div>
</body>
</html>
<script type="text/javascript" src="https://www.wangmingchang.com/wp-content/themes/JieStyle-Two/js/jquery.min.js"></script>
<script type="text/javascript" src="./layer/layer.js"></script>
<script type="text/javascript" src="https://unpkg.com/wangeditor/release/wangEditor.min.js"></script>

<script>
$(function(){
	
 		$(".set_top_editbtn").click(function(){
 			layer.open({
 				type: 1,
 				title:"基本信息",
 				skin: 'layui-layer-rim', //加上边框
 				area: ['600px', '500px'], //宽高
 				content: $("#new_setcontent").html()
 			});
 		})
 		
 	  $(".set_bottom_editbtn").click(function(){
 			layer.open({
 				type: 1,
 				title:"信息",
 				skin: 'layui-layer-rim', //加上边框
 				area: ['800px', '470px'], //宽高
 				content: $(".page").html()
 			});
 			$(".layui-layer-content .page_content  .editor").attr("id","editor");
 			var E = window.wangEditor
 		    var editor = new E('#editor')
 		    // 或者 var editor = new E( document.getElementById('editor') )
 		    editor.create();
 		})
 	  $('#btn1').click(function () {
        editor.$txt.append('<p>新追加的内容</p>');
    	});


 	  $('#btn2').click(function () {
        // 获取编辑器区域完整html代码
        var html = editor.$txt.html();
        console.log(html)
        // 获取编辑器纯文本内容
        var text = editor.$txt.text();
        
        // 获取格式化后的纯文本
        var formatText = editor.$txt.formatText();
    });

})

</script>