css - 如何应用ckeditor css输出

Question

在我将 editet 文本从 ckeditor 保存到数据库，然后将其加载到页面后，Ck-editor 本身就可以正常工作。生成的 html 未格式化，是否有任何附加的 ckeditor js 函数必须应用于目标区域，或者是否有任何 detault 类需要添加到文本容器？

我检查了 ck-editor css 文件，但没有特定的类，比如当你检查 ckeditor 文件中的“contents.css”时，有“img.left{border: 1px solid #ccc; ..”这很令人毛骨悚然由于没有特定的类，它可以在普通的 iframe 中工作，但如果我在更复杂的页面中显示来自 ckeditor 的文本，我必须重写 css，如“.wysiwyg img.left”，然后通过为 .wysiwyg 修改的 reset.css 重置所有 css类，并且很难重置所有内容，难道我在 ck-editor 文档中错过了其他一些方法吗？因为我在其中看到的只是实际编辑器中的示例，而不是如何设置生成的文本本身的样式。

Answer 1

如果您只是想让在 CKEditor 中编写的 HTML 在您的页面中看起来相同，首先您必须将它插入到带有自定义类的 div 元素中，例如，“my-container”。

然后您必须在页面中包含 contents.css。在这里你必须选择:1)使用Scoped Stylesheets或 2) 修改 contents.css，确定每个规则的范围。

<强>1。使用范围样式表

在这种情况下，您应该使用 Scoped Stylesheets 和 JQuery Scoped CSS plugin (由于当前缺乏浏览器支持)。

您的 HTML 代码如下所示:

<div class="my-container">
    <style scoped>
        @import "ckeditor/contents.css";
    </style>
    <!-- Your HTML goes here -->
</div>

<强>2。在 contents.css 中限定每个规则的范围

在这种情况下，您必须链接到 CKEditor 的 contents.css 文件的修改副本。每个规则的选择器都必须限定为“my-container”类，因此它不会影响页面的其余部分。示例 contents.css 文件:

.my-container
{
    /* Font */
    font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
    font-size: 12px;

    /* Text color */
    color: #333;

    /* Remove the background color to make it transparent */
    background-color: #fff;

    margin: 20px;
}

.my-container .cke_editable
{
    font-size: 13px;
    line-height: 1.6em;
}

.my-container blockquote
{
    font-style: italic;
    font-family: Georgia, Times, "Times New Roman", serif;
    padding: 2px 0;
    border-style: solid;
    border-color: #ccc;
    border-width: 0;
}

.my-container .cke_contents_ltr blockquote
{
    padding-left: 20px;
    padding-right: 8px;
    border-left-width: 5px;
}

.my-container .cke_contents_rtl blockquote
{
    padding-left: 8px;
    padding-right: 20px;
    border-right-width: 5px;
}

.my-container a
{
    color: #0782C1;
}

.my-container ol,.my-container ul,.my-container dl
{
    /* IE7: reset rtl list margin. (#7334) */
    *margin-right: 0px;
    /* preserved spaces for list items with text direction other than the list.    (#6249,#8049)*/
    padding: 0 40px;
}

.my-container h1,.my-container h2,.my-container h3,.my-container h4,.my-container h5,.my-container h6
{
    font-weight: normal;
    line-height: 1.2em;
}

.my-container hr
{
    border: 0px;
    border-top: 1px solid #ccc;
}

.my-container img.right
{
    border: 1px solid #ccc;
    float: right;
    margin-left: 15px;
    padding: 5px;
}

.my-container img.left
{
    border: 1px solid #ccc;
    float: left;
    margin-right: 15px;
    padding: 5px;
}

.my-container pre
{
    white-space: pre-wrap; /* CSS 2.1 */
    word-wrap: break-word; /* IE7 */
}

.my-container .marker
{
    background-color: Yellow;
}

.my-container span[lang]
{
   font-style: italic;
}

.my-container figure
{
    text-align: center;
    border: solid 1px #ccc;
    border-radius: 2px;
    background: rgba(0,0,0,0.05);
    padding: 10px;
    margin: 10px 20px;
    display: block; /* For IE8 */
}

.my-container figure figcaption
{
    text-align: center;
    display: block; /* For IE8 */
}