可通过源码模式插入HTML、JavaScript动态注入内容、配置允许脚本运行及iframe预览实现UEditor中HTML代码嵌入与渲染。
如果您希望在 UEditor 中嵌入并运行 HTML 代码，以便实现自定义内容展示或动态效果，可以通过多种方式将原始 HTML 内容正确插入并渲染。以下是具体操作方法：
一、使用编辑器的“源码模式”插入HTML
UEditor 提供了源码视图功能（source），允许用户直接输入和编辑 HTML 代码。通过该模式可将自定义 HTML 插入到编辑器内容中。
1、打开 UEditor 编辑器界面，点击工具栏上的源码按钮，进入 HTML 源码编辑模式。
2、在文本区域中粘贴或编写需要运行的 HTML 代码，例如：<div style="color:red;">这是一段红色文字</div>。
立即学习“前端免费学习笔记（深入）”；
3、再次点击源码按钮退出源码模式，返回可视化编辑状态，查看 HTML 是否正常渲染。
二、通过JavaScript动态插入HTML内容
利用 UEditor 提供的 API 方法，可以在页面加载后或用户触发事件时，向编辑器内注入 HTML 内容，实现动态更新。
1、确保编辑器实例已成功初始化，例如：var ue = UE.getEditor('editor');。
2、调用 setContent 方法设置包含 HTML 的字符串内容：ue.setContent('<p>动态插入的段落</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11765" title="Expanso yaml-to-json"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="Expanso yaml-to-json" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11765" title="Expanso yaml-to-json">Expanso yaml-to-json</a>
<p>使用 Expanso Edge 管道将 YAML 输入转换为 JSON 格式。</p>
</div>
<a href="/xiazai/skill11765" title="Expanso yaml-to-json" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<script>alert("脚本执行")</script>');。
3、若仅追加内容而不覆盖原有内容，可使用 execCommand('insertHtml', htmlString) 方法：ue.execCommand('insertHtml', '<div class="custom-box">新模块</div>');。
三、配置编辑器允许运行脚本代码
默认情况下，UEditor 会过滤掉 script 等可能带来安全风险的标签。如需让嵌入的 HTML 中的脚本运行，必须调整过滤规则。
1、在初始化编辑器时添加配置项：allowDivTransToP: false 和 xssFiltersEnabled: false。
2、修改服务器端配置文件（如 Java 版 ueditor.config.js 或 config.json）中的 xss 过滤策略，放行 <script></script> 标签。
3、注意：禁用 XSS 过滤存在安全风险，仅建议在可信环境或内部系统中启用。
四、在iframe中预览完整HTML运行效果
为了更真实地呈现嵌入 HTML 的运行效果，可在编辑器外创建一个独立的预览区域，使用 iframe 加载包含编辑器输出内容的完整页面。
1、获取编辑器当前内容：var htmlContent = ue.getContent();。
2、构建完整的 HTML 文档结构字符串，包括 、、
等标签。3、将内容写入同域下的 iframe 元素：document.getElementById('previewFrame').contentWindow.document.write(fullHtml);。
此时所有嵌入的 CSS 与 JavaScript 均可正常运行。
