首页 > 代码库 > 为KindEditor编辑器中的内容添加样式,使得自己定义前台页面显示效果与编辑器效果一致

为KindEditor编辑器中的内容添加样式,使得自己定义前台页面显示效果与编辑器效果一致

KindEditor 本身自带有一定的样式,且为内部样式,在使用过程中,难免会发现部分效果不是我们想要的,因此。KindEditor提代了两种方式供使用着调用

1、内部样式。通过 cssData 属性,控制内容样式,如:

K.create(‘textarea[name=content]‘, { cssData : ‘body { font-size: 14px; }‘ });
2、外部样式,通过 cssPath 属性。控制内容样式。如:
K.create(‘textarea[name=content]‘, { cssData : ‘x.css‘ });
这样,在写样式的时候,我们仅仅须要关注 x.css 文件中面的样式是怎么写的就能够了。同一时候,也能够在前台页面中调用这个css文件。以达到前台显示效果与编辑器显示效果一致的目的。

<script type="text/javascript"> $(function () { $(‘pre.prettyprint code‘).each(function () { var lines = $(this).text().split(‘\n‘).length; var $numbering = $(‘
    ‘).addClass(‘pre-numbering‘).hide(); $(this).addClass(‘has-numbering‘).parent().append($numbering); for (i = 1; i <= lines; i++) { $numbering.append($(‘
  • ‘).text(i)); }; $numbering.fadeIn(1700); }); }); </script>

为KindEditor编辑器中的内容添加样式,使得自己定义前台页面显示效果与编辑器效果一致