2013-03-08 167 views
0

当我将CKEditor 4.0与没有任何样式或样式表关联的HTML页面合并时,编辑器在展示项目符号和数字时看起来很好。如何用CKEditor 4.0的默认版本覆盖网站模板的样式表

但是,当我应用模板的样式表/ CSS时,集成的CKEditor组件开始不能正确显示项目符号和数字。我的意思是它显示网站的样式表的项目符号,这是完全没有指定的上下文。对于例如子弹显示为每个文本条目右侧的小图片。或者什么也没有显示为1,2,3等。

我怎样才能使CKEditor不使用网站的样式表,而是使用自己的样式表。代码片段如下所示:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
<title>FAQ</title> 
<link href='http://fonts.googleapis.com/css?family=PT+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'> 
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/style.css"> 
<link rel="stylesheet" href="~/Content/themes/construct/stylesheets/responsive.css"> 
<script src="~/Content/themes/construct/scripts/jquery.min.js"></script> 
<script src="~/Content/themes/construct/scripts/jquery.simpleFAQ-0.7.min.js"></script> 
<script src="~/Content/themes/construct/scripts/js_func.js"></script> 
<script src="~/ckeditor/ckeditor.js"></script> 

<script> 
    $(function() { 
     $('#faq').simpleFAQ(); 
    }); 
</script> 

</head> 
<body> 
<div class="wraper"> 
<header class="header"> 
</header> 
</div> 

<!-- /top_title --> 
<!-- /faq_list --> 
<div class="faq_list"> 
    <ul class="filter"> 
    <li class="active all"><a href="#all">All</a></li> 
    <li class="business"><a href="#business">Business</a></li> 
    <li class="technical"><a href="#technical">Technical</a></li> 
    <li class="miscellaneous"><a href="#miscellaneous">Miscellaneous</a></li> 
    </ul> 
    <ul id="faq"> 
    @foreach (var entry in Model.MyList) 
    { 
    <li class="all business"> 
     <p class="question"> 
      @entry.Question 
     </p> 
     @foreach (var newEntry in entry.List2) 
     {    
      <div class="answer" id="editable" contenteditable="true"> 
       <h1>@newEntry.Header</h1> 
       <p>@newEntry.Answer</p> 
      </div> 

      } 
    </li> 
     } 
    </ul> 
</div> 
</body> 
</html> 

感谢您的帮助。 阿拉什

回答

0

覆盖样式表是最好的方式..

  1. 复制相同的类到一个新的文件,默认的站点后,该文件链接。防爆。 默认:

    .class1 {字体:12px的正常宋体;}

覆盖

.class1 {font: bold 12px Arial;} 

2 ..按照之前的流程和标记属性一样重要!恩..

默认:

.class1 {font: normal 12px Arial;padding:10px;} 

覆盖:

.class1 {font: normal 12px Arial;padding-left:10px !important;}