{"id":79998,"date":"2024-10-13T12:23:55","date_gmt":"2024-10-13T08:53:55","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/using-react-ckeditor-5-with-djangodrf-4kp6\/"},"modified":"2024-10-13T12:23:55","modified_gmt":"2024-10-13T08:53:55","slug":"using-react-ckeditor-5-with-djangodrf-4kp6","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/using-react-ckeditor-5-with-djangodrf-4kp6\/","title":{"rendered":"\u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 React CKEditor 5 \u0628\u0627 \u062c\u0646\u06af\u0648 (DRF)"},"content":{"rendered":"

Summarize this content to 400 words in Persian Lang \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u0627 \u0634\u0645\u0627 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0628\u06af\u0630\u0627\u0631\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 CKEditor \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0645 \u06a9\u0647 \u0645\u062f\u062a \u0647\u0627\u0633\u062a \u062f\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0648\u0641\u0642 \u0628\u0647 \u062d\u0644 \u0622\u0646 \u0634\u062f\u0645. \u0635\u0627\u062f\u0642\u0627\u0646\u0647 \u0628\u06af\u0648\u06cc\u0645\u060c \u0645\u0646 \u0646\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0641\u06cc \u06cc\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u0628\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0628\u0647 \u0641\u06a9\u0631 \u0627\u0641\u062a\u0627\u062f\u0645 \u06a9\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0648\u0686\u06a9 \u0628\u0646\u0648\u06cc\u0633\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u0635\u0644 \u0648 \u0622\u0633\u0627\u0646 \u0628\u0627\u0634\u062f.<\/p>\n

\u0628\u0647 \u0637\u0648\u0631 \u0645\u0639\u0645\u0648\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0686\u0646\u062f\u0627\u0646 \u062f\u0634\u0648\u0627\u0631 \u0646\u06cc\u0633\u062a\u060c \u0627\u0645\u0627 \u0642\u0633\u0645\u062a \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0645\u06cc \u0645\u0631\u0627 \u0622\u0632\u0627\u0631 \u062f\u0627\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0633\u0639\u06cc \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 API \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645\u060c \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0627\u0632\u06cc \u06a9\u0646\u0645.<\/p>\n

\u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0645.<\/p>\n

\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062c\u0646\u06af\u0648:<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 django rest \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645:<\/p>\n

pip install djangorestframework<\/p>\n

#settings.py
\nINSTALLED_APPS = [
\n …
\n “rest_framework”,
\n “rest_framework.authtoken”,
\n]\n

REST_FRAMEWORK = {
\n ‘DEFAULT_AUTHENTICATION_CLASSES’: [
\n ‘rest_framework.authentication.TokenAuthentication’,
\n ‘rest_framework.authentication.BasicAuthentication’,
\n ]\n}<\/p>\n

\u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 CKEditor \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc CORS \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n

pip install django-cors-headers<\/p>\n

#settings.py
\nINSTALLED_APPS = [
\n …,
\n “corsheaders”,
\n …,
\n]\n

MIDDLEWARE = [
\n …,
\n “corsheaders.middleware.CorsMiddleware”,
\n “django.middleware.common.CommonMiddleware”,
\n …,
\n]\n

#localhost:5173 my react app url
\nCSRF_TRUSTED_ORIGINS = [“http:\/\/localhost:5173”]\nCORS_ORIGIN_WHITELIST = [
\n “http:\/\/localhost:5173”,
\n]\nCORS_ORIGIN_ALLOW_ALL = False
\nCORS_ALLOW_CREDENTIALS = True
\nCORS_ALLOW_METHODS = [
\n “DELETE”,
\n “GET”,
\n “OPTIONS”,
\n “PATCH”,
\n “POST”,
\n “PUT”,
\n]\n

CORS_ALLOW_HEADERS = [
\n “accept”,
\n “accept-encoding”,
\n “authorization”,
\n “content-type”,
\n “dnt”,
\n “origin”,
\n “user-agent”,
\n “x-csrftoken”,
\n “x-requested-with”,
\n “token”,
\n]\n

\u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc CKEditor \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. \u0647\u0645 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\u060c \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0627\u0632 CKEditor \u062f\u0631 \u062e\u0648\u062f \u062c\u0646\u06af\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645. \u062a\u0646\u0638\u06cc\u0645\u0627\u062a\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a React \u0622\u067e\u0644\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062c\u0646\u06af\u0648 \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.<\/p>\n

#settings.py
\nINSTALLED_APPS = [
\n …,
\n “ckeditor”,
\n “ckeditor_uploader”,
\n …,
\n]\n

CKEDITOR_UPLOAD_PATH = “uploads\/”
\nCKEDITOR_IMAGE_BACKEND = “pillow”
\nCKEDITOR_STORAGE_BACKEND = ‘django.core.files.storage.FileSystemStorage’
\nCKEDITOR_CONFIGS = {
\n “default”: {
\n “filebrowserImageUploadUrl”: “\/ckeditor\/upload\/”,
\n },
\n}<\/p>\n

#urls.py:
\nfrom django.urls import path, include
\nfrom django.conf import settings
\nfrom django.conf.urls.static import static<\/p>\n

urlpatterns = [
\n path(“ckeditor\/upload\/”, uploadFile, name=”ckeditor_upload”),
\n path(“ckeditor\/”, include(“ckeditor_uploader.urls”)),
\n]\n

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
\nurlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)<\/p>\n

\u0645\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062c\u0646\u06af\u0648 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u062f\u06cc\u0645\u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0642\u0633\u0645\u062a \u0627\u0635\u0644\u06cc \u06cc\u0639\u0646\u06cc React \u0645\u06cc \u0631\u0648\u06cc\u0645.<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f CKEditor-u \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.<\/p>\n

npm install –save @ckeditor\/ckeditor5-react @ckeditor\/ckeditor5-build-classic<\/p>\n

\/\/ AddBlog.jsx
\nimport React, { Component } from ‘react’;
\nimport { CKEditor } from ‘@ckeditor\/ckeditor5-react’;
\nimport ClassicEditor from ‘@ckeditor\/ckeditor5-build-classic’;<\/p>\n

\u062e\u0648\u0628\u060c \u0645\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 CKEditor \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n

\u0627\u0628\u062a\u062f\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.<\/p>\n

\/\/ components\/CustomUploadAdapter.jsx
\nclass CustomUploadAdapter {
\n constructor(loader) {
\n this.loader = loader;
\n this.url=”http:\/\/127.0.0.1:8000\/ckeditor\/upload\/”; \/\/ Here we define the path we specified in django
\n }<\/p>\n

upload() {
\n return this.loader.file.then(file => new Promise((resolve, reject) => {
\n const data = new FormData();
\n data.append(‘upload’, file);<\/p>\n

const token = localStorage.getItem(‘token’);<\/p>\n

if (!token) {
\n reject(‘No token found. User must be logged in to upload images.’);
\n return;
\n }
\n fetch(this.url, {
\n method: ‘POST’,
\n body: data,
\n headers: {
\n “Authorization”: `Token ${token}`
\n },<\/p>\n

})
\n .then((response) => response.json())
\n .then(response => {
\n if (response.url) {
\n resolve({
\n default: response.url
\n });
\n } else {
\n reject(response.error ? response.error.message : ‘An error occurred while uploading the file.’);
\n }
\n })
\n .catch(error => {
\n reject(‘An error occurred while uploading the file: ‘ + error.message);
\n });
\n }));
\n }<\/p>\n

abort() {
\n console.log(‘Wasted…’);
\n }
\n}<\/p>\n

export default CustomUploadAdapter;<\/p>\n

\u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0635\u062d\u06cc\u062d \u0627\u0632 \u062a\u0648\u06a9\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0648 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0635\u062d\u06cc\u062d \u0622\u0646 \u0627\u0633\u062a. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0645\u0646 \u0642\u0633\u0645\u062a \u0648\u0631\u0648\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0622\u0646 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n

\u0639\u0627\u0644\u06cc\u060c \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u0647\u0633\u062a\u06cc\u0645\u060c \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0647 AddBlog \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645.<\/p>\n

\/\/ AddBlog.jsx
\nimport React, { Component } from ‘react’;
\nimport { CKEditor } from ‘@ckeditor\/ckeditor5-react’;
\nimport ClassicEditor from ‘@ckeditor\/ckeditor5-build-classic’;
\nimport CustomUploadAdapter from ‘..\/components\/CustomUploadAdapter’; \/\/ Let’s show the path to the Adapter code we prepared.<\/p>\n

const AddBlogs = () => {<\/p>\n

const handleChange = (e) => {
\n const { name, value } = e.target;
\n setBlogData(prevState => ({
\n …prevState,
\n [name]: value
\n }));
\n };<\/p>\n

const handleCkeditorState = (language, _event, editor) => {
\n const data = editor.getData();
\n setBlogData(prevState => ({
\n …prevState,
\n [`${language}_content`]: data
\n }));
\n };<\/p>\n

const handleContentBeforeLoad = (content) => {
\n const backendBaseURL = ‘http:\/\/127.0.0.1:8000’;
\n return content.replace(\/src=”\\\/media\\\/(.*?)”\/g, `src=”${backendBaseURL}\/media\/$1″`);
\n };<\/p>\n

const onEditorInit = (editor) => {
\n editor.plugins.get(‘FileRepository’).createUploadAdapter = (loader) => {
\n return new CustomUploadAdapter(loader);
\n };
\n };<\/p>\n

return (
\n <div className=”addblog”>
\n <h2>{id ? ‘Blog Update’ : ‘Add new blog’}<\/h2>
\n <form onSubmit={handleSubmit}>
\n <div>
\n <label htmlFor=”en_content”>En Content:<\/label>
\n <CKEditor
\n editor={ClassicEditor}
\n data={handleContentBeforeLoad(blogData.en_content)}
\n onChange={(event, editor) => handleCkeditorState(‘en’, event, editor)}
\n onReady={onEditorInit}
\n config={{
\n extraPlugins: [CustomUploadAdapter],
\n ckfinder: {
\n uploadUrl: ‘http:\/\/127.0.0.1:8000\/ckeditor\/upload\/’
\n }
\n }}
\n \/>
\n <\/div><\/p>\n

<div className=”buttons”>
\n <button id=’dashboard__submit__btn’ type=”submit”>{id ? ‘Update’ : ‘Add’}<\/button>
\n {id && (
\n <button id=’dashboard__delete__btn’ type=”button” onClick={handleDelete}><i className=”fa-solid fa-trash”><\/i><\/button>
\n )}
\n <\/div>
\n <\/form>
\n <\/div>
\n );
\n}<\/p>\n

export default AddBlogs;<\/p>\n

\u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/p>\n

\u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u0646\u06af\u0631\u0627\u0646 \u0622\u0646 \u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0622\u0646 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0633 \u0627\u0632 \u062c\u0633\u062a\u062c\u0648\u06cc \u062f\u0642\u06cc\u0642 \u0622\u0646 \u0631\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0646\u06cc\u062f. \u062d\u062f\u0627\u06a9\u062b\u0631\u060c \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0646\u0633\u062e\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0646\u0627\u0633\u0627\u0632\u06af\u0627\u0631 \u0647\u0633\u062a\u0646\u062f\u060c \u062e\u0637\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n

\u0642\u0628\u0644 \u0627\u0632 \u0631\u0641\u062a\u0646… \u0627\u06af\u0631 \u0633\u0648\u0627\u0644\u06cc\/\u067e\u06cc\u0634\u0646\u0647\u0627\u062f\/\u0641\u06a9\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u06cc\u06a9 \u062e\u0637 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0646 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \ud83d\udd8b\ufe0f<\/p>\n

\u0648 \u0627\u06af\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0644\u0630\u062a \u0628\u0631\u062f\u06cc\u062f\u060c \u0628\u0627 \u06cc\u06a9 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0632\u06cc\u0628\u0627 (\ud83e\udd2f\u2764\ufe0f\u200d\ud83d\udd25) \u0628\u0647 \u0645\u0627 \u0628\u06af\u0648\u06cc\u06cc\u062f \u0686\u0647 \u0627\u062d\u0633\u0627\u0633\u06cc \u062f\u0627\u0634\u062a\u06cc\u062f \u0648 \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n

\u0627\u06cc\u0646 \u0627\u0632 \u0645\u0646 \u0627\u0633\u062a. \u0628\u0647 \u0632\u0648\u062f\u06cc \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f!<\/p>\n

– TheHormat \u265f\ufe0f<\/p>\n

\u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u0627 \u0634\u0645\u0627 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0628\u06af\u0630\u0627\u0631\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 CKEditor \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0645 \u06a9\u0647 \u0645\u062f\u062a \u0647\u0627\u0633\u062a \u062f\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0648\u0641\u0642 \u0628\u0647 \u062d\u0644 \u0622\u0646 \u0634\u062f\u0645. \u0635\u0627\u062f\u0642\u0627\u0646\u0647 \u0628\u06af\u0648\u06cc\u0645\u060c \u0645\u0646 \u0646\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0641\u06cc \u06cc\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u0628\u06cc \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646 \u0645\u0648\u0636\u0648\u0639 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u0645. \u0628\u0647 \u0647\u0645\u06cc\u0646 \u062f\u0644\u06cc\u0644 \u0628\u0647 \u0641\u06a9\u0631 \u0627\u0641\u062a\u0627\u062f\u0645 \u06a9\u0647 \u06cc\u06a9 \u0648\u0628\u0644\u0627\u06af \u06a9\u0648\u0686\u06a9 \u0628\u0646\u0648\u06cc\u0633\u0645 \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0634\u0645\u0627 \u0645\u0641\u0635\u0644 \u0648 \u0622\u0633\u0627\u0646 \u0628\u0627\u0634\u062f.<\/p>\n

\u0628\u0647 \u0637\u0648\u0631 \u0645\u0639\u0645\u0648\u0644\u060c \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0627\u0632 \u0622\u0646 \u0686\u0646\u062f\u0627\u0646 \u062f\u0634\u0648\u0627\u0631 \u0646\u06cc\u0633\u062a\u060c \u0627\u0645\u0627 \u0642\u0633\u0645\u062a \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0648\u06cc\u0631 \u06a9\u0645\u06cc \u0645\u0631\u0627 \u0622\u0632\u0627\u0631 \u062f\u0627\u062f. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0633\u0639\u06cc \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0632 \u0637\u0631\u06cc\u0642 API \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u0645\u060c \u0645\u062a\u0648\u062c\u0647 \u0634\u062f\u0645 \u06a9\u0647 \u0628\u0627\u06cc\u062f \u06a9\u0645\u06cc \u0628\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0627\u0632\u06cc \u06a9\u0646\u0645.<\/p>\n

\u067e\u0633 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0628\u0628\u06cc\u0646\u06cc\u0645 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0645.<\/p>\n

<\/p>\n

\u067e\u06cc\u06a9\u0631\u0628\u0646\u062f\u06cc \u062c\u0646\u06af\u0648:<\/p>\n

    \n
  1. \u0627\u0628\u062a\u062f\u0627 \u0628\u0627\u06cc\u062f \u0641\u0631\u06cc\u0645\u0648\u0631\u06a9 django rest \u0631\u0627 \u062f\u0627\u0646\u0644\u0648\u062f \u06a9\u0646\u06cc\u0645:<\/li>\n<\/ol>\n

    pip install djangorestframework<\/code>\n<\/p>\n

    \n
    #settings.py\nINSTALLED_APPS = [\n    ...\n    \"rest_framework\",\n    \"rest_framework.authtoken\",\n]\n\nREST_FRAMEWORK = {\n    'DEFAULT_AUTHENTICATION_CLASSES': [\n        'rest_framework.authentication.TokenAuthentication',\n        'rest_framework.authentication.BasicAuthentication',\n    ]\n}\n<\/code><\/pre>\n<\/div>\n
      \n
    1. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0632 CKEditor \u062f\u0631 React \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645\u060c \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc \u062c\u0644\u0648\u06af\u06cc\u0631\u06cc \u0627\u0632 \u062e\u0637\u0627\u0647\u0627\u06cc CORS \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/li>\n<\/ol>\n
      pip install django-cors-headers<\/code>\n<\/p>\n
      \n
      #settings.py\nINSTALLED_APPS = [\n    ...,\n    \"corsheaders\",\n    ...,\n]\n\nMIDDLEWARE = [\n    ...,\n    \"corsheaders.middleware.CorsMiddleware\",\n    \"django.middleware.common.CommonMiddleware\",\n    ...,\n]\n\n#localhost:5173 my react app url\nCSRF_TRUSTED_ORIGINS = [\"http:\/\/localhost:5173\"]\nCORS_ORIGIN_WHITELIST = [\n    \"http:\/\/localhost:5173\",\n]\nCORS_ORIGIN_ALLOW_ALL = False\nCORS_ALLOW_CREDENTIALS = True\nCORS_ALLOW_METHODS = [\n    \"DELETE\",\n    \"GET\",\n    \"OPTIONS\",\n    \"PATCH\",\n    \"POST\",\n    \"PUT\",\n]\n\nCORS_ALLOW_HEADERS = [\n    \"accept\",\n    \"accept-encoding\",\n    \"authorization\",\n    \"content-type\",\n    \"dnt\",\n    \"origin\",\n    \"user-agent\",\n    \"x-csrftoken\",\n    \"x-requested-with\",\n    \"token\",\n]\n<\/code><\/pre>\n<\/div>\n
        \n
      1. \u062d\u0627\u0644\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0628\u0631\u0627\u06cc CKEditor \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645. \u0647\u0645 \u0628\u0631\u0627\u06cc \u0639\u0645\u0644\u06a9\u0631\u062f \u06a9\u0627\u0631\u0628\u0631 \u0648 \u0647\u0645 \u0628\u0631\u0627\u06cc \u062a\u0648\u0633\u0639\u0647 \u062f\u0647\u0646\u062f\u0647\u060c \u0645\u0646 \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0627\u0632 CKEditor \u062f\u0631 \u062e\u0648\u062f \u062c\u0646\u06af\u0648 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u0645. \u062a\u0646\u0638\u06cc\u0645\u0627\u062a\u06cc \u06a9\u0647 \u0645\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u06cc\u0645 \u0628\u0631\u0627\u06cc \u062a\u0639\u06cc\u06cc\u0646 \u0645\u0633\u06cc\u0631 \u0632\u0645\u0627\u0646\u06cc \u0627\u0633\u062a \u06a9\u0647 \u06a9\u0627\u0631\u0628\u0631 \u062a\u0635\u0648\u06cc\u0631\u06cc \u0631\u0627 \u062f\u0631 \u0633\u0645\u062a React \u0622\u067e\u0644\u0648\u062f \u0645\u06cc \u06a9\u0646\u062f \u0648 \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u062d\u0627\u0635\u0644 \u0645\u06cc \u06a9\u0646\u062f \u06a9\u0647 \u062c\u0646\u06af\u0648 \u0627\u06cc\u0646 \u0627\u062c\u0627\u0632\u0647 \u0631\u0627 \u0645\u06cc \u062f\u0647\u062f.\n<\/li>\n<\/ol>\n
        \n
        #settings.py\nINSTALLED_APPS = [\n    ...,\n    \"ckeditor\",\n    \"ckeditor_uploader\",\n    ...,\n]\n\nCKEDITOR_UPLOAD_PATH = \"uploads\/\"\nCKEDITOR_IMAGE_BACKEND = \"pillow\"\nCKEDITOR_STORAGE_BACKEND = 'django.core.files.storage.FileSystemStorage'\nCKEDITOR_CONFIGS = {\n    \"default\": {\n        \"filebrowserImageUploadUrl\": \"\/ckeditor\/upload\/\",\n    },\n}\n\n\n#urls.py:\nfrom django.urls import path, include\nfrom django.conf import settings\nfrom django.conf.urls.static import static\n\nurlpatterns = [\n    path(\"ckeditor\/upload\/\", uploadFile, name=\"ckeditor_upload\"),\n    path(\"ckeditor\/\", include(\"ckeditor_uploader.urls\")),\n]\n\n\nurlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)\nurlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)\n<\/code><\/pre>\n<\/div>\n
        \u0645\u0627 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u062e\u0648\u062f \u0631\u0627 \u062f\u0631 \u062c\u0646\u06af\u0648 \u0628\u0647 \u067e\u0627\u06cc\u0627\u0646 \u0631\u0633\u0627\u0646\u062f\u06cc\u0645\u060c \u0627\u06a9\u0646\u0648\u0646 \u0628\u0647 \u0642\u0633\u0645\u062a \u0627\u0635\u0644\u06cc \u06cc\u0639\u0646\u06cc React \u0645\u06cc \u0631\u0648\u06cc\u0645.<\/p>\n
        \u0627\u0628\u062a\u062f\u0627 \u0627\u062c\u0627\u0632\u0647 \u062f\u0647\u06cc\u062f CKEditor-u \u0631\u0627 \u062f\u0631 \u067e\u0631\u0648\u0698\u0647 \u062e\u0648\u062f \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u0645.<\/p>\n
        npm install --save @ckeditor\/ckeditor5-react @ckeditor\/ckeditor5-build-classic<\/code>\n<\/p>\n
        \n
        \/\/ AddBlog.jsx\nimport React, { Component } from 'react';\nimport { CKEditor } from '@ckeditor\/ckeditor5-react';\nimport ClassicEditor from '@ckeditor\/ckeditor5-build-classic';\n<\/code><\/pre>\n<\/div>\n
        \u062e\u0648\u0628\u060c \u0645\u0627 \u062f\u0631 \u0648\u0627\u0642\u0639 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0627\u0632 CKEditor \u0628\u0627 \u0627\u06cc\u0646 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u0645\u060c \u0627\u0645\u0627 \u0628\u0631\u0627\u06cc \u0622\u067e\u0644\u0648\u062f \u062a\u0635\u0627\u0648\u06cc\u0631 \u0628\u0627\u06cc\u062f \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u06cc\u0634\u062a\u0631\u06cc \u0627\u0646\u062c\u0627\u0645 \u062f\u0647\u06cc\u0645.<\/p>\n
        \u0627\u0628\u062a\u062f\u0627 \u0628\u06cc\u0627\u06cc\u06cc\u062f \u06cc\u06a9 \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u0645 \u0648 \u06a9\u062f\u0647\u0627\u06cc \u0644\u0627\u0632\u0645 \u0631\u0627 \u062f\u0631 \u0627\u06cc\u0646\u062c\u0627 \u0628\u0646\u0648\u06cc\u0633\u06cc\u0645.\n<\/p>\n
        \n
        \/\/ components\/CustomUploadAdapter.jsx\nclass CustomUploadAdapter {\n  constructor(loader) {\n    this.loader = loader;\n    this.url=\"http:\/\/127.0.0.1:8000\/ckeditor\/upload\/\"; \/\/ Here we define the path we specified in django\n  }\n\n  upload() {\n    return this.loader.file.then(file => new Promise((resolve, reject) => {\n      const data = new FormData();\n      data.append('upload', file);\n\n      const token = localStorage.getItem('token');\n\n      if (!token) {\n        reject('No token found. User must be logged in to upload images.');\n        return;\n      }\n      fetch(this.url, {\n        method: 'POST',\n        body: data,\n        headers: {\n          \"Authorization\": `Token ${token}`\n        },\n\n      })\n        .then((response) => response.json())\n        .then(response => {\n          if (response.url) {\n            resolve({\n              default: response.url \n            });\n          } else {\n            reject(response.error ? response.error.message : 'An error occurred while uploading the file.');\n          }\n        })\n        .catch(error => {\n          reject('An error occurred while uploading the file: ' + error.message);\n        });\n    }));\n  }\n\n  abort() {\n    console.log('Wasted...');\n  }\n}\n\nexport default CustomUploadAdapter;\n<\/code><\/pre>\n<\/div>\n
        \u0628\u062e\u0634 \u0645\u0647\u0645\u06cc \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u062f \u06a9\u0647 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0622\u0646 \u062a\u0648\u062c\u0647 \u06a9\u0646\u06cc\u062f \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u0635\u062d\u06cc\u062d \u0627\u0632 \u062a\u0648\u06a9\u0646 \u06a9\u0627\u0631\u0628\u0631 \u0648\u0627\u0631\u062f \u0634\u062f\u0647 \u0648 \u0645\u0634\u062e\u0635 \u06a9\u0631\u062f\u0646 \u0635\u062d\u06cc\u062d \u0622\u0646 \u0627\u0633\u062a. \u0627\u0632 \u0622\u0646\u062c\u0627\u06cc\u06cc \u06a9\u0647 \u062f\u0631 \u0633\u0627\u06cc\u062a \u0645\u0646 \u0642\u0633\u0645\u062a \u0648\u0631\u0648\u062f \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f\u060c \u0627\u06cc\u0646 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0628\u0631 \u0627\u0633\u0627\u0633 \u0622\u0646 \u0646\u0648\u0634\u062a\u0647 \u0634\u062f\u0647 \u0627\u0633\u062a.<\/p>\n
        \"\u06a9\u0645\u06cc<\/p>\n
        \u0639\u0627\u0644\u06cc\u060c \u0627\u06a9\u0646\u0648\u0646 \u062f\u0631 \u0622\u062e\u0631\u06cc\u0646 \u0642\u0633\u0645\u062a \u0647\u0633\u062a\u06cc\u0645\u060c \u0627\u06a9\u0646\u0648\u0646 \u06a9\u0647 \u062a\u0645\u0627\u0645 \u062a\u0646\u0638\u06cc\u0645\u0627\u062a \u0644\u0627\u0632\u0645 \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0647 \u0627\u06cc\u0645\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u0645 \u0635\u0641\u062d\u0647 AddBlog \u0631\u0627 \u0628\u0647 \u0637\u0648\u0631 \u06a9\u0627\u0645\u0644 \u0648\u06cc\u0631\u0627\u06cc\u0634 \u06a9\u0646\u06cc\u0645.\n<\/p>\n
        \n
        \/\/ AddBlog.jsx\nimport React, { Component } from 'react';\nimport { CKEditor } from '@ckeditor\/ckeditor5-react';\nimport ClassicEditor from '@ckeditor\/ckeditor5-build-classic';\nimport CustomUploadAdapter from '..\/components\/CustomUploadAdapter'; \/\/ Let's show the path to the Adapter code we prepared.\n\nconst AddBlogs = () => {\n\n  const handleChange = (e) => {\n    const { name, value } = e.target;\n    setBlogData(prevState => ({\n      ...prevState,\n      [name]: value\n    }));\n  };\n\n  const handleCkeditorState = (language, _event, editor) => {\n    const data = editor.getData();\n    setBlogData(prevState => ({\n      ...prevState,\n      [`${language}_content`]: data\n    }));\n  };\n\n  const handleContentBeforeLoad = (content) => {\n    const backendBaseURL = 'http:\/\/127.0.0.1:8000';\n    return content.replace(\/src=\"\\\/media\\\/(.*?)\"\/g, `src=\"${backendBaseURL}\/media\/$1\"`);\n  };\n\n  const onEditorInit = (editor) => {\n    editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {\n      return new CustomUploadAdapter(loader);\n    };\n  };\n\n\n  return (\n    <div className=\"addblog\">\n      <h2>{id ? 'Blog Update' : 'Add new blog'}<\/h2>\n      <form onSubmit={handleSubmit}>\n        <div>\n          <label htmlFor=\"en_content\">En Content:<\/label> \n          <CKEditor\n            editor={ClassicEditor}\n            data={handleContentBeforeLoad(blogData.en_content)}\n            onChange={(event, editor) => handleCkeditorState('en', event, editor)}\n            onReady={onEditorInit}\n            config={{\n              extraPlugins: [CustomUploadAdapter],\n              ckfinder: {\n                uploadUrl: 'http:\/\/127.0.0.1:8000\/ckeditor\/upload\/'\n              }\n            }}\n          \/>\n        <\/div>\n\n        <div className=\"buttons\">\n          <button id='dashboard__submit__btn' type=\"submit\">{id ? 'Update' : 'Add'}<\/button>\n          {id && (\n            <button id='dashboard__delete__btn' type=\"button\" onClick={handleDelete}><i className=\"fa-solid fa-trash\"><\/i><\/button>\n          )}\n        <\/div>\n      <\/form>\n    <\/div>\n  );\n}\n\nexport default AddBlogs;\n<\/code><\/pre>\n<\/div>\n
        \u0646\u062a\u06cc\u062c\u0647 \u06af\u06cc\u0631\u06cc<\/strong><\/p>\n
        \u0644\u0627\u0632\u0645 \u0646\u06cc\u0633\u062a \u0646\u06af\u0631\u0627\u0646 \u0622\u0646 \u0628\u0627\u0634\u06cc\u062f\u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0647 \u0631\u0627\u062d\u062a\u06cc \u0622\u0646 \u0631\u0627 \u067e\u06cc\u062f\u0627 \u06a9\u0646\u06cc\u062f \u0648 \u067e\u0633 \u0627\u0632 \u062c\u0633\u062a\u062c\u0648\u06cc \u062f\u0642\u06cc\u0642 \u0622\u0646 \u0631\u0627 \u062a\u0639\u0645\u06cc\u0631 \u06a9\u0646\u06cc\u062f. \u062d\u062f\u0627\u06a9\u062b\u0631\u060c \u062f\u0631 \u0645\u0648\u0631\u062f \u0627\u06cc\u0646\u06a9\u0647 \u06a9\u062f\u0627\u0645 \u0646\u0633\u062e\u0647 \u0627\u0632 \u0627\u0628\u0632\u0627\u0631\u0647\u0627 \u0646\u0627\u0633\u0627\u0632\u06af\u0627\u0631 \u0647\u0633\u062a\u0646\u062f\u060c \u062e\u0637\u0627 \u062f\u0631\u06cc\u0627\u0641\u062a \u062e\u0648\u0627\u0647\u06cc\u062f \u06a9\u0631\u062f.<\/p>\n
        \u0642\u0628\u0644 \u0627\u0632 \u0631\u0641\u062a\u0646… \u0627\u06af\u0631 \u0633\u0648\u0627\u0644\u06cc\/\u067e\u06cc\u0634\u0646\u0647\u0627\u062f\/\u0641\u06a9\u0631\u06cc \u062f\u0627\u0631\u06cc\u062f\u060c \u06cc\u06a9 \u062e\u0637 \u0632\u06cc\u0631 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0645\u0646 \u0628\u06af\u0630\u0627\u0631\u06cc\u062f. \ud83d\udd8b\ufe0f<\/p>\n
        \u0648 \u0627\u06af\u0631 \u0627\u0632 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u0644\u0630\u062a \u0628\u0631\u062f\u06cc\u062f\u060c \u0628\u0627 \u06cc\u06a9 \u0627\u06cc\u0645\u0648\u062c\u06cc \u0632\u06cc\u0628\u0627 (\ud83e\udd2f\u2764\ufe0f\u200d\ud83d\udd25) \u0628\u0647 \u0645\u0627 \u0628\u06af\u0648\u06cc\u06cc\u062f \u0686\u0647 \u0627\u062d\u0633\u0627\u0633\u06cc \u062f\u0627\u0634\u062a\u06cc\u062f \u0648 \u0641\u0631\u0627\u0645\u0648\u0634 \u0646\u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u0628\u0647\u200c\u0631\u0648\u0632\u0631\u0633\u0627\u0646\u06cc\u200c\u0647\u0627\u06cc \u0628\u0639\u062f\u06cc \u062f\u0646\u0628\u0627\u0644 \u06a9\u0646\u06cc\u062f.<\/p>\n
        \u0627\u06cc\u0646 \u0627\u0632 \u0645\u0646 \u0627\u0633\u062a. \u0628\u0647 \u0632\u0648\u062f\u06cc \u0635\u062d\u0628\u062a \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f!<\/p>\n
        – TheHormat \u265f\ufe0f<\/p>\n","protected":false},"excerpt":{"rendered":"
        Summarize this content to 400 words in Persian Lang \u0645\u06cc \u062e\u0648\u0627\u0633\u062a\u0645 \u0628\u0627 \u0634\u0645\u0627 \u062f\u0631 \u0645\u06cc\u0627\u0646 \u0628\u06af\u0630\u0627\u0631\u0645 \u06a9\u0647 \u0686\u06af\u0648\u0646\u0647 \u0627\u06cc\u0646 \u0645\u0634\u06a9\u0644 CKEditor \u0631\u0627 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f\u0645 \u06a9\u0647 \u0645\u062f\u062a \u0647\u0627\u0633\u062a \u062f\u0631 \u06cc\u06a9\u06cc \u0627\u0632 \u067e\u0631\u0648\u0698\u0647 \u0647\u0627\u06cc\u0645 \u0631\u0648\u06cc \u0622\u0646 \u06a9\u0627\u0631 \u0645\u06cc \u06a9\u0631\u062f\u0645 \u0648 \u062f\u0631 \u0646\u0647\u0627\u06cc\u062a \u0645\u0648\u0641\u0642 \u0628\u0647 \u062d\u0644 \u0622\u0646 \u0634\u062f\u0645. \u0635\u0627\u062f\u0642\u0627\u0646\u0647 \u0628\u06af\u0648\u06cc\u0645\u060c \u0645\u0646 \u0646\u062a\u0648\u0627\u0646\u0633\u062a\u0645 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u06a9\u0627\u0641\u06cc \u06cc\u0627 \u0648\u0628\u0644\u0627\u06af \u062e\u0648\u0628\u06cc \u062f\u0631 …<\/p>\n","protected":false},"author":2,"featured_media":79999,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-79998","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/79998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=79998"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/79998\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/79999"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=79998"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=79998"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=79998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}