请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
开发一款符合现代浏览器标准所见即所得的Web在线编辑器是一件相当复杂、难度极大的工作,好在有各种库为我们提供便利,借助它们,在网页中嵌入自定义的WYSIWYG编辑器变得相对简单。众多此类JS库中,Squire值得关注。
Squire为处理邮件中的HTML而开发,它虽然亮丽,也因对标问题存在一定的局限性,例如插入 h1~h6 标题 API 都没有提供,处理音视频的 API 更没有。插入音视频是当代Web页的刚需,Squire 不提供相应的API,我们可以变通实现。
首先需要让 Square 支持音视频所见即所得的渲染,唯一的途径是修改源码,让音视频进入“白名单”,否则即使插入成功,也不能在编辑器中呈现出效果来。打开下载的 Squire 源码,找到 var allowedBlock = /.../ 的语句,这是一个正则表达式,我们只需在表达式的后面加入 |VIDEO|AUDIO 即可,改变后的语句如下:
var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:[DLT]|IV)|F(?:IGURE|IGCAPTION|OOTER)|H[1-6]|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL|VIDEO|AUDIO)$/;
保存后,音、视频将可以在编辑器中正常渲染。
其次引入 Squire 库(假设修改后的源码已经上传到可用的空间):
<script src="https://638183.freep.cn/638183/web/js/squire.min.js"></script>
接着我们就可以编写插入音视频的相关代码了。下面是一个可插入音、视频到编辑器中的完整案例:
<style>
#edDiv { width: 1000px; height: 600px; border: 1px solid gray; overflow: auto; padding: 8px 16px; margin: 20px auto; }
#toolbar { width: 1000px; margin: auto; }
</style>
<div id="edDiv"></div>
<div id="toolbar">
<button id="addAudio" type="button" value="audio">插入音频</button>
<button id="addVideo" type="button" value="video">插入视频</button>
</div>
<script src="https://638183.freep.cn/638183/web/js/squire.min.js"></script>
<script>
// 创建 Squire 实例并链式插入空行然后令编辑器获得焦点
const editor = new Squire(document.querySelector('#edDiv'), {
blockTag: 'p', // 使用p标签换行
}).setHTML('<p><br></p>').focus();
// 插入音、视频按钮点击事件
const btns = document.querySelectorAll('#toolbar > button');
btns.forEach(btn => {
btn.onclick = () => {
editor.moveCursorToEnd(); // 移动输入光标至文档末尾
const src = prompt('请输入媒体地址:', ''); // 获取媒体地址
if (!src) return; // 点击了取消按钮
// 媒体配置
const opt = {
src: src.trim(), // 地址(去除头尾空白)
controls: 'controls', // 控制界面
autoplay: 'autoplay', // 自动播放
loop: 'loop' // 循环播放
};
editor.focus(); // 输入框回去的焦点
// 使用insertHTML API插入媒体标签
editor.insertHTML(createMediaCode(btn.value, opt));
};
});
// 函数 : 创建媒体HTML代码
function createMediaCode(name, params) {
let attrStr = `<${name}`; // 媒体标签
// 遍历配置获取并设置媒体属性
Object.entries(params).forEach(([k, v]) => {
attrStr += ` ${k}="${v}"`;
});
attrStr += `></${name}>`; // 媒体标签闭合
return attrStr; // 返回结果
}
</script>
以上案例,createMediaCode() 函数本质上与 Squire 无关,它只是根据传参创建媒体标签的HTML代码。核心在按钮的点击事件中,共两点:其一,使用 moveCursorToEnd API 处理待插入媒体的位置以防止前边的标签被覆盖,其二,使用 InsertHTML API 将 createMediaCode() 函数返回的结果(媒体标签代码)插入到当前输入光标所在处。
媒体标签可以插入,其它标签如果没有相应 API 或不合适使用的,也可以仿造本案例加以实现(我们自定义的函数 createMediaCode() 可以改个名称以便令其名副其实)。
|