网站文本编辑器(wangEditor)
wangEditor富文本的一种
以下是富文本的测试代码(html)，涵盖了他基本功能：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor 菜单和编辑器区域分离</title>
<style type="text/css">
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
height: 400px;
}
</style>
</head>
<body>
<div id="div1" class="toolbar">
</div>
<div id="div2" class="text"> <!--可使用 min-height 实现编辑区域自动增加高度-->
<p>请输入内容</p>
</div>
<div style="padding: 5px 0; color: #ccc">中间隔离带</div>
<div id="div3"><p>请输入内容2</p></div>
<button id="btn1">获取html 内容1</button>
<button id="btn2">获取text 内容2</button>
<button id="btn3">获取json 内容1</button>
<script type="text/javascript" src="./xss.js"></script>
<script type="text/javascript" src="./js/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor1 = new E('#div1', '#div2') // 两个参数也可以传入 elem 对象，class 选择器
editor1.create()
editor1.txt.html('<p>用 JS 设置的内容</p>')
var editor2 = new E('#div3')
// 通过 url 参数配置 debug 模式。url 中带有 wangeditor_debug_mode=1 才会开启 debug 模式
editor2.customConfig.debug = location.href.indexOf('wangeditor_debug_mode=1') > 0
editor2.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
// 'image', // 插入图片
'table', // 表格
//'video', // 插入视频
//'code', // 插入代码
'undo', // 撤销
'redo' // 重复
]
editor2.customConfig.emotions = [
{
// tab 的标题
title: '默认',
// type -> 'emoji' / 'image'
type: 'image',
// content -> 数组
content: [
{
alt: '[坏笑]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/50/pcmoren_huaixiao_org.png'
},
{
alt: '[舔屏]',
src: 'http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/40/pcmoren_tian_org.png'
}
]
},
{
// tab 的标题
title: 'emoji',
// type -> 'emoji' / 'image'
type: 'emoji',
// content -> 数组
content: ['😀', '😃', '😄', '😁', '😆','😂']
}
]
editor2.create()
editor2.txt.append('<p>追加的内容</p>')
document.getElementById('btn1').addEventListener('click', function () {
// 读取 html
var html = editor1.txt.html()
var filterHtml = filterXSS(html) // 此处进行 xss 攻击过滤
alert(filterHtml)
}, false)
document.getElementById('btn2').addEventListener('click', function () {
// 读取 text
alert(editor2.txt.text())
}, false)
document.getElementById('btn3').addEventListener('click', function () {
var json = editor1.txt.getJSON() // 获取 JSON 格式的内容
var jsonStr = JSON.stringify(json)
console.log(json)
console.log(jsonStr)})
// 自定义菜单配置
</script>
</body>
</html>
wangEditor.min.js 网址：https://www.dadjin.top/cjl/work/netdisk/share.php?check=5557977
xxs.js 网址：https://www.dadjin.top/cjl/work/netdisk/share.php?check=5556978