You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在CKEditor 5中启用source editor(源码编辑器)选项?

CKEditor 5 经典构建版启用源码编辑器方法

CKEditor 5 官方默认提供的经典预构建包未集成源码编辑功能,需要手动添加SourceEditing插件完成配置,操作步骤如下:

  • 插件安装
    若使用npm包管理方式引入CKEditor,执行如下命令安装对应插件:
    npm install @ckeditor/ckeditor5-source-editing
    若使用CDN引入,直接加载对应版本的SourceEditing插件资源即可。
  • 配置注册插件
    在编辑器初始化配置中完成插件注册和工具栏项添加,参考配置示例:
    import { ClassicEditor, SourceEditing } from 'ckeditor5';
    
    ClassicEditor
      .create( document.querySelector('#editor'), {
        // 注册源码编辑插件
        plugins: [ SourceEditing, /* 其余原有插件保持不变 */ ],
        // 工具栏添加源码编辑入口
        toolbar: [ 'sourceEditing', /* 其余原有工具栏项保持不变 */ ]
      } )
      .catch( error => console.error(error) );
    

注意:如果使用的是直接下载的官方预构建静态压缩包,需要通过CKEditor 5在线自定义构建工具勾选SourceEditing插件后重新生成构建包,替换现有资源后再按上述方式配置即可。

内容的提问来源于stack exchange,提问作者Selvavelan

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.27 18:24:07