When I create a bulleted or numbered list, and then enable scayt, the editor shifts the list over to the right by a few tabs. This did not happen in 4.1. Just upgraded to 4.4.1. In 4.1, I was able to add some css files to the wsc dialogs file which overrode the styling. That no longer works, and should not be needed. It was a workaround then.
Wed, 05/28/2014 - 22:07
#1
Need more information. I'm
Need more information. I'm trying to reproduce this on the demo page by creating a few lines of text, selecting it, creating a list, then while the list is still selected I enable SCAYT. Nothing happenes. Also tried moving the caret to a different position then pressing enable SCAYT to no avail. On Chrome 35 (Mac).
Customer and Community Manager, CKSource
Follow us on: Facebook, Twitter, LinkedIn
If you think you found a bug in CKEditor, read this!
Here is my CKEditor
Here is my CKEditor definition function. I deleted my private keys for scayt and wcs for security reasons. Please note that I use the body class and css configurations to style the body of the editor. When I comment out the css configuration line, the problem does not occur. My best guess is that my custom css is moving the list to the left, and then the editor or the scayt/wsc css is moving it again per its own declarations.
function CreateCKEditorInstance(TextAreaElement, HTMLEncodeOutputSetting)
{
var AllowedContentString = "";
AllowedContentString = AllowedContentString + "p ol ul {margin-left};";
AllowedContentString = AllowedContentString + "li blockquote;";
AllowedContentString = AllowedContentString + "b i u s sub sup;";
AllowedContentString = AllowedContentString + "a [!href, !target];";
AllowedContentString = AllowedContentString + "img [!src, alt] {float};";
var ToolbarArray =
[
{ name: 'document', items : [ 'Source','-','Preview','Print' ] },
{ name: 'clipboard', items : [ 'Cut','Copy','Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'editing', items : [ 'Find','Replace','-','SelectAll','-','Scayt' ] },
'/',
{ name: 'basicstyles', items : [ 'Bold','Italic','Underline','Strike','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote' ] },
{ name: 'links', items : [ 'Link','Unlink' ] },
{ name: 'insert', items : [ 'Image','SpecialChar' ] },
{ name: 'tools', items : [ 'Maximize','ShowBlocks','-','About' ] }
];
var BodyClassString = "";
BodyClassString = BodyClassString + "CKEditorInputArea";
BodyClassString = BodyClassString + " ";
BodyClassString = BodyClassString + "CKEditorGeneratedContent";
BodyClassString = BodyClassString + " ";
BodyClassString = BodyClassString + "RTEGeneratedContent";
var ContentsCssArray =
[
'ResetsAndUniversallyAppliedSettings.css',
'CKEditorCustomStyling.css'
];
var CustomImagePreviewText = "";
CustomImagePreviewText = CustomImagePreviewText + "<br />Your image, previewed here relative to this text, will be scaled to a standard size, ";
CustomImagePreviewText = CustomImagePreviewText + "inserted into the text editor relative to the current cursor position, aligned as directed, ";
CustomImagePreviewText = CustomImagePreviewText + "and surrounded by some whitespace to offset the image from any surrounding text.";
var config =
{
allowedContent : AllowedContentString,
bodyClass : BodyClassString,
contentsCss : ContentsCssArray,
docType : '<!DOCTYPE html>',
height : 200,
htmlEncodeOutput : HTMLEncodeOutputSetting,
image_previewText : CustomImagePreviewText,
indentOffset : 20,
indentUnit : 'px',
resize_enabled : false,
removePlugins : 'devtools,magicline',
scayt_autoStartup : false,
scayt_customerid : "key goes here",
toolbar : ToolbarArray,
wsc_customerId : "key goes here"
};
Here is the CSS for one of the two CSS files. The other is general resets.
.CKEditorInputArea {
padding: 10px;
}
.CKEditorGeneratedContent {
line-height: 1.25;
font-family: Calibri, Helvetica, Arial, sans-serif;
font-size: 12px;
text-align: left;
}
.RTEGeneratedContent ol {
margin-left: 20px;
list-style: decimal outside none;
}
.RTEGeneratedContent ol li {
margin-left: 20px;
}
.RTEGeneratedContent ul {
margin-left: 20px;
list-style: disc outside none;
}
.RTEGeneratedContent ul li {
margin-left: 20px;
}
.RTEGeneratedContent blockquote {
margin-left: 20px;
}
.RTEGeneratedContent img {
height: auto;
width: 88px;
margin: 4px 8px 4px 8px;
}
Had to add padding of 0 all around
Had to add padding of zero all around in the ol and ul css to counteract the padding of 40px left and right picked up by scayt from the contents.css on ol, ul, and dl. The left padding increased the indent from my 20px, and the right padding actually moved my text in on the right. In one sense the right side shift inward makes lists look a bit nicer because it indents from the right as well so that it looks more like a block quote. I might make the padding 20px on the right. But that would be an election.
Wow.
And it all worked fine in 4.1.
Every upgrade should be this easy!! Am I nuts to try to style the content inside the iframe? It has worked perfectly until now. I almost jettisoned scayt but played with it all day (that is a day of my time, by the way) until I found that the issue.
By the way, when I remove my "resets" the left indentation starts and stays at the same place (though not where I want it). The right indentation is shifted inward when I enable scayt, I am guessing because it continues to pick up the need for padding on the right from content.css. Don't have the time to prove this. The resets do all sorts of good things, like resets should, and are therefore indispensible from the standpoint of the hierarchy of css. So I am going to continue to style the content proactively and pray like hell that future releases do not wreak havoc on my existing configuration.
Best,
Jack