Hi!
Unfortunately, I ran into the same issue while trying to create a single page component in Vue 3.2 (Vite).
Did you find a solution yet?
Unhandled error during execution of mounted hook at
rich-text-editor.js:608
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'sanitizeHelper')
<template>
<v-container>
<h2 class="text-h2 mt-6 mb-10">New Page</h2>
<v-form>
<v-row>
<v-col cols="8">
<v-text-field
label="Title"
type="text"
v-model="title"
hint="required"
:rules="[() => !!title || 'This field is required']"
/>
</v-col>
<v-col cols="4">
<v-text-field
label="Page name"
type="text"
v-model="machine_name"
:rules="[
() => !!machine_name || 'This field is required',
() =>
/^[a-z-]+$/.test(machine_name) ||
'Only lowercase letters and hyphens',
]"
hint="required - only lowercase letters and hyphens"
/>
</v-col>
</v-row>
<v-card>
<RichTextEditorComponent id="default" ref="rteInstance">
<p>Lorem ipsum ...</p>
</RichTextEditorComponent>
</v-card>
<div class="d-flex mt-10">
<v-btn color="primary" prepend-icon="mdi-check" text @click="savePage">
Save
</v-btn>
<v-spacer />
</div>
</v-form>
</v-container>
</template>
<script lang="ts">
import { defineComponent } from "vue";
import type { Maybe } from "@/types/app";
import { mapState } from "pinia";
import { useAppStore } from "@/stores/app";
import {
RichTextEditorComponent,
Toolbar,
Link,
Image,
HtmlEditor,
Table,
} from "@syncfusion/ej2-vue-richtexteditor";
export default defineComponent({
name: "NewPageView",
components: {
RichTextEditorComponent,
},
provide: {
richtexteditor: [Toolbar, Link, Image, HtmlEditor, Table],
},
data() {
return {
title: null as Maybe<string>,
machine_name: null as Maybe<string>,
description: null as Maybe<string>,
};
},
computed: {
...mapState(useAppStore, ["token"]),
},
methods: {
savePage() {
// do something
},
},
});
</script>
<style>
@import "@syncfusion/ej2-base/styles/material-dark.css";
@import "@syncfusion/ej2-icons/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material-dark.css";
@import "@syncfusion/ej2-splitbuttons/styles/material-dark.css";
@import "@syncfusion/ej2-inputs/styles/material-dark.css";
@import "@syncfusion/ej2-lists/styles/material-dark.css";
@import "@syncfusion/ej2-navigations/styles/material-dark.css";
@import "@syncfusion/ej2-popups/styles/material-dark.css";
@import "@syncfusion/ej2-dropdowns/styles/material-dark.css";
@import "@syncfusion/ej2-vue-richtexteditor/styles/material-dark.css";
</style>
