wangEditor的使用
使用 wangeditor
2023-06-13 09:12:57 时间
大家好,又见面了,我是你们的朋友全栈君。
wangEditor的使用
第一步,将其下载,并引入项目中。
第二步,引入js
<script type="text/javascript" src="/plugin/wangEditor/release/wangEditor.min.js"></script>
第三步,初始化对象
<span class="col-lg-8" id="editor"></span>
var E = window.wangEditor;
var editor = new E('#editor');
editor.create();
第四步,添加一些配置
配置菜单
// 自定义菜单配置
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.uploadImgServer = '/admin.php/Upload/wang_editor'; // 上传图片到服务器
// 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 5 张图片
editor.customConfig.uploadImgMaxLength = 1;
// 自定义文件名
editor.customConfig.uploadFileName = 'editor_img';
// 将 timeout 时间改为 3s
editor.customConfig.uploadImgTimeout = 5000;
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
// alert("前奏");
},
success: function (xhr, editor, result) {
// 图片上传并返回结果,图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
// var url = result.data.url;
// alert(JSON.stringify(url));
// editor.txt.append(url);
// alert("成功");
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果,但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象,result 是服务器端返回的结果
alert("失败");
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象,editor 是编辑器对象
// alert("错误");
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式,可使用该配置
// (但是,服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错)
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
var url = result.data[0];
insertImg(url);
// result 必须是一个 JSON 格式字符串!!!否则报错
}
}
第五步,设置内容
// 设置内容
editor.txt.html(content);
第六步,获取内容
// 获取内容
var content = editor.txt.html();
很好,很方便!
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/167625.html原文链接:https://javaforall.cn
相关文章
- Fabric.js 使用纯色遮挡画布(前景色)
- wangeditor富文本编辑器的使用(超详细)
- Mysql 使用读写分离需要注意哪些?
- vue中使用wangeditor_vue富文本编辑器tinymce
- 使用云服务器部署 Spring Boot 项目
- 数据库中间件mycat安装与使用详解数据库
- spring中jedis对redis的事务使用注意总结详解大数据
- Linux 下使用WMIC命令控制系统管理(linuxwmic)
- Oracle 视图 ALL_ENCRYPTED_COLUMNS 官方解释,作用,如何使用详细说明
- Oracle 视图 DBA_HIST_DB_CACHE_ADVICE 官方解释,作用,如何使用详细说明
- 我要输入中文使用Linux系统拼音输入中文(linuxpinyin)
- 如何使用Linux查看tar压缩文件(linux查看tar文件)
- 判断Linux: 如何使用if语句处理多个条件(linuxif多个条件)
- 使用Linux命令行批量重命名文件(批量重命名linux)
- macOS输入法使用详解:让你的打字生活更加高效优雅(macos输入法)
- 如何使用Linux绑定多个IP地址?(linux绑定多ip)
- linux下dir头文件优化使用技巧(linuxdir头文件)
- 使用C语言和MySQL开发工具创新功能(c 与mysql开发工具)
- MySQL中的CEIT函数使用详解(mysql中CEIT)
- 使用CMD开启Oracle轻松操作指南(cmd开始oracle)
- php输入流php://input使用示例(php发送图片流到服务器)