Text Editor



A simple text editor which uses the browsers api. Pass a buttonConfig array to configure the buttons you desire. Each Button needs to be an object with a type (this will be the executed Command as well), a name or an icon which will be displayed as the button and the created HTML-Tag (this is needed to set actives states in the Toolbar). If the type requires a value you can set the value prop, which will be passed in the execCommand function.

To read more about the execCommand function see


If you want to generate a sub-menu you can set a children prop in the button-object which, holds the buttonConfig of the children (Button syntax is the same as explained above).

If you need to call a custom callback instead you can pass your handler with a handler prop e.g. handler: (button, parent = null) => { callback(button, parent) }

Furthermore you can pass the position prop [left (default), middle and right] to set the buttons position in the toolbar.


 <sw-text-editor value="Lorem ipsum dolor sit amet, consetetur sadipscing elitr" :isInlineEdit="true">


Component properties

Property name Type Default
value String
isInlineEdit Boolean false
verticalAlign String
label String
placeholder String
disabled Boolean false
buttonConfig Array


Method name Parameters
createdComponent No parameters
toggleCodeEditor buttonConf
mountedComponent No parameters
destroyedComponent No parameters
onSelectionChange event
getPath event
resetForeColor No parameters
onToolbarCreated elem
onToolbarDestroyed No parameters
onTextStyleChange type value
handleInsertTable button
setTablesResizable No parameters
setTableResizable table
setTableSelectorListeners selector
setTableListeners No parameters
onSetLink value target buttonVariant
onClick No parameters
onFocus No parameters
setFocus No parameters
removeFocus No parameters
onDocumentClick event
onContentChange No parameters
onPaste event
emitContent No parameters
emitHtmlContent value
getContentValue No parameters
emptyCheck value
setWordCount No parameters
onTableEdit toggle
onTableModify table
onTableDelete event


  • ./sw-text-editor.html.twig
  • ./sw-text-editor.scss


  • value
  • isCodeEdit

Twig blocks

  • sw_text_editor_label
  • sw_text_editor_box_toolbar
  • sw_text_editor_box_table_toolbar
  • sw_text_editor_box_content
  • sw_text_editor_box_word_count
  • sw_text_editor_box
  • sw_text_editor