أفضل التطبيقات مفتوحة المصدر لتحرير WYSIWYG HTML

في عالم الترميز والبرمجة ، هناك نوعان من محرر التعليمات البرمجية – محرر بسيط يستند إلى النص و WYSIWYG (اختصار لـ wizzy-wig أو ما تراه هو ما تحصل عليه). في مقالتنا السابقة ، ناقشنا بعضًا من أفضل تطبيقات تحرير HTML مفتوحة المصدر حيث تكتب الشفرة يدويًا. على الرغم من عدم وجود مشكلات في برامج تحرير HTML النصية ، إلا أنها من المدرسة القديمة. وهنا يأتي محرر الصور في WYSIWYG. لقد أصبح شعبيًا بشكل كبير على مدى السنوات القليلة الماضية. على عكس برمجة HTML الفعلية والأشياء التقنية الأخرى لإنشاء موقع الويب الخاص بك ، توفر تطبيقات تحرير WYSIWYG HTML خيارات بصرية لإنشاء موقع على شبكة الإنترنت دون أي معرفة بالبرمجة (تذكر إعلان Wix ، هذا الأمر المذهل)

محرر WYSIWYG HTML له العديد من المزايا التي يمتاز بها بالمقارنة مع تطبيقات التحرير التي تعتمد على النصوص. للبدء ، يمكنك إنشاء موقع ويب مع محرري WYSIWYG حتى لو كنت لا تعرف كيفية البرمجة. كل ما عليك فعله هو سحب وإفلات العناصر في المحرر وبمجرد الانتهاء من ذلك فقط انسخ الكود. ومع ذلك ، فإن العثور على محرر WYSIWYG HTML الجيد ليس بالأمر السهل ، خاصة إذا كنت بحاجة إلى أن يكون مفتوح المصدر ومجاني. لذلك ، في هذه المقالة ، قمنا بتجميع أفضل تطبيقات تحرير WYSIWYG HTML مفتوحة المصدر التي يمكننا العثور عليه. هيا نبدأ. هلا فعلنا؟

أفضل تطبيقات تحرير WYSIWYG HTML مفتوحة المصدر

1. Pell

ربما يكون Pell هو أصغر وأبسط محرر WYSIWYG الذي ستصادفه. هو حرفيا بحجم 1.38 كيلو بايت!

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

الايجابيات:

1. أصغر وأخف تطبيق WYSIWYG
2. لا وجود للتبعيات
3. تخصيص بسهولة

سلبيات:

1. لا وجود لتحرير HTML
2. الصور فقط من خلال الروابط

الحكم:

من خلال النظر في حجمه ، Pell يجعل الحزمة مقنعة. ولكن لنكن صادقين ، يمكنك فقط تنفيذ ملفات HTML الأساسية باستخدام خيارات التحرير والتعديل المحدودة. لذلك ، إذا كنت شخصًا يبحث عن محرر WYSIWYG سريع وخفيف الحجم لبعض الأعمال الأساسية جدًا ، فعليك التحقق من Pell.

جرب Pell هنا

2. OpenWYSIWYG

OpenWYSIWYG هو محرر نص منسق ومتعدد التصفح، ومشفّر بالكامل في JavaScript. بمجرد نسخ بضعة أسطر من التعليمات البرمجية ، يمكنك تحويل أي <textarea> إلى محرر WYSIWYG قوي لـ OpenWYSIWYG.

تتشابه خيارات واجهة المستخدم وخيارات التحرير مع القوائم المنسدلة مع أي محرر نصوص وستشعر أنك في المنزل. بصرف النظر عن جميع خيارات التنسيق الأساسية ، يتميز البرنامج بمنتقي ألوان مُحسّن مع 216 لونًا على الويب للاختيار من بينها ، وأداة قوية لتنسيق الجداول مع كل خيار يمكن أن تفكر فيه.

شيء رائع آخر حول OpenWYSIWYG هو أنه مع كل الخيارات المرئية ، لا يزال بإمكانك عرض كود HTML الخام وإجراء تعديلات في الكود.

الايجابيات:

1. بيئة تحرير قوية
2. واجهة المستخدم بديهية وسهلة
3. منتقي الألوان وخيارات تحرير الجدول واسعة النطاق

سلبيات:

1. لم يتم تحديثه منذ بضع سنوات

الحكم:

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

OpenWYSIWYG التجريبي متاح هنا

3. TinyMCE (إصدار المجتمع)

المحرر التالي في قائمتنا هو TinyMCE ، محرر WYSIWYG الكامل للويب. كما أنه مكتوب بالكامل بلغة JavaScript ويوفر واجهة مستخدم وتجربة مثل معظم معالجات النصوص.

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

حافظ المطورون على أسعار الموديلات المتميزة وفقًا لعدد المستخدمين لديك ، أي كلما زاد عدد المستخدمين لديك ، زاد المبلغ الذي يتعين عليك دفعه. تتضمن بعض الميزات المتميزة تحميل وإدارة جميع ملفاتك من Google Drive أو Microsoft Azure بدلاً من الخادم الخاص بك ، ودعم الإضافات ، ومدقق الإملاء ، ومدقق الارتباط ، وكذلك الدعم الفني المتميز.

الايجابيات:

1. دعم الإضافات
2. إدارة الملفات
3. دعم فني
4. محرر رمز نمط IDE لـ HTML

سلبيات:

1. الثمن
2. ليس مفتوح المصدر بالكامل

الحكم:

TinyMCE مع خيار التكامل السهل ، واجهة المستخدم سهلة الاستخدام والكثير من الميزات بما في ذلك الدعم الفني ، هي حزمة كاملة. إذا كنت ترغب فقط في استخدام محرر WYSIWYG HTML مفتوح المصدر الأكثر ثراءً بالميزات ولا بأس في إنفاق بعض الأموال ، فإن TinyMCE هو السبيل للذهاب. كما أنه يوفر نسخة تجريبية مجانية لمدة شهر واحد لطراز Pro الخاص بهم والتي يمكنك دائمًا التحقق منه!

جرب TinyMCE Demo هنا

4. Jodit

Jodit هو محرر WYSIWYG سريع وخفيف الحجم يمكنك تضمينه في الكود وبدء تحرير صفحتك. حجمه خفيف جدًا حوالي 100 كيلوبايت ، وقد تمت كتابته بالكامل في TypeScript ، وبالتالي لا تحتاج إلى أي من التبعيات أو المكتبات لتشغيله.

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

أفضل ما أعجبني في Jodit هو أنه يأتي مع محرر ACE خارج الصندوق وبزر واحد ، يمكنك التبديل بين الرمز الفعلي ووضع المعاينة. يمكنك إجراء تعديلات مباشرة في الكود أو مجرد نسخها ولصقها على موقع الويب الخاص بك.

الايجابيات:

1. خفيف الحجم ، لا وجود للمكتبات
2. السحب والإسقاط
3. محرر ACE من خارج الصندوق
4. خيار الدعم الفني (مدفوع)

الحكم:

يوفر لك Jodit أفضل ما في العالمين – تحرير WYSIWYG المرئي السهل بالإضافة إلى ضبط الكود الخام. إذا كنت شخصًا لديه بعض المعرفة على الأقل في HTML ، فقد يكون Jodit هو الخيار الأفضل لك.

جرب Jodit 

5. Summernote

Summernote هو محرر WYSIWYG بسيط للغاية مبني على jQuery ويستند إلى Bootstrap. نظرًا لأنه يدعم Bootstrap ، يمكنك استخدام جميع الأنماط والسمات المدعومة على المحرر الخاص بك من Bootswatch.

يحتوي المحرر نفسه على واجهة مستخدم نظيفة للغاية مع الحد الأدنى ويمكنك حتى تحرير خيارات التنسيق أو إضافتها وفقًا لاحتياجاتك. من خلال Summernote’s Air-mode ، يمكنك حتى إخفاء شريط الأدوات بالكامل وتعديل وثيقتك بسرعة فائقة. جنبا إلى جنب مع جميع خيارات التنسيق الأساسية ، السحب والإفلات ، نسخ / لصق الصور ، فإنه يحول تلقائيًا جميع الصور إلى base64 ، لذلك ليس عليك تطبيق معالجة الصور على الإطلاق.

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

الايجابيات:

1. الحد الأدنى لمنحنى التعلم
2. وضع الهواء لتحرير السريع
3. يدعم Bootstrap 3.x.x إلى 4.x.x
4. عرض وتحرير في HTML

السلبيات:

1. لا يوجد دعم البرنامج المساعد
2. يتطلب Bootstrap

الحكم:

من المحتمل أن Summernote هو محرر WYSIWYG الأكثر ثراءً ولكنه مجاني في السوق وهو يتحسن باستمرار. إذا كنت تعمل مع Bootstrap ، فهذا يعني أن Summernote لا يجعلك تقوم بالتفكير ، ولكن حتى إذا لم يكن Summernote كذلك فهو يستحق السحب.

جرب Summernote Demo

6. Froala

وأخيراً وليس آخراً ، محرر Froala ، WYSIWYG الجميل المكتوب بلغة جافا سكريبت. Froala هو واحد من الأدوات الأكثر شعبية في هذه القائمة وقد تم حساب شعبيته مع المطورين من خلال التكامل السهل والتصميم النظيف.

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

مثل TinyMCE ، يأتي Froala أيضًا في الكثير من النكهات ، ولكن حتى الإصدار المجاني يتكون من جميع الميزات. الفرق الوحيد هو أنك لن تحصل على شفرة المصدر الكاملة والدعم الفني.

الايجابيات:

1. محرر قوي خفيف الحجم
2. التحرير المضمن
3. عدد كبير من الإضافات

السلبيات:

1. ليس ذلك التطبيق الكبير للهاتف / الموقع

الحكم:

Froala سريع وخفيف الحجم مع واجهة مستخدم جميلة ، لكنه يدير حتى الآن تقديم جميع الميزات التي قد يبحث عنها المرء في محرر WYSIWYG HTML. إذا كنت على ما يرام دون وجود شفرة المصدر والدعم ، فإن النسخة المجانية ستخدمك بشكل جيد ، وإلا فإنك تعرف ماذا تفعل ؛ إنه لا يتحسن من هذا.

العرض التجربي: جرب Froala هنا

7. CKEditor

يحظى CKEditor بشعبية كبيرة بين المستخدمين لكونه محرر WYSIWYG HTML مفتوح المصدر ومُصمم بشكل جميل. يأتي مع أكثر من 21 ألف اختبار لمساعدتك على تعلم HTML في تصميم سهل الاستخدام. هناك وثائق مفصلة لمساعدتك على زيادة صقل مهاراتك. بعض من أكبر الأسماء في صناعة التكنولوجيا تثق به.

لاحظ أنه سيتعين عليك الحفاظ على إشعارات حقوق الطبع والنشر في كل ملف بدون حذف ملف LICENSE.md الموجود في مجلد تثبيت CKEditor. هذا ليس عيبًا ، خاصةً عندما تحصل على الكثير من القيمة في المقابل.

هناك دعم للإضافات ،@mention ، emojis ، المتصفحات القديمة ، وحتى الإكمال التلقائي الذي يُمكن أن توفر الكثير من الوقت.

الايجابيات:

1. الوثائق المفصلة والاختبارات والأسئلة
2. التعاون
3. الإكمال التلقائي

السلبيات:

1. الاحتفاظ بملف الترخيص

الحصول على CKEditor

تنويه خاص:

1. MediumEditor هو استنساخ مفتوح المصدر لمحرر WYSIWYG المضمّن لـ Medium.com. انه مميز بشكل بسيط وخفيف الحجم ويأتي دون أي تبعيات. على الرغم من أنه ليس بهذه القوة ، إلا أنه قد تعمل كأداة تحرير مضمّنة رائعة للمستندات ذات الصلة بالنصوص.

2. تتيح لك حزمة HTML Preview من Atom إضافة جزء معاينة يمكنك من خلاله معاينة مباشرة لرمز HTML ، والتي يمكن أن تكون مفيدة للغاية للمطورين. على الرغم من أن هذا ليس مخصصًا للمبتدئين ، إلا أنه يُعد حزمة رائعة لإضافتها إلى سير العمل الحالي الخاص بك إذا كنت تعمل بالفعل في برمجة HTML.

أفضل محرر WYSIWYG HTML مفتوح المصدر

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

لذلك كانت هذه من أفضل تطبيقات تحرير HTML WYSIWYG HTML مفتوحة المصدر التي يمكنك استخدامها اليوم. أيهما تختار أو أي منها تستخدمه بالفعل؟ أخبرنا في قسم التعليقات أدناه.