1) I've read in documentation that I can define styles for editor in CMSAdminControls\CKeditor\plugins\styles\styles\default.js.
This is from documentation:
CKEDITOR.stylesSet.add( 'default',
[
{ name : 'Blue Title' , element : 'h3', styles : { 'color' : 'Blue' } },
{ name : 'Red Title' , element : 'h3', styles : { 'color' : 'Red' } },
{ name : 'Marker: Yellow' , element : 'span', styles : { 'background-color' : 'Yellow' } },
{ name : 'Marker: Green' , element : 'span', styles : { 'background-color' : 'Lime' } },
{ name : 'Big' , element : 'big' },
{ name : 'Small' , element : 'small' },
{ name : 'Typewriter' , element : 'tt' },
{ name : 'Computer Code' , element : 'code' },
{ name : 'Keyboard Phrase' , element : 'kbd' },
{ name : 'Sample Text' , element : 'samp' },
{ name : 'Variable' , element : 'var' },
{ name : 'Deleted Text' , element : 'del' },
{ name : 'Inserted Text' , element : 'ins' },
{ name : 'Cited Work' , element : 'cite' },
{ name : 'Inline Quotation' , element : 'q' },
{ name : 'Language: RTL' , element : 'span', attributes : { 'dir' : 'rtl' } },
{ name : 'Language: LTR' , element : 'span', attributes : { 'dir' : 'ltr' } },
{
name : 'Image on Left',
element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-right: 5px',
'border' : '2',
'align' : 'left'
}
},
{
name : 'Image on Right',
element : 'img',
attributes :
{
'style' : 'padding: 5px; margin-left: 5px',
'border' : '2',
'align' : 'right'
}
},
{ name : 'Borderless Table', element : 'table', styles: { 'border-style': 'hidden', 'background-color' : '#E6E6FA' } },
{ name : 'Square Bulleted List', element : 'ul', styles : { 'list-style-type' : 'square' } }
]);
When I define this code in file default.js, all these styles will be always in editor. But I need that on some pages there be one styles set and on other pages be another styles set in editor. What do I do to have opportunity to choose what styles set will be used in editor?
2) And one more question. I've created html of my page and css for it. This is css:
.home a
{
...
}
.home p
{
...
}
.home h1
{
...
}
And this is html:
<section class="home">
</section>
I inserted editable web-part inside "<section class="home"></section>". But in editor I can't see formatted html because editable web-part uses iframe which is inserted inside my html and because of iframe my css doesn't work. What do I do for my css to work? I mean that I want to see text in editor as it will look after editing.