如何在CKEditor中加载脚本代码？附具体嵌入示例

首先得明确：CKEditor出于安全考量，默认会过滤掉<script>这类可能存在风险的标签，所以要实现你的需求，得从配置和内容处理两方面入手，下面是具体步骤：

1. 修改CKEditor配置，允许脚本标签 #

你需要调整编辑器的过滤规则，让它允许<script>及相关属性存在。分两种版本说明：

针对CKEditor 4 #

找到编辑器的配置文件（比如config.js），添加以下配置：

CKEDITOR.editorConfig = function( config ) {
    // 方案1：完全关闭自动标签过滤（适合完全信任内容来源的场景）
    config.allowedContent = true;

    // 方案2：更精细地允许特定标签和属性（推荐，安全性更高）
    // config.allowedContent = 'div[id]; script[src,type]';
};

针对CKEditor 5 #

需要引入专门的脚本元素插件，并在构建配置中声明：

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import ScriptElement from '@ckeditor/ckeditor5-html-support/src/scriptelement';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ Essentials, ScriptElement /* 其他你需要的插件 */ ],
        toolbar: [ /* 你的工具栏配置项 */ ]
    } )
    .then( editor => {
        console.log( 'Editor initialized', editor );
    } )
    .catch( error => {
        console.error( error.stack );
    } );

2. 插入目标脚本代码 #

配置完成后，切换到编辑器的源代码模式（Source Mode），直接插入你的代码片段：

<div id="15175860223750456"><script type="text/JavaScript" src="https://www.aparat.com/embed/xom4D?data[rnddiv]=15175860223750456&data[responsive]=yes"></script></div>

CKEditor 5用户需要确保已安装并启用"源代码编辑"插件，才能直接编辑HTML内容。

3. 前端渲染的注意事项 #

即使编辑器保存了脚本代码，前端页面渲染时可能因安全策略阻止脚本执行，你可以：

• 检查页面的Content Security Policy（CSP）规则，确保允许加载目标域名的脚本
• 若框架自动过滤脚本，可手动解析内容：提取<script>标签信息，动态创建新的script节点插入到DOM中

重要提醒 #

允许脚本标签或关闭过滤会带来XSS安全风险，仅建议在完全信任内容来源的场景下使用（比如仅管理员编辑内容的后台系统）。

内容的提问来源于stack exchange，提问作者S.M_Emamian