Question

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

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

Answer 1

如果您只是希望在CKEditor中创作的HTML在页面内看起来相同，首先必须将其插入带有自定义类的div元素中，例如＆＃34; my-container＆＃34;。

然后你必须在你的页面中包含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文件的修改副本。每个规则的选择器必须限定为＆＃34; my-container＆＃34;类，所以它不会影响页面的其余部分。示例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 */
}

如何将ckeditor css应用于输出

1 个答案: