تلقي إشعارات حول الإصدارات القادمة من Intlayer
    إنشاء:2024-08-11آخر تحديث:2025-06-29

    وثائق محرر Intlayer البصري

    محرر Intlayer البصري هو أداة تقوم بتغليف موقعك الإلكتروني للتفاعل مع ملفات إعلان المحتوى الخاصة بك باستخدام محرر بصري.

    واجهة محرر Intlayer البصري

    حزمة intlayer-editor مبنية على Intlayer ومتاحة لتطبيقات JavaScript، مثل React (Create React App)، Vite + React، و Next.js.

    المحرر البصري مقابل CMS

    محرر Intlayer البصري هو أداة تتيح لك إدارة المحتوى الخاص بك في محرر بصري للقواميس المحلية. بمجرد إجراء تغيير، سيتم استبدال المحتوى في قاعدة الكود. هذا يعني أن التطبيق سيتم إعادة بنائه وستتم إعادة تحميل الصفحة لعرض المحتوى الجديد.

    على النقيض من ذلك، فإن Intlayer CMS هو أداة تتيح لك إدارة المحتوى الخاص بك في محرر بصري للقواميس البعيدة. بمجرد إجراء تغيير، لن يؤثر المحتوى على قاعدة الكود الخاصة بك. وسيعرض الموقع تلقائيًا المحتوى الذي تم تغييره.

    دمج Intlayer في تطبيقك

    لمزيد من التفاصيل حول كيفية دمج Intlayer، راجع القسم المناسب أدناه:

    الدمج مع Next.js

    لدمج مع Next.js، راجع دليل الإعداد.

    الدمج مع Create React App

    لدمج مع Create React App، راجع دليل الإعداد.

    الدمج مع Vite + React

    لدمج مع Vite + React، راجع دليل الإعداد.

    كيفية عمل محرر Intlayer

    المحرر البصري في تطبيق يتضمن شيئين:

    • تطبيق واجهة أمامية يعرض موقعك داخل iframe. إذا كان موقعك يستخدم Intlayer، سيكتشف المحرر البصري محتواك تلقائيًا، وسيسمح لك بالتفاعل معه. بمجرد إجراء تعديل، ستتمكن من تنزيل تغييراتك.

    • بمجرد النقر على زر التنزيل، سيرسل المحرر البصري طلبًا إلى الخادم لاستبدال ملفات إعلان المحتوى الخاصة بك بالمحتوى الجديد (أينما تم إعلان هذه الملفات في مشروعك).

    لاحظ أنه في الوقت الحالي، سيكتب محرر Intlayer ملفات إعلان المحتوى الخاصة بك كملفات JSON.

    التثبيت

    بمجرد تكوين Intlayer في مشروعك، قم ببساطة بتثبيت intlayer-editor كاعتماد تطوير:

    bash
    npm install intlayer-editor --save-dev

    التكوين

    في ملف تكوين Intlayer الخاص بك، يمكنك تخصيص إعدادات المحرر:

    intlayer.config.ts
    import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... إعدادات التكوين الأخرى  editor: {    /**     * مطلوب     * عنوان URL للتطبيق.     * هذا هو عنوان URL المستهدف من قبل المحرر البصري.     * مثال: 'http://localhost:3000'     */    applicationURL: process.env.INTLAYER_APPLICATION_URL,    /**     * اختياري     * الافتراضي هو `true`. إذا كان `false`، فإن المحرر غير نشط ولا يمكن الوصول إليه.     * يمكن استخدامه لتعطيل المحرر لبيئات محددة لأسباب أمنية، مثل الإنتاج.     */    enabled: process.env.INTLAYER_ENABLED,    /**     * اختياري     * الافتراضي هو `8000`.     * منفذ خادم المحرر.     */    port: process.env.INTLAYER_PORT,    /**     * اختياري     * الافتراضي هو "http://localhost:8000"     * عنوان URL لخادم المحرر.     */    editorURL: process.env.INTLAYER_EDITOR_URL,  },};export default config;

    لمشاهدة جميع المعلمات المتاحة، راجع وثائق التكوين.

    استخدام المحرر

    1. عند تثبيت المحرر، يمكنك بدء تشغيل المحرر باستخدام الأمر التالي:

      bash
      npx intlayer-editor start

      لاحظ أنه يجب تشغيل تطبيقك بالتوازي. يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في تكوين المحرر (applicationURL).

    2. ثم افتح عنوان URL المقدم. الافتراضي هو http://localhost:8000.

      يمكنك عرض كل حقل مفهرس بواسطة Intlayer عن طريق التمرير فوق المحتوى الخاص بك باستخدام المؤشر.

      التمرير فوق المحتوى

    3. إذا كان محتواك محددًا، يمكنك الضغط عليه مطولاً لعرض درج التعديل.

    تكوين البيئة

    يمكن تكوين المحرر لاستخدام ملف بيئة محدد. هذا مفيد عندما تريد استخدام نفس ملف التكوين للتطوير والإنتاج.

    لاستخدام ملف بيئة محدد، يمكنك استخدام العلامة --env-file أو -f عند بدء تشغيل المحرر:

    bash
    npx intlayer-editor start -f .env.development

    لاحظ أن ملف البيئة يجب أن يكون موجودًا في الدليل الجذر لمشروعك.

    أو يمكنك استخدام العلامة --env أو -e لتحديد البيئة:

    bash
    npx intlayer-editor start -e development

    التصحيح

    إذا واجهت أي مشاكل مع المحرر البصري، تحقق من التالي:

    • المحرر البصري والتطبيق يعملان.

    • تم إعداد تكوين المحرر بشكل صحيح في ملف تكوين Intlayer الخاص بك.

      • الحقول المطلوبة:
        • يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في تكوين المحرر (applicationURL).
    • يستخدم المحرر المرئي iframe لعرض موقعك الإلكتروني. تأكد من أن سياسة أمان المحتوى (CSP) لموقعك تسمح بعنوان URL الخاص بنظام إدارة المحتوى (CMS) كـ frame-ancestors ('http://localhost:8000' بشكل افتراضي). تحقق من وحدة تحكم المحرر لأي أخطاء.

    سجل الوثائق

    • 5.5.10 - 2025-06-29: بدء السجل
    تلقي إشعارات حول الإصدارات القادمة من Intlayer