Skip to main content

DHTMLX RichText. Vue integration example

Demo of DHTMLX RichText integration with Vue using the official GitHub demo. Shows initialization and cleanup for a Vue-based DHTMLX RichText component. For a step-by-step setup guide, see the detailed Vue integration guide.

Try it online

View on GitHub - open the repository and click "Open in Codespaces" on the README page to launch a fully configured Vue app with DHTMLX RichText in seconds. No local setup required.

DHTMLX RichText integrates with Vue through a single-file component that mounts the editor with a template ref and manages it in the Vue lifecycle hooks. The editor is created in mounted and destroyed in unmounted, so it follows the component's life.

The component accesses its container through this.$refs and creates a Richtext instance in mounted, passing the configuration and the starting value prop. When the component is removed, unmounted calls editor.destructor() to clean up the widget.

Solution overview​

To integrate DHTMLX RichText with Vue, follow the standard widget lifecycle pattern:

  1. Import the package and styles - import { Richtext } from "@dhx/trial-richtext" and its richtext.css.
  2. Add a template ref on the container <div> so this.$refs can reach it.
  3. Initialize in mounted - call new Richtext(this.$refs.richtext_container, { value: this.value }).
  4. Pass initial content via props - the parent provides value, which initializes the editor when the component mounts.
  5. Clean up in unmounted by calling editor.destructor() to remove the widget and its listeners.

API reference​

Additional resources​