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

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

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

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

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

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

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

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

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

بتاريخ 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>

بتاريخ 10 ساعات قال Ghiath Alkhatib:

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

مرحبًا غيث.

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

شكرًا لك.

بالتوفيق.

بتاريخ 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>

 

شكرا لك