如何应用ckeditor css输出

Question

Ck-editor工作本身很好，之后我保存编辑文本从ckeditor数据库，然后我加载到页面。生成的html是未格式化的，是否有任何额外的ckeditor js函数必须应用于目标区域，或者是否有任何默认的类需要添加到文本容器?

我检查了ck-editor css文件，但没有特定的类，就像当你检查ckeditor文件中的"content .css"时，有"img. css"。左{border: 1px solid #ccc;"这很令人毛骨悚然，因为没有特定的类，它可以在普通的iframe中工作，但如果我在更复杂的页面中显示来自ckeditor的文本，我必须重写CSS。"所见即所得img。然后重置所有的CSS修改reset. CSS为。wysiwyg类，这是相当困难的重置一切，不是有一些其他的方式，我只是错过了在编辑器文档?因为我在那里看到的只是实际编辑器中的示例，而不是如何样式生成的文本本身。

Answer 1

如果你只是想在CKEditor中生成的HTML在你的页面中看起来一样，首先你必须将它插入到div元素中，并使用自定义类，例如，"my-container"。

那么你必须在你的页面中包含content .css。这里你有两个选择:1)使用有作用域的样式表，或者2)修改content .css，为每条规则限定作用域。

1。使用作用域样式表

在这种情况下，你应该使用作用域样式表和JQuery作用域CSS插件(由于目前缺乏浏览器支持)。

你的HTML代码应该是这样的:

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

2。在contents.css

中定义每个规则的作用域

在这种情况下，你必须链接到CKEditor的content .css文件的修改副本。每个规则的选择器都必须限定在"my-container"类的范围内，这样它就不会影响页面的其余部分。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 */
}