The web-editor component produces an editor in the webpage
A modern, feature‑rich text editor built directly into the browser, this component is designed to make writing and editing feel effortless. Whether you’re building documentation tools, note‑taking apps, or custom content interfaces, it provides a smooth, polished experience that fits naturally into any webpage. Its clean interface keeps the focus on the text, while thoughtful details make everyday editing tasks quicker and more intuitive.
Under the hood, the editor offers a flexible architecture that adapts to a wide range of use cases. It supports rich formatting, keyboard shortcuts, custom styling, and extensible behaviours, giving developers the freedom to tailor the writing environment to their needs. Despite its capabilities, it remains lightweight and responsive, ensuring fast load times and a fluid typing experience even in complex layouts.
This component is built with usability in mind, making it just as comfortable for casual writing as it is for more structured content creation. Whether you’re embedding it in a small widget or using it as the core of a larger application, it provides a dependable, modern editing foundation that feels right at home on the web.
the web-editor is setup as the main demo component and as such to simplify the demo's, all options within its initmod are optional
| name | description |
|---|---|
| ext | the default loader helper |
| $ | the dom helper module |
| menu | menumod | either the main menu or the menumod module |
| ace | a global reference to ace editor, otherwise each instance of the web-editor will load its own ace editor, specifying this ensures its only loaded once |
| fullsize | you can pass fullsize to initmod to specify the editor should be fullsize, this option is available as an attribute on the element tag itself, or as an option when initdom is called |
| kd | when certain key combinations are pressed ctrl+enter for instance, web-editor will pass the keydown event to this funciton so the embedding module / document can handle keypreses |
| embed | when the editor is embedded within another component, the root component can be passed to web-editor via this property, then ace editor can pick up its attributes from the root component |
| on | used for callbacks for different types of events, probably the most common one is on.change, when the editors document changes the on.change callback is called, allowing the embedding module / document to respond to these events |