Tools not working in CKeditor with Angular2

Question

I am using ng2-ckeditor as a rich text editor for an angular2 project. I have used some of the tools available, but the strange thing is that while strike and underline work fine, others, like Bold or Italic are not. For example if I strike the word test and save my form then <s>Test</s> is saved in DB and the word is properly formatted in my screen, but if I make the word Bold, the word remains the same but in DB I can see that <strong>Test</strong> is saved. I have the issue with some other tools too. Some code:

<ckeditor name="disclaimer"
      [(ngModel)]="companyProfile.description"
      [(formControl)]="formGroup.controls['description']"
      [config]="{
            extraPlugins: 'divarea',
            toolbar: [{
                name: 'basicstyles',
                items: ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-']
            }]
      }"
      debounce="500"
</ckeditor>

koninos koninos · Accepted Answer · 2017-04-13T10:18:15

It was a bit tough to find that out, but since we use ViewEncapsulation.None in our component, it seemed that styling outside the component affected CKEditor styling, so that is why some of those weren't rendered properly.

Tools not working in CKeditor with Angular2

1 Answers