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)$/;

<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>