如何将ckeditor CSS应用于输出 [英] How to apply ckeditor css to output

问题描述

在我将ckeditor中的editet文本保存到数据库，然后将其加载到页面之后，CK编辑器的工作原理很好.生成的html是未格式化的，是否有任何附加的ckeditor js函数必须应用到目标区域，或者是否需要将任何detault类添加到文本容器?

Ck-editor works itself good, after i save editet text from ckeditor to database, and then i load it to page. Generated html is unformated, is there any aditional ckeditor js functions that have to be applied to target area, or is there any detault class needed to be added to text container ?

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

I checked ck-editor css files but there is no specific class, like when you check "contents.css" in ckeditor files and there is "img.left{border: 1px solid #ccc; .." thats pretty creepy since there is no specific class, it would work in plain iframe but if i show text from ckeditor in more complex page i have to rewrite css like ".wysiwyg img.left" and then reset all css by modified reset.css for .wysiwyg class, and its pretty hard to reset everything, isnt there some other way that i just missed badly in ck-editor documentation? since all i see in there are only examples in actual editor, not how to style generated text itself.

推荐答案

如果只希望在CKEditor中编写的HTML在页面内看起来相同，则首先必须将其插入具有自定义类的div元素中. ，我的容器".

If you just want the HTML authored in CKEditor to look the same inside your page, first you must insert it inside a div element with a custom class, for example, "my-container".

然后，您必须在页面中包含contents.css.在这里，您可以选择:1)使用作用域样式表或2)修改contents.css，确定每个规则的范围.

Then you have to include contents.css in your page. Here you have to alternatives: 1) use Scoped Stylesheets or 2) modify contents.css, scoping each rule.

1.使用作用域样式表

在这种情况下，您应该使用范围样式表和 JQuery范围CSS插件(由于当前缺乏浏览器支持).

In this case you should use Scoped Stylesheets and JQuery Scoped CSS plugin (due to current lack of browser support).

您的HTML代码如下:

Your HTML code would look like this:

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

2.在content.css

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

In this case you must link to a modified copy of CKEditor's contents.css file. Each of the rule's selector must be scoped to "my-container" class, so it doesn't affect the rest of the page. Example contents.css file:

.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 */
}

这篇关于如何将ckeditor CSS应用于输出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！