Page tree
Skip to end of metadata
Go to start of metadata


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


See also


  • No labels