CODEWITHSUNDEEP
javascripthtmlcssckeditor
maddogandnoriko
maddogandnoriko

Reputation: 1002

Add class style to CKEditor text with javascript

I'm building a self contained web page and am using CKEditor 4.6.2 for input. My last hurdle, for now, is trying to apply a css class style to text inserted via javascript. My css is in the head tag, nothing special there. I have defined a styleset as directed by CKEditor documentation.

CKEDITOR.stylesSet.add('my_custom_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: 'MyCustomInline', element: 'span', attributes: {'class': 'redText'}
      }
    ]);

And added it in CKEditor

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:'my_custom_styles',
 allowedContent: true
    })

But for the life of me I can't figure out how to apply a class to an element in the editor with javascript like so...

<p class="My Custom Block">Some text here</p>

I have turned off content filtering and have a custom function that inserts the above code, but the paragraph element does not get styled.

I have also tried applying styles right from my style sheet like:

<p class="redText">Some text here</p>

But again the paragraph element isn't getting styled.

Any help would be great, thank you.

Upvotes: 0

Views: 747

Answers (1)

maddogandnoriko
maddogandnoriko

Reputation: 1002

After a long search I finally ran across an answer (by surtyaar towards the bottom) to add a class to a CKEditor elements.

CKEDITOR.addCss( '.redText { border-bottom: 1px dotted red }' );

This needs to be called before the CKEditor instances are declared.

From the CKEditor docs.

Upvotes: 1

Related Questions