Skip to content

Commit

Permalink
Docs: Marked content styles with .ck-content instead of .ck-editor__e…
Browse files Browse the repository at this point in the history 
…ditable CSS class (see ckeditor/ckeditor5-ui#176).
  • Loading branch information
@oleq
oleq committed Feb 6, 2018
1 parent 58b0612 commit 8bf859c
Show file tree
Hide file tree
Showing 2 changed files with 10 additions and 10 deletions.
12 changes: 6 additions & 6 deletions docs/assets/snippet-styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,28 @@
margin: 1.5em 0;
}

.ck-editor .ck-editor__editable {
.ck-content {
padding: 1em;
}

.ck-editor .ck-editor__editable > :first-child {
.ck-content > :first-child {
margin-top: 0;
}

.ck-editor .ck-editor__editable > :last-child {
.ck-content > :last-child {
margin-bottom: 0;
}

/* Reset h1's styling – https://github.com/ckeditor/ckeditor5-heading/issues/86 */
.ck-editor .ck-editor__editable h1 {
.ck-content h1 {
display: block;
margin-bottom: .5em;
}

/* By default Umberto uses a trick with non breaking spaces around <code> to fix space rendering.
It breaks CKEditor 5 (see how <p><code>[]</code></p> looks). */
.ck-editor .ck-editor__editable code:before,
.ck-editor .ck-editor__editable code:after {
.ck-content code:before,
.ck-content code:after {
content: '' !important;
letter-spacing: 0 !important;
display: none !important; /* Firefox is very stubborn. */
Expand Down
8 changes: 4 additions & 4 deletions docs/builds/guides/migrate.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,7 +92,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-autoGrow_bottomSpace">autoGrow_bottomSpace</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-autoGrow_maxHeight">autoGrow_maxHeight</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-autoGrow_minHeight">autoGrow_minHeight</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-autoGrow_onStartup">autoGrow_onStartup</a></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the minHeight and maxHeight settings can be achieved with <code>.ck-editor__editable { min-height:200px; max-height:400px; }</code>.</p><p> See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the minHeight and maxHeight settings can be achieved with <code>.ck-content { min-height:200px; max-height:400px; }</code>.</p><p> See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-autoUpdateElement">autoUpdateElement</a></td>
Expand Down Expand Up @@ -140,7 +140,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-contentsCss">contentsCss</a></td>
<td>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, so such file and configuration setting is no longer needed. If for some reason you need to style the contents of the editing area differently, use the <code>.ck-editor__editable</code> selector.</td>
<td>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, so such file and configuration setting is no longer needed. If for some reason you need to style the contents of the editing area differently, use the <code>.ck-content</code> selector.</td>
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-contentsLangDirection">contentsLangDirection</a></td>
Expand Down Expand Up @@ -320,7 +320,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-height">height</a></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with <code>.ck-editor__editable { height:400px; }</code>.</p><p>See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the height setting can be achieved with <code>.ck-content { height:400px; }</code>.</p><p>See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-htmlEncodeOutput">htmlEncodeOutput</a></td>
Expand Down Expand Up @@ -544,7 +544,7 @@ Note: The number of options was reduced on purpose. We understood that configuri
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-width">width</a></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the width setting can be achieved with <code>.ck-editor__editable { width:400px; }</code>.</p><p>See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
<td><p>Classic editor (CKEditor 5) no longer encapsulates the editing area in an <code>&lt;iframe&gt;</code>, which means that the height (and similar options) of the editing area can be easily controlled with CSS. For example the width setting can be achieved with <code>.ck-content { width:400px; }</code>.</p><p>See also <a href="https://stackoverflow.com/questions/46559354/how-to-set-the-height-of-ckeditor-5-classic-editor" target="_blank" rel="noopener">How to set the height of CKEditor 5 (Classic editor)</a>.</p></td>
</tr>
<tr>
<td><a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_cmd">wsc_cmd</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_customDictionaryIds">wsc_customDictionaryIds</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_customLoaderScript">wsc_customLoaderScript</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_customerId">wsc_customerId</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_height">wsc_height</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_lang">wsc_lang</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_left">wsc_left</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_top">wsc_top</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_userDictionaryName">wsc_userDictionaryName</a> <br> <a href="/ckeditor4/docs/#!/api/CKEDITOR.config-cfg-wsc_width">wsc_width</a></td>
Expand Down

0 comments on commit 8bf859c

Please sign in to comment.