用CSS在CKEditor中设置预览样式

Styling the preview in CKEditor with CSS

本文关键字：样式 设置 CSS CKEditor      更新时间：2023-09-26

我已经将CKEditor集成到我的网站CMS中。预览按钮可以工作，但我无法让它使用样式表（CSS）。我已经编辑了位于以下位置的preview.html：

网站/ceditor/plugins/preview/

但它似乎听不到我在从所见即所得编辑器中提取内容的代码周围包装的任何html。

正如我所理解的这段代码：

<script>
var doc = document;
doc.open();
doc.write( window.opener._cke_htmlToLoad );
doc.close();
delete window.opener._cke_htmlToLoad;
</script>

拉入编辑器中的任何内容，所以我应该能够围绕该html进行包装，以包含每个页面都可用的元素？还有指向样式表的链接？

有人做过这种事吗？有可能吗？

"window.oopener._cke_htmlToLoad"似乎是一个字符串（包含一个完整的html文档）。

要获得<身体>lt/身体>，您可以使用以下正则表达式：

var doc = window.opener._cke_htmlToLoad; // is string
var innerBody = ( doc.replace(/((?:.(?!<'s*body[^>]*>))+.<'s*body[^>]*>)|(<'s*'/'s*body's*'>.+)/g,'') );
document.getElementById('insertIntoMe').innerHTML = innerBody;

从我的测试来看，这似乎只适用于Firefox。但Chrome和Internet Explorer直接显示窗口文档，不允许任何更改。所以也许其他人可以提供更好的解决方案？

相关文章：