mbirth/LuckyCoinkydink
1
0
Fork 0
Code Issues Pull Requests Activity

Proof of concept for CKEDITOR WYSIWYG-Mode respecting "S9y image floats"

Browse Source 
The stylesheet would need some love though! (YL?) :)
References #129
This commit is contained in:
Ian 2014-04-24 16:06:25 +02:00
parent f89b34f2b0
commit efbfb2b320
2 changed files with 90 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
htmlarea/ckeditor_custom_config.js
View File

@ -1,5 +1,5 @@
/**
* @fileOverview A Serendipity CKEDITOR custom config file: ckeditor_custom_config.js, v. 1.0, 2014-03-14, Ian
* @fileOverview A Serendipity CKEDITOR custom config file: ckeditor_custom_config.js, v. 1.1, 2014-04-24, Ian
*/
/**
@ -54,6 +54,9 @@ CKEDITOR.editorConfig = function( config ) {
// It will still generate an empty <p></p> though.
config.autoParagraph = false; // but this one definitely prevents adding multiple empty paragraphs when switching source mode!!!
// add custom Serendipity styles to ckeditor wysiwyg-mode, to repect css image floats
config.contentsCss = 'htmlarea/wysiwyg-style.css';
// The configuration setting that controls the ENTER mode is "config.enterMode" and it offers three options:
// (1) The default creates a paragraph element each time the "enter" key is pressed:
//config.enterMode = CKEDITOR.ENTER_P; // inserts <p></p>

86
htmlarea/wysiwyg-style.css Normal file
View File

@ -0,0 +1,86 @@
/**
* Adds custom Serendipity image float styles to CKEDITOR wysiwyg-mode
*/
.serendipity_image_left,
.serendipity_image_right,
.serendipity_image_center,
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
background: transparent;
border: 0 none;
padding: 0!important;
}
.serendipity_image_left,
.serendipity_image_right,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
display: block;
float: none;
margin: 0 0 1em;
}
.serendipity_image_center {
display: block;
margin: 0 auto 1em auto;
}
.plain-images .serendipity_image_left,
.plain-images .serendipity_image_right,
.plain-images .serendipity_image_center,
.plain-images .serendipity_imageComment_center,
.plain-images .serendipity_imageComment_left,
.plain-images .serendipity_imageComment_right {
border: 1px solid #aaa;
}
.plain-images .serendipity_imageComment_txt {
background: #ddd;
}
.fancy-images .serendipity_image_left,
.fancy-images .serendipity_image_right,
.fancy-images .serendipity_image_center,
.fancy-images .serendipity_imageComment_img {
-webkit-box-shadow: 0 0 2px 1px rgba(0,0,0,.5);
-moz-box-shadow: 0 0 2px 1px rgba(0,0,0,.5);
box-shadow: 0 0 2px 1px rgba(0,0,0,.5);
}
.no-boxshadow .fancy-images .serendipity_image_left,
.no-boxshadow .fancy-images .serendipity_image_right,
.no-boxshadow .fancy-images .serendipity_image_center,
.no-boxshadow .fancy-images .serendipity_imageComment_img {
border: 1px solid #aaa;
}
.serendipity_imageComment_center,
.serendipity_imageComment_left,
.serendipity_imageComment_right {
height: auto;
max-width: 100%;
}
.serendipity_image_left {
float: left;
margin: 0 2em 1em 0;
}
.serendipity_image_right {
float: right;
margin: 0 0 1em 2em;
}
.serendipity_imageComment_left {
display: inline;
float: left;
margin: 0 2em 1em 0;
}
.serendipity_imageComment_right {
display: inline;
float: right;
margin: 0 0 1em 2em;
}