Setup new component for text editor

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/CommentEditor.vue

@@ -0,0 +1,62 @@
+<script lang="ts">
+import CKEditor from "@ckeditor/ckeditor5-vue";
+import ClassicEditor from "../../module/ckeditor5/editor_config";
+
+export default {
+    name: "CommentEditor",
+    components: {
+        ckeditor: CKEditor.component,
+    },
+    data() {
+        return {
+            editor: ClassicEditor,
+            loading: false,
+            lastRecordedContent: null,
+            content: '',
+            richEditor: true,
+        };
+    },
+    props: {
+
+    }
+};
+</script>
+
+<template>
+    <teleport to="#add-comment">
+        <div>
+            <label class="col-form-label" for="content">{{
+                    $t("comment.label")
+                }}</label>
+
+            <div class="text-md-end">
+                <span class="d-block d-sm-inline-block mb-md-2">
+                  <a class="flag-toggle">
+                    <span :class="{ on: false }">{{ $t("comment.editor_simple") }}</span>
+                    <i
+                        class="fa"
+                        :class="{
+                        'fa-toggle-on': true,
+                        'fa-toggle-on fa-flip-horizontal': false,
+                      }"
+                    />
+                    <span :class="{ on: true }">{{ $t("comment.editor_rich") }}</span>
+                  </a>
+                </span>
+            </div>
+
+            <div v-if="richEditor">
+                <ckeditor
+                    name="content"
+                    :editor="editor"
+                    v-model="content"
+                    tag-name="textarea"
+                />
+            </div>
+        </div>
+    </teleport>
+</template>
+
+<style scoped lang="scss">
+
+</style>

src/Bundle/ChillMainBundle/Resources/public/vuejs/_js/i18n.ts

@@ -54,6 +54,11 @@ const messages = {
             residential_address: "Adresse de résidence",
             located_at: "réside chez",
         },
+        comment: {
+            label: "Commentaire",
+            editor_simple: "Simple",
+            editor_rich: "Riche"
+        }
     },
 };