diff --git a/.env.example b/.env.example
index a09c803..10a2e05 100644
--- a/.env.example
+++ b/.env.example
@@ -6,7 +6,7 @@ POSTGRES_DB=postgres
 POSTGRES_USER=postgres
 POSTGRES_PASSWORD=password
 DATABASE_URL="postgres://${POSTGRES_USER}:${POSTGRES_PASSWORD}@localhost:5432/${POSTGRES_DB}?schema=public"
-
+NEXT_PUBLIC_API_KEY_TINYMCE=""
 # GOOGLE_CLIENT_ID=
 # GOOGLE_CLIENT_SECRET=
 
diff --git a/src/components/SSEditor/index.tsx b/src/components/TextEditor/index.tsx
similarity index 85%
rename from src/components/SSEditor/index.tsx
rename to src/components/TextEditor/index.tsx
index 7d3f54b..2a4b4d5 100644
--- a/src/components/SSEditor/index.tsx
+++ b/src/components/TextEditor/index.tsx
@@ -1,15 +1,19 @@
-import { useRef, type FC } from 'react';
+'use client';
+import { useRef, type FC, useEffect } from 'react';
 import { Editor } from '@tinymce/tinymce-react';
 import { Editor as TinyMCEEditor } from 'tinymce';
 type PropTypes = {
   value?: string;
   onSave?: (value: string) => void;
 };
-const SSEditor: FC<PropTypes> = ({ value, onSave }) => {
+
+export const TextEditor: FC<PropTypes> = ({ value, onSave }) => {
   const editorRef = useRef<TinyMCEEditor | null>(null);
+
   return (
     <Editor
       onInit={(evt, editor) => (editorRef.current = editor)}
+      apiKey={process.env.NEXT_PUBLIC_API_KEY_TINYMCE}
       initialValue={value}
       init={{
         height: 500,
@@ -36,4 +40,3 @@ const SSEditor: FC<PropTypes> = ({ value, onSave }) => {
     />
   );
 };
-export default SSEditor;
diff --git a/src/components/index.ts b/src/components/index.ts
index 1292253..abd34bb 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -4,3 +4,4 @@ export * from './Layout';
 export * from './NextLink';
 // export * from './CustomSunEditor';
 export * from './VirtualTable';
+export * from './TextEditor';
diff --git a/src/pages/post/pageposteditor.tsx b/src/pages/post/pageposteditor.tsx
index f46c6aa..f47c771 100644
--- a/src/pages/post/pageposteditor.tsx
+++ b/src/pages/post/pageposteditor.tsx
@@ -9,7 +9,7 @@ import {
   useToast,
 } from '@chakra-ui/react';
 import { PostList } from '@/components/Post';
-import SSEditor from '@/components/SSEditor';
+import { TextEditor } from '@/components';
 
 export default function PagePostEditor() {
   const toast = useToast();
@@ -65,7 +65,7 @@ export default function PagePostEditor() {
       >
         {published ? 'Công khai' : 'Riêng tư'}
       </Checkbox>
-      <SSEditor onSave={handleSave} />
+      <TextEditor onSave={handleSave} />
       <br />
       <Divider />
       <PostList />