wangeditor视频
2024-09-05 14:41:11
wangeditor网址http://www.wangeditor.com/
目前使用的是3.11版本
使用步骤
1.引用wangEditor.min.js
2.代码
2.1 取得函数var E = window.wangEditor
2.2实例化,参数是要变成编辑器的那个DIV的IDvar editor = new E('#editordiv')editor.create()
2.3如果1个页面上要多个编辑器,再new就可以了var editor1 = new E('#editordiv1')editor1.create()
关于图片
可以设置后台服务端上传,也可以设置直接在前端转成BASE64. [editor.customConfig.uploadImgShowBase64=true],2.x用的时候好像没有这功能.
从文档上看,它上传图片,使用的是formData对象.
新版本提供了自定义上传图片的接口, 只要实现这个方法,就可以上传图片了.
// 这个属性用于限制图片选框能选几个图片
customConfig.uploadImgMaxLength=1;
// 实现这个方法上传图片
customConfig.customUploadImg = async (files, insert) =>
{
// 这个就是选中的文件,估计就是input控件的 files属性
files
// files 是 input 中选中的文件列表
// insert 是获取图片 url 后,插入到编辑器的方法
inser();
}
获取内容
editor.txt.html(),这个方法获取html内容,也就是包含格式信息的内容
editor.txt.text(),这个方法获取纯文本内容,不含格式
关于视频
插入格式如下
<iframe src="/cdn/media/info.mp4"></iframe>
<iframe src="http://localhost/cdn/media/info.mp4"></iframe> 注意有个情况,使用iframe方式插入视频时,有的浏览器不能识别播放.为此,修改了第2611行附近开始 改进后,只需要输入一个地址,就能自动生成video标签,支持mp4,mp3.
2611行处修改内容
if (val) {
if (val.startsWith('http')) {
if (val.endsWith('mp4')) {
// 插入视频
var videodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp4" /></video>`;
_this._insert(videodom);
} else if (val.endsWith('mp3')) {
var audiodom = `<video autoplay="autoplay" controls="controls"><source src="${val}" type="audio/mp3" /></video>`;
_this._insert(audiodom);
}
return true;
}
alert('无效的视频地址');
}
最新文章
- css 一些灵动性的小方法
- WF2013Low Power芯片
- OpenGL的学习资源
- iOS文件解压&;&;数据加密
- 目录处理工具类 DealWithDir.java
- erl_0013 erlang 带参数模块 parameterized modules are no longer supported
- 通过gdb跟踪进程调度分析进程切换的过程
- 用函数的地址调用函数 C++ MFC
- js添加删除元素
- 单片机C语言实现的采用DS18B20的温度检测装置
- TCP/IP详细解释--TCP/IP可靠的原则 推拉窗 拥塞窗口
- perl的INC
- ●BZOJ 2839 集合计数
- 【Java编程】Java学习笔记<;一>;
- SQL Server 2000安装教程图解
- 首个hybird商业项目踩坑总结
- C#重试公用类
- [数据结构与算法分析(Mark Allen Weiss)]二叉树的插入与删除 @ Python
- WEB前端移动开发初始化
- 计算概论(A)/基础编程练习2(8题)/6:数组逆序重放