请马上登录，朋友们都在花潮里等着你哦：）
您需要 登录 才可以下载或查看，没有账号？立即注册
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() 可以改个名称以便令其名副其实）。
| 
发表于 2026-5-14 18:35
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
楼主
发表于 2026-5-14 21:44
看不懂是正常的，看懂我就成仙了，键盘支持！
