ckeditor 编辑区中的内容不受本页样式影响

Posted 2023-04-12

比如我把一个完整的包含css样式的html复制到编辑区，并且原样显示，不受这个textarea样式的影响，怎么办？

参考技术A 1，将ckeditor解压打开，打开_Samples，将ckeditor文件夹拷贝项目中的根目录下，把bin放在根目录下

2，将ckfinder解压，ckfinder文件夹拷贝项目中的根目录下，把bin放在根目录下，把_sample，_source，help文件夹删除掉，（注：没有用）

3，在ckeditor文件下找到config.js 打开，找到
在CKEDITOR.editorCongig=function(config)

//填写以下内容，图片，flash路径
config.uiColor = '#F7F8F9'
config.scayt_autoStartup = false
config.language = 'zh-cn'; //中文
config.filebrowserBrowseUrl = 'ckfinder/ckfinder.html';
config.filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html?Type=Images';
config.filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html?Type=Flash';
config.filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector.aspx?command=QuickUpload&type=Flash';
；

4，在ckfinder文件下找到config.ascx文件，打开
1)把public overrider bool ChekcAuthentication()return false;改为：return true;
2)public overrider void SetConfig()BaseUrl = "~/ckfinder/userfiles/";

5，在页面中head标签内写入：
<script type="text/javascript" src="ckeditor/ckeditor.js" ></script>
<script type="text/javascript" src="ckfinder/ckfinder.js"></script>
如果有母版页，在母版页中写
--注：单纯的配置，6,7可以不要，但是一旦要入数据库中，就要配置6.7步骤

6，在Default.aspx页面中，写入<%@Page ValidateRequest="false"%>

7,在web.config文件中，在system.web下写 <httpRuntime requestValidationMode="2.0"/>

8，在Default.aspx页面中添加<asp:TextBox ID="txtcontent" runat="server" TextMode="MultiLine" Height="503px" Width="100%" class="ckeditor" ></asp:TextBox>
<script type="text/javascript">
CKEDITOR.replace('<%= txtcontent.ClientID %>', skin: 'kama' );
</script>(用ckfinder文件下skins文件下kama文件下的，skin.js，样式)

参考资料：ckeditor+ckfinder的集成

参考技术B 313791572

将样式应用于 CKEditor 5 的 HTML 输出

【中文标题】将样式应用于 CKEditor 5 的 HTML 输出

【英文标题】：Apply styles to HTML output of CKEditor 5

【发布时间】：2019-02-23 08:38:55

【问题描述】：

我正在使用 CKEditor 5 来帮助我的客户发布他们的文章。但编辑器生成的内容是纯 HTML 片段。如何样式化内容？页面<div/>中的样式是否可能与ckeditor5中的样式相同？

我知道我可以为内容编写 CSS，是最好的方法吗？

【参考方案1】：

您的问题归结为FAQ entry：

没有 contents.css 文件这样的东西，因为在 CKEditor 5 功能带来自己的内容样式，默认情况下包含 在 JavaScript 构建中并由 style-loader 加载（它们可以是 也提取了）。它优化构建的大小作为样式 未使用的功能被简单地排除在外。

虽然某些样式是由功能提供的，但这取决于 开发人员确保 CKEditor 5 创建的内容正确 风格，无论是在前端和后端。样式化 编辑器中的内容（后端），使用 .ck-content CSS 类

目前编辑器提供的内容样式很少。这就是为什么要由网站维护人员在前端/后端设置已编辑内容的样式。

例如，要确保<a> 元素的样式正确，您可能需要这样的东西：

#content-container-in-frontend a,
#backend-container .ck-content a 
   ...

---

附：不要犹豫，在the issue about content styles 发表您的意见。我们很想更多地了解您的用例（您的环境是什么？您使用 Webpack？您如何管理项目中的样式？），您期望什么以及最适合您的。

---

更新：您现在可以浏览编辑器使用的内容样式并在应用程序的前端使用它们。 Learn more.

【讨论】：

在我的用例中，我只是从 CDN 加载经典编辑器，并且想要在不加载 CK 时包含样式，无论如何要这样做？