在Dynamics NAV中集成CKEditor的文件夹层级限制问题咨询

我之前折腾过Dynamics NAV JS AddIn和CKEditor的整合，刚好踩过类似的路径配置坑，给你分享一套可行的拆分方案，完全适配NAV要求的文件夹结构：

第一步：明确NAV AddIn的强制结构 #

先再确认下NAV的核心要求，避免踩基础坑：

• ZIP包根目录必须包含manifest.xml
• 根目录下必须有三个一级子文件夹：Script（存放JS文件）、Stylesheet（存放CSS文件）、Image（存放图片资源）
• 子文件夹内可以创建二级/三级子目录来分类管理文件，NAV会识别嵌套路径

第二步：拆分CKEditor文件到对应目录 #

把下载好的CKEditor完整包（或精简后的版本）按文件类型拆分到三个指定文件夹：

1. Script文件夹（所有JS文件） #

• 核心文件：把ckeditor.js、config.js、contents.js直接放到Script/根下
• 插件：将plugins/目录完整复制到Script/下，即Script/plugins/[插件名]/，保留每个插件里的.js文件（插件的css/img后续移到对应目录）
• 语言包：把lang/目录复制到Script/下，即Script/lang/
• 皮肤JS：如果皮肤包含.js文件（比如moono-lisa里的editor.js），移到Script/skins/[皮肤名]/下

2. Stylesheet文件夹（所有CSS文件） #

• 插件样式：把每个插件目录里的.css文件移到Stylesheet/plugins/[插件名]/下
• 皮肤样式：把skins/[皮肤名]/下的所有.css文件移到Stylesheet/skins/[皮肤名]/下
• 自定义样式：如果有自己编写的CSS，直接放到Stylesheet/根下

3. Image文件夹（所有图片资源） #

• 插件图片：把每个插件目录里的图片（.png/.svg等）移到Image/plugins/[插件名]/下
• 皮肤图片：把skins/[皮肤名]/下的所有图片移到Image/skins/[皮肤名]/下
• 自定义图片：如果有自己的图标等资源，放到Image/根下

第三步：配置manifest.xml #

在根目录的manifest.xml里声明所有需要加载的脚本和样式，示例模板如下：

<?xml version="1.0" encoding="utf-8"?>
<Manifest>
  <Resources>
    <!-- 核心CKEditor脚本 -->
    <Script>Script/ckeditor.js</Script>
    <Script>Script/config.js</Script>
    <!-- 按需引用你需要的插件脚本，比如基础插件 -->
    <Script>Script/plugins/toolbar/plugin.js</Script>
    <Script>Script/plugins/basicstyles/plugin.js</Script>
    <!-- 语言包 -->
    <Script>Script/lang/zh-cn.js</Script>
    
    <!-- 皮肤样式 -->
    <Stylesheet>Stylesheet/skins/moono-lisa/editor.css</Stylesheet>
    <Stylesheet>Stylesheet/skins/moono-lisa/dialog.css</Stylesheet>
    <!-- 插件样式 -->
    <Stylesheet>Stylesheet/plugins/basicstyles/styles.css</Stylesheet>
  </Resources>
  <ScriptMethods>
    <!-- 声明NAV可以调用的JS方法，比如初始化编辑器的方法 -->
    <ScriptMethod Name="InitEditor" />
  </ScriptMethods>
</Manifest>

第四步：调整CKEditor的路径配置 #

因为文件拆分后，CKEditor默认的资源路径会失效，必须在初始化前手动指定路径，在你的自定义JS文件（或config.js）里添加：

// 配置CKEditor的基础路径，对应NAV里的Script文件夹
CKEDITOR.basePath = './Script/';
// 插件路径
CKEDITOR.pluginsPath = CKEDITOR.basePath + 'plugins/';
// 皮肤路径，注意指向Stylesheet文件夹下的skins目录
CKEDITOR.skinsPath = './Stylesheet/skins/';

// 初始化编辑器的方法，供NAV调用
function InitEditor(containerId) {
  CKEDITOR.replace(containerId, {
    // 你的自定义配置，比如语言、工具栏等
    language: 'zh-cn',
    toolbar: 'Basic'
  });
}

第五步：打包测试 #

• 把manifest.xml和三个子文件夹一起打包成ZIP（注意不要把它们放到一个额外的父文件夹里，ZIP打开后直接看到这四个内容）
• 导入到Dynamics NAV的AddIn里，测试编辑器是否能正常加载、显示和使用
• 如果遇到资源加载错误，打开NAV的开发者工具（F12）查看控制台的错误信息，调整路径配置即可

额外优化建议 #

• 精简CKEditor：只保留你需要的插件和皮肤，删掉多余文件，减少ZIP包体积，也避免不必要的加载
• 缓存测试：如果修改后没生效，清一下NAV的AddIn缓存，确保加载的是最新的文件

内容的提问来源于stack exchange，提问作者Holger