如何将 CKEditor 的 CSS 应用于输出

Question

如何将 CKEditor 的 CSS 应用于输出

3

Ck-editor在编辑时表现良好，但是当我将编辑后的文本保存到数据库中并加载到页面上时，生成的HTML格式不规范。是否需要应用其他CKeditor js功能到目标区域，或者需要向文本容器添加默认类？我已经检查了CK-editor css文件，但没有特定的类，就像当您检查“contents.css”中的CKeditor文件时，“img.left{border: 1px solid #ccc; ..”那很令人毛骨悚然，因为没有特定的类，它会在纯iframe中工作，但如果我在更复杂的页面中显示来自CKeditor的文本，则必须像“.wysiwyg img.left”一样重写CSS，然后通过修改.wysiwyg类的reset.css来重置所有CSS，而且重置所有内容非常困难。CK-editor文档中是否有我错过的其他方法？因为我在那里看到的都是实际编辑器中的示例，而不是如何为生成的文本自定义样式。

- Jiro Matchonson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ncardeli · Accepted Answer

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

然后，您必须在页面中包含contents.css。这里有两个选择：1）使用Scoped Stylesheets或2）修改contents.css，并为每个规则设置作用域。 1. 使用Scoped Stylesheets 在这种情况下，您应该使用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 */
}