Can not visible icons & outlines

1 Reply
2 Participants

Created by
NE Neo

Platform
Angular - EJ 2

Platform
Angular - EJ 2

Control
RichTextEditor

Created On
Jun 6, 2019 07:23 AM UTC

Last Activity On
Jun 7, 2019 10:12 AM UTC

Want to subscribe?
SIGN IN

Hi all,

I followed RicjTextEditor creation from the documentation. But I couldn't create the UI component, It's not loading icons & outlines. I think the problem in the css. But I followed the documentation well.

Documentation [Undo/redo manager] - https://ej2.syncfusion.com/angular/documentation/rich-text-editor/miscellaneous/

* Put css content in "myForm.component.css"

* Add relevant imports to app.module.ts & myForm.component.ts

.e-code-mirror::before {
    content: '\e345';
}
.CodeMirror-linenumber,
.CodeMirror-gutters {
    display: none;
}

#special_char,
.char_block {
    display: inline-block;
}
.char_block.e-active {
    /* box-shadow: inset 3px 3px 7px 0px; */
    outline: 1.5px solid;
}

.char_block {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin: 0 5px 5px 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #DDDDDD;
    font-size: 20px;
    cursor: pointer;
    user-select: none;
}

#custom_tbar,
#custom_tbar div{
    cursor: pointer;
}


#rteSection {
    height: 500px;
}
.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-left::before {
    content: "\e76e";
}

.e-rte-quick-popup .e-rte-quick-toolbar .e-roatate-right::before {
    content: "\e726";
}

.e-richtexteditor textarea.e-content {
  float: left;
}
.e-richtexteditor .e-rte-content {
  overflow: hidden;
}
.e-rte-content .e-content.e-pre-source{
  width: 100%;
}

.property-panel-content td{
    width: 50%;
}
.property-panel-content td div {
    padding-left: 10px;
    padding-top: 10px;
}

.e-icon-btn.e-active .e-md-preview::before {
    content: '\e350';
}

.e-icon-btn .e-md-preview.e-icons::before {
    content: '\e345';
}
.e-icon-btn.e-active .e-md-preview::before,
#mdCustom .e-icon-btn.e-active .e-md-preview.e-icons::before {
    content: '\e350';
}
#mdCustom .e-icon-btn .e-md-preview.e-icons::before {
    content: '\e345';
}

#rteDialog.e-dialog .e-dlg-content {
    padding: 0px 0px 5px 16px;
}
#custom_tbar .e-tbar-btn-text {
    font-size: 16px;
}
.e-bigger #custom_tbar .e-tbar-btn-text {
    font-size: 18px;
}

@media (min-width: 320px) and (max-width: 480px) {
    .fabric.e-bigger #rteDialog {
        min-width: 281px;
    }

    .fabric #rteDialog {
        min-width: 241px;
    }

    .bootstrap.e-bigger #rteDialog,
    .bootstrap #rteDialog {
        min-width: 223px;
    }

    .highcontrast.e-bigger #rteDialog {
        min-width: 283px;
    }
    .highcontrast #rteDialog {
        min-width: 243px;
    }
    .material #rteDialog {
        min-width: 224px;
    }
    .material.e-bigger #rteDialog {
        min-width: 236px;
    }
}

* Screenshot

1 Reply

PO Prince Oliver Syncfusion Team June 7, 2019 10:12 AM UTC

Hello Isanka,

Greetings from Syncfusion support.

Based on the shared information, we suspect that the issue might have occurred due to missing CSS files required to render the control. We suggest you to check our getting started and adding CSS reference sections.

Getting started: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/#getting-started

Adding CSS: https://ej2.syncfusion.com/angular/documentation/rich-text-editor/getting-started/#adding-css-reference

You can also resolve the issue by adding the reference to the online CDN link for the styles.

[Index.html]