Specifying Editing Default Style

By specifying a default style for each editing element, it is rendered as inline-style. Used to define the default style needed for editing or to reset the influence of parent CSS.

Style Specification Method

'editor.defaultStyle': You can specify a default style for the Model Element Type you want to designate.

  • Styles can only be specified for designated Model Element Types.
  • Styles can be specified in cssText string format.

Default Style Specification Example

// synapeditor.config.js
'editor.defaultStyle': {
    'Body': 'font-family: Arial, Helvetica, sans-serif; font-size: 11pt; line-height: 1.2;',
    'Paragraph': 'line-height: 1.4'
},

Default Style Specification Result

<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>Default style specification</span>
    </p>
    <p style="margin-right: 0px; margin-bottom: 16px; margin-left: 0px; display: block;">
        <span>Default style specification</span>
    </p>
</div>

Supported Model Element Types

Model Element TypeDescription
BodyRefers to the editing area (div.se-contents).
ParagraphRefers to the <p> tag.
TextRunRefers to the <span> tag.
DivRefers to the <div> tag.
ImageRefers to the <img> tag.
VideoRefers to the <video> tag.
ListRefers to the <ul> tag.
ListItemRefers to the <li> tag.
QuoteRefers to the <blockquote> tag.
TableRefers to the <table> tag.
TableRowRefers to the <tr> tag.
TableCellRefers to the <td> tag.
HorizontalLineRefers to the <hr> tag.
IframeRefers to the <iframe> tag.

Related Features