【介绍】
wangEditor 是基于javascript和css开发的 Web富文本编辑器, 轻量、简洁、易用、开源免费。
官网地址:http://www.wangeditor.com/
【下载】
- 点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版。进入
release
文件夹下找到wangEditor.js
或者wangEditor.min.js引入
即可 - 使用CDN://unpkg.com/wangeditor/release/wangEditor.min.js
【简单使用】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script type="text/javascript" src="/wangEditor.min.js"></script>
<script type="text/javascript">
var E = window.wangEditor
var editor = new E('#editor')
// 或者 var editor = new E( document.getElementById('editor') )
editor.create()
</script>
</body>
</html>
【复杂使用】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>wangEditor demo</title>
<style>
/* 富文本编辑器高度 */
.w-e-text-container {
height: 40rem !important;
}
</style>
</head>
<body>
<div id="editor">
<p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
</div>
<!-- 注意, 只需要引用 JS,无需引用任何 CSS !!!-->
<script type="text/javascript" src="./js/wangEditor.min.js"></script>
<!-- 富文本 过滤word粘贴过来的字符串 -->
<script type="text/javascript" src="./js/filterword.js"></script>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
// 自定义菜单配置
editor.customConfig.menus = [
'head', // 标题
'bold', // 粗体
'fontSize', // 字号
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'link', // 插入链接
'list', // 列表
'justify', // 对齐方式
'quote', // 引用
'emoticon', // 表情
'image', // 插入图片
'table', // 表格
'video', // 插入视频
'code', // 插入代码
'undo', // 撤销
'redo' // 重复
];
// 关闭粘贴样式的过滤
editor.customConfig.pasteFilterStyle = true;
// 忽略粘贴内容中的图片
editor.customConfig.pasteIgnoreImg = false;
// 自定义处理粘贴的文本内容
editor.customConfig.pasteTextHandle = function (content) {
//用来过滤word粘贴过来的字符串
return returnHtml(content);
}
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 下面两个配置,使用其中一个即可显示“上传图片”的tab。但是两者不要同时使用!!!
// editor.customConfig.uploadImgServer = '/upload'; // 上传图片到服务器
editor.customConfig.uploadImgShowBase64 = true; // 使用 base64 保存图片
//上传图片的错误提示
editor.customConfig.customAlert = function (info) {
alert(info);
}
//自定义上传图片事件
editor.customConfig.customUploadImg = function (files, insert) {
var name = files[0].name; //文件对象
var suffix = name.substr(name.indexOf(".")); //文件后缀名
}
editor.create();
//设置内容 创建编辑器之后,使用editor.txt.html(...)设置编辑器内容
//editor.txt.html('<p>用 JS 设置的内容</p>');
//追加内容
//editor.txt.append('<p>追加的内容</p>');
//清空内容
//editor.txt.clear();
//读取内容
//editor.txt.html(); //读取 html
//editor.txt.text() //读取 text
</script>
</body>
</html>
用来过滤word粘贴过来的字符串的js文件地址:https://github.com/hujinchen/filterword
更多编辑器的配置,小伙伴们可以去看官网哦~