富文本编辑器wangEditor
wangEditor是基于JavaScript和css开发的Web富文本编辑器。
wangEditor的使用:
引入wangEditor组件
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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了