Currently, I am working on a self-contained web page and utilizing CKEditor 4.6.2 for input purposes. The issue I am facing at the moment is attempting to apply a CSS class style to text that has been inserted via JavaScript. My CSS is located in the head tag without any special configurations. As per the CKEditor documentation, I have defined a styleset.
CKEDITOR.stylesSet.add('custom_css_styles', [
// Block-level Styles
{ name: 'My Custom Block', element: 'p',
styles:{
'color': 'dimgray',
'padding-left':'15px',
'border-left-style':'solid',
'border-width':'3px',
'border-color':'#52bab3',
'margin-left':'2px',
}
},
{ name: 'CustomInline', element: 'span', attributes: {'class': 'redText'}
}
]);
This is then added in CKEditor settings as shown below:
CKEDITOR.replace('LogBook', {
language: 'en',
uiColor: '#9AB8F3',
toolbar: [
['Undo','Redo','-'],
['Bold','Italic','Underline','Strike','-'],
['RemoveFormat','-'],
['NumberedList','BulletedList','-'],
['HorizontalRule'],
'/',
['Styles','-','Source','-','About','Maximize'],
],
removeButtons: 'Subscript,Superscript,Cut,Copy,Paste,Anchor,Scayt,PasteText,PasteFromWord,Image,SpecialChar,Link,Unlink,Table,Indent,Outdent,Blockquote,Format',
removePlugins: 'wsc,scayt',
stylesSet:'custom_css_styles',
allowedContent: true
})
Despite turning off content filtering and having a custom function that inserts code with classes, I am still struggling to style paragraph elements within the editor using Javascript, as demonstrated below:
<p class="My Custom Block">Some text here</p>
I also attempted directly applying styles from my stylesheet like so:
<p class="redText">Some text here</p>
However, the paragraph elements remain unstyled. Any assistance offered would be greatly appreciated. Thank you.