diff --git a/frontend/package.json b/frontend/package.json
index a21e6a8489..5fdab05896 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -8,6 +8,8 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@ckeditor/ckeditor5-build-classic": "^18.0.0",
+    "@ckeditor/ckeditor5-vue": "^1.0.1",
     "@fortawesome/fontawesome-svg-core": "^1.2.26",
     "@fortawesome/free-regular-svg-icons": "^5.12.0",
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
diff --git a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
index 2724a10bd9..c7d32cefff 100644
--- a/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
+++ b/frontend/src/business/components/settings/workspace/components/TestCaseReportTemplateEdit.vue
@@ -67,9 +67,15 @@
                     :list="previews"
                     group="people"
                     @change="log">
-                    <el-button class="template-component" v-for="item in previews" :key="item.id">
-                      {{ item.name }}
-                    </el-button>
+                    <el-card class="template-component" v-for="item in previews" :key="item.id">
+
+                      <template v-slot:header>
+                        {{item.name}}
+                      </template>
+
+                      <ckeditor :editor="editor" v-model="editorData" :config="editorConfig"></ckeditor>
+
+                    </el-card>
                   </draggable>
 
 
@@ -92,6 +98,7 @@
 <script>
 
   import draggable from 'vuedraggable';
+  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
 
   let idGlobal = 8;
     export default {
@@ -116,7 +123,13 @@
             { name: "cat 5", id: 5 },
             { name: "cat 6", id: 6 },
             { name: "cat 7", id: 7 }
-          ]
+          ],
+
+          editor: ClassicEditor,
+          editorData: '<p>Content of the editor.</p>',
+          editorConfig: {
+            // The configuration of the editor.
+          }
 
         }
       },
@@ -212,11 +225,9 @@
     margin-bottom: 5px;
   }
 
-  .preview-group > .el-button {
-    display: block;
-    margin: 10px auto;
-    height: 300px;
-    width: 80%;
+  .el-card {
+    margin: 5px auto;
+    min-height: 300px;
   }
 
   .description > span {
diff --git a/frontend/src/business/main.js b/frontend/src/business/main.js
index bbd6603b53..5f3587b8c3 100644
--- a/frontend/src/business/main.js
+++ b/frontend/src/business/main.js
@@ -14,6 +14,7 @@ import {permission} from './permission'
 import chart from "../common/js/chart";
 import '../common/css/menu-header.css';
 import '../common/css/main.css';
+import CKEditor from '@ckeditor/ckeditor5-vue';
 
 Vue.config.productionTip = false;
 Vue.use(icon);
@@ -23,7 +24,8 @@ Vue.use(ElementUI, {
 Vue.use(filters);
 Vue.use(ajax);
 Vue.use(chart);
-Vue.use(message)
+Vue.use(message);
+Vue.use(CKEditor);
 
 // v-permission
 Vue.directive('permission', permission);