DNN CK Editor v4.18.0预览模式无法加载CSS路径的问题

方法1：修改预览模板文件 #

DNN的CK Editor预览模式使用独立的HTML模板，不会自动继承编辑模式的CSS配置。

• 找到DNN安装目录下对应皮肤的预览模板，比如默认路径：Portals/_default/CKEditor/skins/moono-lisa/preview.html
• 在文件的<head>标签内添加common.css的引用，示例：

  <link rel="stylesheet" href="/Portals/0/Styles/common.css" type="text/css" />
  

  替换为你实际的CSS文件绝对路径。

方法2：完善CK Editor自定义配置 #

如果使用cust_config.js，需同时配置编辑模式和预览模式的CSS属性：

• 修改cust_config.js内容：

  CKEDITOR.editorConfig = function( config ) {
      // 编辑/WYSIWYG模式CSS
      config.contentsCss = '/Portals/0/Styles/common.css';
      // 预览模式专属CSS
      config.previewCss = '/Portals/0/Styles/common.css';
  };
  

• 在DNN的「Custom Editor Options」中，确保Custom Configuration File的路径指向正确的cust_config.js文件（比如/Portals/0/CKEditor/cust_config.js）。

方法3：验证路径与权限 #

• 使用绝对路径（以/开头）引用CSS，避免相对路径在预览模式下解析出错。
• 检查common.css的文件权限，确保匿名用户可读取，预览模式可能以匿名身份加载资源。

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