محرر Rich + مكون Theme

هدفي هو أنه عندما يدرج المستخدم رابطًا إلى عنوان URL معين (نطاق + المسار الأساسي)، يمكنني عرضه تلقائيًا بتنسيق خاص.

أنا قادر على تحقيق ذلك في المنشور المعروض باستخدام decorateCookedElement() ولكن لا يبدو أنني تمكنت من معرفة كيفية الربط بعرض محرر النصوص الغنية لتخصيص مظهر الرابط هناك.

هل هناك أي ميزات api يمكن استخدامها ضمن apiInitializer لمكون سمة لتخصيص عرض محرر النصوص الغنية؟

كنت أحاول تجنب الاضطرار إلى بناء مكون إضافي للتشغيل على الخادم نفسه… ولم أتوصل إلى حل أبسط حتى الآن، ولكني منفتح على الأفكار البديلة! (على سبيل المثال، لا أريد تعطيل OneBoxing لهذا النطاق ككل لأن الصفحات التسويقية غير SPA لديها علامات OpenGraph جيدة لـ OneBoxing)

النهج التاريخي: decorateCookedElement()

لقد قمت تاريخيًا بشيء مماثل لمقاطع الفيديو التي يتم تقديمها من Bunny.net (منشور مرجعي) حيث سمحت بالعرض القياسي (فيديو OneBox) ثم استخدمت decorateCookedElement() لتطبيق بعض الإصلاحات على مقاطع الفيديو من عنوان URL للبث Bunny.net (theme-initializer.gjs#L8-L15) مثل نسبة العرض إلى الارتفاع، والسماح بملء الشاشة، وما إلى ذلك.

بالنسبة لمقاطع فيديو Bunny، نجح هذا بشكل جيد لأنه في المحرر، يعرض دائمًا عنصر نائب OneBox للفيديو (صندوق رمادي مع أيقونة الفيديو البيضاء) لذا لم تكن هناك حاجة لتعديل هذا المحتوى على أي حال.

مشكلة النص الغني

التحدي المتمثل في استخدام decorateCookedElement() لهدفي الحالي المتمثل في القدرة على استبدال الروابط بعنوان URL معين (نطاق + مسار أساسي) هو عندما يدرج المستخدم هذا الرابط في سطر خاص به في محرر النصوص الغنية ثم يضغط على Enter، يقوم المحرر بتحويله إلى OneBox ولم أتمكن من معرفة ما إذا كانت هناك طريقة للربط بتدفق العرض هذا أو تخصيصه بطريقة أخرى.

هذا الرابط المحدد هو لميزة داخل تطبيق صفحة واحدة (استضافة ثابتة) لذا فهو لا يوفر مجموعة ذات معنى من علامات Open Graph / meta مما يجعل OneBox غير بديهي وقد لاحظت أن أعضاء المجتمع يلفون روابط الاستيراد الخاصة بهم بأقواس التعليمات البرمجية وعمليات التفاف أخرى.

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

5 إعجابات