The customization features of the MarkupEditor are all exposed through the <markup-editor> element web component attributes. You can:
Provide initial HTML contents for editing directly or by a file name.
Specify placeholder text for when the document is empty.
Provide your own scripting and styling within the editor.
Provide a custom MarkupDelegate to receive document change notifications.
Customize toolbar visibility, contents, ordering, and icons, as well as augment toolbar contents.
Customize key mapping or use hot key editing defaults.
Customize behavior, such as whether local images can be embedded, and whether to take focus immediately.
Identify the location for the MarkupEditor base script and styling if needed.
In the simplest case, if you want a full page WYSIWYG editor with a default toolbar, you can embed the MarkupEditor in just two lines:
<markup-editor></markup-editor>
<script src="markup-editor.js" type="module"></script>
This <markup-editor> element uses the default toolbar and specifies editor1.css in the userstyle attribute.
In this case, the editor1.css styling is used to set the border and height of the <markup-editor> element.
<markup-editor userstyle="editor1.css"</markup-editor>