RTE inserted HTML ( Table/image/etc ) css classes

Question

When a table or image are inserted in the RTE. There is CSS as classes and not inline. See below.Is it possible to have inline CSS instead of classes? That way the HTML can be used outside of the RTE environment?

AA	BB	CC
DD	EE	FF

Buvana Sathasivam · Answer

Hi Thierry,Greetings from Syncfusion support.By default, Rich Text Editor styles are not returned
properly when retrieving the Rich Text Editor HTML content. We suggest
including the below styles in your application. In this way, you will be able
to refer to the styles outside of the Rich Text Editor environment. Please find
the below code.

.e-rte-content p {
    margin: 0 0 10px;
    margin-bottom: 10px;
  }
   
  .e-rte-content li {
    margin-bottom: 10px;
  }
   
  .e-rte-content h1 {
    font-size: 2.17em;
    font-weight: 400;
    line-height: 1;
    margin: 10px 0;
  }
   
  .e-rte-content h2 {
    font-size: 1.74em;
    font-weight: 400;
    margin: 10px 0;
  }
   
  .e-rte-content h3 {
    font-size: 1.31em;
    font-weight: 400;
    margin: 10px 0;
  }
   
  .e-rte-content h4 {
    font-size: 1em;
    font-weight: 400;
    margin: 0;
  }
   
  .e-rte-content h5 {
    font-size: 00.8em;
    font-weight: 400;
    margin: 0;
  }
   
  .e-rte-content h6 {
    font-size: 00.65em;
    font-weight: 400;
    margin: 0;
  }
   
  .e-rte-content blockquote {
    margin: 10px 0;
    margin-left: 0;
    padding-left: 5px;
  }
   
  .e-rte-content pre {
    background-color: inherit;
    border: 0;
    border-radius: 0;
    color: #333;
    font-size: inherit;
    line-height: inherit;
    margin: 0 0 10px;
    overflow: visible;
    padding: 0;
    white-space: pre-wrap;
    word-break: inherit;
    word-wrap: break-word;
  }
   
  .e-rte-content strong, .e-rte-content b {
    font-weight: 700;
  }
   
  .e-rte-content a {
    text-decoration: none;
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
  }
   
  .e-rte-content a:hover {
    text-decoration: underline;
  }
   
  .e-rte-content h3 + h4,
  .e-rte-content h4 + h5,
  .e-rte-content h5 + h6 {
    margin-top: 00.6em;
  }
   
  .e-rte-content .e-rte-image.e-imgbreak {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }
   
  .e-rte-content .e-rte-image {
    border: 0;
    cursor: pointer;
    display: block;
    float: none;
    margin: auto;
    max-width: 100%;
    position: relative;
  }
   
  .e-rte-content .e-rte-image.e-imginline {
    display: inline-block;
    float: none;
    margin-left: 5px;
    margin-right: 5px;
    max-width: calc(100% - (2 * 5px));
    vertical-align: bottom;
  }
   
  .e-rte-content .e-rte-image.e-imgcenter {
    cursor: pointer;
    display: block;
    float: none;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }
   
  .e-rte-content .e-rte-image.e-imgleft {
    float: left;
    margin: 0 5px 0 0;
    text-align: left;
  }
   
  .e-rte-content .e-rte-image.e-imgright {
    float: right;
    margin: 0 0 0 5px;
    text-align: right;
  }
   
  .e-rte-content .e-rte-img-caption {
    display: inline-block;
    margin: 5px auto;
    max-width: 100%;
    position: relative;
  }
   
  .e-rte-content .e-rte-img-caption.e-caption-inline {
    display: inline-block;
    margin: 5px auto;
    margin-left: 5px;
    margin-right: 5px;
    max-width: calc(100% - (2 * 5px));
    position: relative;
    text-align: center;
    vertical-align: bottom;
  }
   
  .e-rte-content .e-rte-img-caption.e-imgcenter {
    display: block;
  }
   
  .e-rte-content .e-rte-img-caption .e-rte-image.e-imgright,
  .e-rte-content .e-rte-img-caption .e-rte-image.e-imgleft {
    float: none;
    margin: 0;
  }
   
  .e-rte-content .e-rte-table {
    border-collapse: collapse;
    empty-cells: show;
  }
   
  .e-rte-content .e-rte-table td,
  .e-rte-content .e-rte-table th {
    border: 1px solid #bdbdbd;
    height: 20px;
    min-width: 20px;
    padding: 2px 5px;
    vertical-align: middle;
  }
   
  .e-rte-content .e-rte-table.e-dashed-border td,
  .e-rte-content .e-rte-table.e-dashed-border th {
    border-style: dashed;
  }
   
  .e-rte-content .e-rte-img-caption .e-img-inner {
    box-sizing: border-box;
    display: block;
    font-size: 16px;
    font-weight: initial;
    margin: auto;
    opacity: .9;
    position: relative;
    text-align: center;
    width: 100%;
  }
   
  .e-rte-content .e-rte-img-caption .e-img-wrap {
    display: inline-block;
    margin: auto;
    padding: 0;
    width: 100%;
  }
   
  .e-rte-content blockquote {
    border-left: solid 2px #333;
  }
   
  .e-rte-content a {
    color: #2e2ef1;
  }
   
  .e-rte-content .e-rte-table th {
    background-color: #e0e0e0;
  }

Documentation: https://ej2.syncfusion.com/documentation/rich-text-editor/styling/#editor-content-stylesRegards,Buvana S