Squire 编辑器实现音视频的插入功能
<style>.artBox { font: normal 18px/1.5 sans-serif; overflow: auto; position: relative; }
.artBox p { margin: 10px 0; }
.artBox code, .artBox pre { background: #f7f4f3; padding: 2px 6px; tab-size: 4; }
.artBox pre { padding: 10px 20px; white-space: pre-wrap; word-wrap: break-word; }
.artBox pre code { padding: 0; background: none; }
.artBox blockquote { margin: 10px 20px; padding: 2px 15px; border-left: 3px solid skyblue; background: #e7e5e3; }
</style>
<div class="artBox">
<p>开发一款符合现代浏览器标准所见即所得的Web在线编辑器是一件相当复杂、难度极大的工作，好在有各种库为我们提供便利，借助它们，在网页中嵌入自定义的WYSIWYG编辑器变得相对简单。众多此类JS库中，Squire值得关注。</p>
<p>Squire为处理邮件中的HTML而开发，它虽然亮丽，也因对标问题存在一定的局限性，例如插入 h1~h6 标题 API 都没有提供，处理音视频的 API 更没有。插入音视频是当代Web页的刚需，Squire 不提供相应的API，我们可以变通实现。</p>
<p><strong>首先</strong>需要让 Square 支持音视频所见即所得的渲染，唯一的途径是修改源码，让音视频进入“白名单”，否则即使插入成功，也不能在编辑器中呈现出效果来。打开下载的 Squire 源码，找到 <code>var allowedBlock = /.../</code> 的语句，这是一个正则表达式，我们只需在表达式的后面加入 <code>|VIDEO|AUDIO</code> 即可，改变后的语句如下：</p>
<pre><code>var allowedBlock = /^(?:A(?:DDRESS|RTICLE|SIDE|UDIO)|BLOCKQUOTE|CAPTION|D(?:|IV)|F(?:IGURE|IGCAPTION|OOTER)|H|HEADER|L(?:ABEL|EGEND|I)|O(?:L|UTPUT)|P(?:RE)?|SECTION|T(?:ABLE|BODY|D|FOOT|H|HEAD|R)|COL(?:GROUP)?|UL|VIDEO|AUDIO)$/;
</code></pre>
<p>保存后，音、视频将可以在编辑器中正常渲染。</p>
<p><strong>其次</strong>引入 Squire 库（假设修改后的源码已经上传到可用的空间）：</p>
<pre><code><script src="https://638183.freep.cn/638183/web/js/squire.min.js"></script>
</code></pre>
<p><strong>接着</strong>我们就可以编写插入音视频的相关代码了。下面是一个可插入音、视频到编辑器中的完整案例：</p>
<div class="codebox" data-prev="1">
<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(() => {
attrStr += ` ${k}="${v}"`;
});
attrStr += `></${name}>`; // 媒体标签闭合
return attrStr; // 返回结果
}
</script>
</div>
<p>以上案例，createMediaCode() 函数本质上与 Squire 无关，它只是根据传参创建媒体标签的HTML代码。核心在按钮的点击事件中，共两点：其一，使用 moveCursorToEnd API 处理待插入媒体的位置以防止前边的标签被覆盖，其二，使用 InsertHTML API 将 createMediaCode() 函数返回的结果（媒体标签代码）插入到当前输入光标所在处。</p>
<p>媒体标签可以插入，其它标签如果没有相应 API 或不合适使用的，也可以仿造本案例加以实现（我们自定义的函数 createMediaCode() 可以改个名称以便令其名副其实）。</p>
</div>
<script>
function loadLineNumFile() {
const script = document.createElement('script');
script.charset = 'utf-8';
script.src = 'https://638183.freep.cn/638183/web/helight/linenumber-2026.js';
script.defer = true;
script.onload = () => addLineNumber();
document.head.appendChild(script);
}
loadLineNumFile();
</script> 我插入一个熊猫的视频，看着好小啊，不能放大么{:4_204:} 也试着插入一个音乐，都能完美实现。
媒体配置里的这个 src: src.trim(), // 地址（去除头尾空白）倒是不知道呢，其他的知道点。{:4_187:} “Squire为处理邮件中的HTML而开发，”现在被黑黑灵活运用，可以加入音频视频了，黑黑厉害{:4_199:} 红影 发表于 2026-5-14 19:26
“Squire为处理邮件中的HTML而开发，”现在被黑黑灵活运用，可以加入音频视频了，黑黑厉害
这个不算啥，毕竟，它有 insertHTML API 红影 发表于 2026-5-14 19:24
也试着插入一个音乐，都能完美实现。
媒体配置里的这个 src: src.trim(), // 地址（去除头尾空白）倒 ...
JS 中，对字符串可以使用 trim() 方法剔除头尾空白 红影 发表于 2026-5-14 19:12
我插入一个熊猫的视频，看着好小啊，不能放大么
理论上，这是视频的原始大小（所有的视频文件都有自己初设的尺寸）。一楼的案例作为演示，没有加入宽高设置 看不懂，{:4_173:}看不懂是正常的，看懂我就成仙了，键盘支持！
马黑黑 发表于 2026-5-14 19:35
这个不算啥，毕竟，它有 insertHTML API
你看得懂觉得不算啥，我这玩意不懂的就觉得太厉害了{:4_187:} 马黑黑 发表于 2026-5-14 19:36
JS 中，对字符串可以使用 trim() 方法剔除头尾空白
这个之前一点不知道呢{:4_173:} 马黑黑 发表于 2026-5-14 19:38
理论上，这是视频的原始大小（所有的视频文件都有自己初设的尺寸）。一楼的案例作为演示，没有加入宽高设 ...
所以就自动显示原始尺寸了。 红影 发表于 2026-5-14 21:53
所以就自动显示原始尺寸了。
是的。
另外，视频标签是行内标签，如果它之前有同一行的内容，其尺寸可能也会受到影响。一般来说，先打一个回车键再发布视频标签可能会好一些 红影 发表于 2026-5-14 21:51
这个之前一点不知道呢
没有系统学习过一般都不知道的 红影 发表于 2026-5-14 21:50
你看得懂觉得不算啥，我这玩意不懂的就觉得太厉害了
入门了就不会酱紫 霜染枫丹 发表于 2026-5-14 21:44
看不懂，看不懂是正常的，看懂我就成仙了，键盘支持！
感谢支持 感谢黑黑分享{:4_171:} 小辣椒 发表于 2026-5-14 22:37
感谢黑黑分享
阔气阔气 马黑黑 发表于 2026-5-14 22:20
是的。
另外，视频标签是行内标签，如果它之前有同一行的内容，其尺寸可能也会受到影响。一般来说，先 ...
嗯嗯，可能就会大一点了。 马黑黑 发表于 2026-5-14 22:21
没有系统学习过一般都不知道的
只在这里跟着黑黑学了{:4_173:} 马黑黑 发表于 2026-5-14 22:21
入门了就不会酱紫
入门还早呢{:4_173:}
页:
[1]
2