个人笔记（富文本编辑器wangEditor）

60 阅读 0 评论 40 点赞

我是靠谱客的博主贪玩仙人掌，最近开发中收集的这篇文章主要介绍个人笔记（富文本编辑器wangEditor），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<#--引入wangEditor-->
<script src="/resources/wangEditor.min.js"></script>
</head>
<body>
<div>
<button id="btnRead">读取内容</button>
<button id="btnWrite">写入内容</button>
</div>
<div id="divEditor" style="width: 800px;height: 600px"></div>
<script>
var E = window.wangEditor;
var editor = new E("#divEditor"); //完成富文本编辑器初始化工作；
editor.create(); //创建富文本编辑器，显示在页面上；
document.getElementById("btnRead").onclick = function () {
var content = editor.txt.html(); //获取编辑器现有的html内容
alert(content);
}
document.getElementById("btnWrite").onclick = function () {
var content = "<li style='color:red'>我是<b>新内容</b></li>";
//把内容传输到富文本编辑器
editor.txt.html(content);
}
</script>
</body>
</html>