ASP.NET MVC中CKEditor在Chrome粘贴网页内容丢失内联样式求助

我之前在项目里也遇到过一模一样的Chrome专属粘贴样式丢失问题，IE和Firefox都正常，唯独Chrome会把div的style属性干掉。结合你的配置和测试场景，给你几个能解决问题的思路：

1. 优化CKEditor核心粘贴配置 #

首先，确保你的粘贴相关配置足够宽松，并且明确针对网页粘贴做设置：

• 你已经开了allowedContent: true和extraAllowedContent: '*(*);*{*}'，但可以再加上pasteFilter: null来完全禁用默认的粘贴过滤器（默认过滤器可能在Chrome下会更严格）。
• 明确禁用纯文本粘贴：forcePasteAsPlainText: false

修改后的配置片段：

$(document).ready(function () {
 CKEDITOR.replace("myckeditor", {
 height: 450,
 bodyClass: 'document-editor',
 contentsCss: [CKEDITOR.basePath + 'contents.css', CKEDITOR.basePath + 'pastefromword.css'],
 extraPlugins: 'pastefromword,tabletools,tableresize,tableselection,colordialog',
 removePlugins: 'elementspath,wsc,scayt',
 allowedContent: true,
 extraAllowedContent: '*(*);*{*}',
 pasteFromWordRemoveFontStyles: false,
 scayt_sLang: "en_US",
 // 新增的关键配置
 pasteFilter: null,
 forcePasteAsPlainText: false
 });
});

2. 监听粘贴事件手动保留样式 #

Chrome的剪贴板处理机制和其他浏览器不同，它会对网页来源的粘贴内容做额外的清理。我们可以通过监听CKEditor的paste事件，手动干预剪贴板的HTML内容，确保style属性不被移除：

$(document).ready(function () {
 // 编辑器初始化代码...
 CKEDITOR.replace("myckeditor", { /* 你的原有配置 */ });

 // 针对Chrome的粘贴事件处理
 CKEDITOR.instances.myckeditor.on('paste', function(evt) {
   // 获取剪贴板中的HTML内容
   var htmlContent = evt.data.dataValue;
   // 确保div标签的style属性被保留（可扩展到其他标签）
   htmlContent = htmlContent.replace(/<div([^>]+?)>/g, function(match, attrs) {
     return `<div${attrs}>`;
   });
   // 把处理后的内容放回剪贴板数据中
   evt.data.dataValue = htmlContent;
 });
});

这个方法的核心是拦截粘贴动作，直接修改要插入编辑器的HTML，绕开Chrome自带的内容清理逻辑。

3. 检查CKEditor版本兼容性 #

如果你的CKEditor版本比较旧，可能存在Chrome的兼容性bug。建议升级到最新的稳定版（比如CKEditor 4的最新版本），很多这类浏览器专属的粘贴问题在新版本里已经被修复。

4. 测试验证 #

修改配置后，用你的测试页面重新测试：

• 复制带style的div内容，粘贴到Chrome的CKEditor中，查看style属性是否保留
• 同时测试从其他复杂网页复制内容，确认颜色、粗体、下划线等内联样式是否正常

按照这个流程走下来，基本能解决Chrome下的粘贴样式丢失问题。

内容的提问来源于stack exchange，提问作者शेखर