Ghiath Alkhatib نشر 15 أكتوبر 2020 أرسل تقرير نشر 15 أكتوبر 2020 مرحبا استخدمت محرر tiny في تطبيق رياكت لكن مشكلة بعد ارسال محتوى تظهر صفحة غير منسقة هكذا <h1 class="fs-3xl s:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 long">Editor (WYSIWYG) In React.Js Project</h1> كيف اجعل صفحة متجاوبة مع تنسق بعد ارسال محتوى انا مبتدئ بهذا مجال شكرا اقتباس
1 محمد ربيع زليول نشر 15 أكتوبر 2020 أرسل تقرير نشر 15 أكتوبر 2020 بتاريخ 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 محمد ربيع زليول نشر 15 أكتوبر 2020 أرسل تقرير نشر 15 أكتوبر 2020 المرجو مشاركة الكود الكامل ( الجزء الذي استخدمت فيه محرر tiny )، والطريقة التي اشتغلت بها لإستخدام محرر tiny. في الرابط التالي ستجد طريقة إستخدام محرر tiny مع تطبيق React، لا أعلم إن كنت قد استخدمت نفس الطريقة أم أنك اشتغلت بطريقة أخرى. أحتاج توضيحات أكثر حتى أستطيع مساعدتك، أيضًا أحتاج فهم ما الذي تقصده بإرسال المحتوى؟ 1 اقتباس
0 ayoubridouani نشر 15 أكتوبر 2020 أرسل تقرير نشر 15 أكتوبر 2020 بالتأكيد ستظهر الصفحة عير منسقة, بسبب ستتلخبط لك أكوادك الخاصة بمشروعك والأكواد العائدة من محرر tiny, أنصحك أن تستعمل المثال التالي محل سريع للمشكلة: <div style="width:100%,overflow:hidden"> <!-- وهنا ستضع الأكواد العائدة من المحرر --> </div> لا تنس أن تعدل على div حتى تكون جميع الأكواد العائدة من المحرر بداخله فقط. 1 اقتباس
0 Ghiath Alkhatib نشر 15 أكتوبر 2020 الكاتب أرسل تقرير نشر 15 أكتوبر 2020 شكرا لكم هذه صور يمكن تضح مشكلة صورة من محرر صورة بعد ارسال تظهر اكواد تنسيق و محتوى اقتباس
0 Yomna Raouf نشر 15 أكتوبر 2020 أرسل تقرير نشر 15 أكتوبر 2020 بتاريخ 10 ساعات قال Ghiath Alkhatib: شكرا لكم هذه صور يمكن تضح مشكلة صورة من محررصورة بعد ارسال تظهر اكواد تنسيق و محتوى مرحبًا غيث. هل يمكنك إرفاق مجلد المشروع حتى نتمكن من مساعدتك بشكل أفضل؟ شكرًا لك. بالتوفيق. اقتباس
0 Ghiath Alkhatib نشر 15 أكتوبر 2020 الكاتب أرسل تقرير نشر 15 أكتوبر 2020 بتاريخ 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> شكرا لك اقتباس
السؤال
Ghiath Alkhatib
مرحبا استخدمت محرر tiny في تطبيق رياكت لكن مشكلة بعد ارسال محتوى تظهر صفحة غير منسقة
هكذا
كيف اجعل صفحة متجاوبة مع تنسق بعد ارسال محتوى انا مبتدئ بهذا مجال
شكرا
6 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.