It is the feature to designate the default styles to each editing elements and render in inline-style. It can be used to define the default style for editing or initialize influence of upper CSS.
Style Designating Method
'editor.defaultStyle': Designate the default style to the desired model element type.
- You may deisgnate styles only to the designated model element types.
- The style can be designated in the form of cssText string.
Example of Designating Default Style
synapeditor.config.js
'editor.defaultStyle': {
'Body': 'font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;',
'Paragraph': 'line-height: 1.4'
},
Result of Designating Default Style
<div class="se-contents" style="font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2; padding: 25px;"> <p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;"> <span>Designating Default Style</span> </p> <p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;"> <span>Designating Default Style</span> </p> </div>
Supported Model Element Type
| Model Element Type | Description |
|---|---|
| Body | Refers to the editing window (div.se-contents). |
| Paragraph | Refers to <p> tag. |
| TextRun | Refers to <span> tag. |
| Div | Refers to <div> tag. |
| Image | Refers to <img> tag. |
| Video | Refers to <video> tag. |
| List | Refers to <ul> tag. |
| ListItem | Refers to <li> tag. |
| Quote | Refers to <blockquote> tag. |
| Table | Refers to <table> tag. |
| TableRow | Refers to <tr> tag. |
| TableCell | Refers to <td> tag. |
| HorizontalLine | Refers to <hr> tag. |
| Iframe | Refers to <iframe> tag. |