• 0

استخدام محرر tiny في تطبيق رياكت

مرحبا استخدمت محرر tiny في تطبيق رياكت لكن مشكلة بعد ارسال محتوى تظهر صفحة غير منسقة

هكذا

<h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 long">Editor (WYSIWYG) In&nbsp; React.Js Project</h1>

كيف اجعل صفحة متجاوبة مع تنسق بعد ارسال محتوى انا مبتدئ بهذا مجال

شكرا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 1
بتاريخ 59 دقائق مضت قال Ghiath Alkhatib:

صورة بعد ارسال تظهر اكواد تنسيق و محتوى

أعتقد أن المحرر يعمل بشكل صحيح، هذا هو دوره، فهو في النهاية يقوم بتحويل النص المكتوب به وتنسيقاته إلى أكواد HTML.

ما يجب عليك ان تقوم به هو التالي:

بدل طباعة المحتوى بالشكل العادي كما تقوم بطباعته حاليًا ( على شكل نص string )، يجب عليك أن تقوم بعمل render لهذا النص وتحويله إلى HTML.

سأقدم لك حلين للقيام بهذا:

الحل الأول:

عن طريق إستخدام الخاصية dangerouslySetInnerHTML.

لنقل مثلًا أن الخاصية أو المتغير الذي يحتوي على هذه الأكواد التي أرسلها المحرر هو content.

بدل كتابة الكود أسفله لعرض المحتوى:

<div>
  {content}
</div>

يجب كتابة كود مشابه للكود التالي:

<div dangerouslySetInnerHTML={{__html: content}} />

الحل الثاني:

يمكنك إستخدام بعض المكتبات التي تقوم بنفس الدور ( تحويل html على شكل نص string إلى عناصر HTML )، أذكر كمثال مكتبة html-react-parser

التي يمكنك تثبيتها في مشروعك عن طريق الأمر:

npm i html-react-parser

ثم إستخدامه بالشكل التالي:

import parse from 'html-react-parser';

ثم:

<div>
  {parse(content)}
</div>

 

2 اشخاص أعجبوا بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

المرجو مشاركة الكود الكامل ( الجزء الذي استخدمت فيه محرر tiny )، والطريقة التي اشتغلت بها لإستخدام محرر tiny.

في الرابط التالي ستجد طريقة إستخدام محرر tiny مع تطبيق React، لا أعلم إن كنت قد استخدمت نفس الطريقة أم أنك اشتغلت بطريقة أخرى.

أحتاج توضيحات أكثر حتى أستطيع مساعدتك، أيضًا أحتاج فهم ما الذي تقصده بإرسال المحتوى؟

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

بالتأكيد ستظهر الصفحة عير منسقة, بسبب ستتلخبط لك أكوادك الخاصة بمشروعك والأكواد العائدة من محرر tiny, أنصحك أن تستعمل المثال التالي محل سريع للمشكلة:
 

<div style="width:100%,overflow:hidden">
  <!-- وهنا ستضع الأكواد العائدة من المحرر -->
</div>

لا تنس أن تعدل على div حتى تكون جميع الأكواد العائدة من المحرر بداخله فقط.

1 شخص أعجب بهذا

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0

شكرا لكم
هذه صور يمكن تضح مشكلة
صورة من محرر

5f889bdcbcd33_Skarmavbild2020-10-15kl.8_58_28em.thumb.png.ea8108ce2fa9563ebed7c62902636ebb.png

صورة بعد ارسال تظهر اكواد تنسيق و محتوى

5f889b9f770e4_Skarmavbild2020-10-15kl.8_54_38em.thumb.png.a8576dd72fc0744584ce24db9a5e49bf.png

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 10 ساعات قال Ghiath Alkhatib:

شكرا لكم
هذه صور يمكن تضح مشكلة
صورة من محررصورة بعد ارسال تظهر اكواد تنسيق و محتوى

مرحبًا غيث.

هل يمكنك إرفاق مجلد المشروع حتى نتمكن من مساعدتك بشكل أفضل؟

شكرًا لك.

بالتوفيق.

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية
  • 0
بتاريخ 41 دقائق مضت قال محمد ربيع زليول:

أعتقد أن المحرر يعمل بشكل صحيح، هذا هو دوره، فهو في النهاية يقوم بتحويل النص المكتوب به وتنسيقاته إلى أكواد HTML.

ما يجب عليك ان تقوم به هو التالي:

بدل طباعة المحتوى بالشكل العادي كما تقوم بطباعته حاليًا ( على شكل نص string )، يجب عليك أن تقوم بعمل render لهذا النص وتحويله إلى HTML.

سأقدم لك حلين للقيام بهذا:

الحل الأول:

عن طريق إستخدام الخاصية dangerouslySetInnerHTML.

لنقل مثلًا أن الخاصية أو المتغير الذي يحتوي على هذه الأكواد التي أرسلها المحرر هو content.

بدل كتابة الكود أسفله لعرض المحتوى:


<div>
  {content}
</div>

يجب كتابة كود مشابه للكود التالي:


<div dangerouslySetInnerHTML={{__html: content}} />

الحل الثاني:

يمكنك إستخدام بعض المكتبات التي تقوم بنفس الدور ( تحويل html على شكل نص string إلى عناصر HTML )، أذكر كمثال مكتبة html-react-parser

التي يمكنك تثبيتها في مشروعك عن طريق الأمر:


npm i html-react-parser

ثم إستخدامه بالشكل التالي:


import parse from 'html-react-parser';

ثم:


<div>
  {parse(content)}
</div>

 

شكرا لك

انشر على الشّبكات الاجتماعية


رابط هذه المساهمة
شارك على الشبكات الإجتماعية

يجب أن تكون عضوًا لدينا لتتمكّن من التعليق

انشاء حساب جديد

يستغرق التسجيل بضع ثوان فقط


سجّل حسابًا جديدًا

تسجيل الدخول

تملك حسابا مسجّلا بالفعل؟


سجّل دخولك الآن