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

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

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

اقرأ أيضًا: 50+ تطبيقات Android مفتوحة المصدر عندما تريد التخلص من Google

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

1. بيل

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

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

الايجابيات:

• أصغر وأخف أداة WYSIWYG
• لا تبعيات
• سهل التخصيص

سلبيات:

• لا يوجد تحرير رائع HTML
• الصور فقط من خلال الروابط

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

احصل على Pell

2. OpenWYSIWYG

OpenWYSIWYG هو محرر HTML للنص المنسق عبر المستعرضات مشفر بالكامل في JavaScript. بمجرد نسخ بضعة سطور من التعليمات البرمجية ، يمكنك تحويل أي منها إلى محرر WYSIWYG HTML القوي لـ OpenWYSIWYG. <p> <p> تتشابه واجهة المستخدم وخيارات التحرير مع القوائم المنسدلة إلى حد بعيد مع أي محرر نصوص وأنت سوف تشعر وكأنك في المنزل. بصرف النظر عن جميع خيارات التنسيق الأساسية ، يفتخر OpenWYSIWYG بمنتقي ألوان محسّن مع 216 لونًا للويب للاختيار من بينها وأداة تنسيق جدول قوية مع كل خيار يمكن أن يخطر ببالك. </ p> <p> شيء آخر رائع في OpenWYSIWYG هو أنه إلى جانب جميع الخيارات المرئية ، لا يزال بإمكانك <strong> عرض شفرة HTML الأولية </ strong> وإجراء التعديلات مباشرة في الشفرة. مفيد عندما تريد تعلم مهارات الترميز أو تحديثها. </ p> <p> <img loading = "lazy" / p> <ul> <li> لم يتم تحديثه في غضون سنوات قليلة </ li> </ul> <p> <strong> الحكم: </ strong> <br> يجب أن يعمل محرر OpenWYSIWYG HTML مفتوح المصدر عند كتابته بلغة JavaScript مع أي لغة برمجة ويب أخرى. إذا كنت تبحث عن شيء أقوى قليلاً من Pell لتضمينه في تطبيق الويب الخاص بك ، فهذا خيار رائع. </ p> <p> <strong> <a href = "http://www.openwebware.com/ demo "target =" _ blank "rel =" noopener noreferrer "> احصل على OpenWYSIWYG </a> </strong> </p> <h3> 3. TinyMCE (إصدار المجتمع) </h3> <p> محرر HTML WYSIWYG التالي مفتوح المصدر في قائمتنا هو TinyMCE. كما أنه مكتوب بالكامل بلغة JavaScript ويقدم واجهة مستخدم وتجربة مثل معظم معالجات النصوص. وهذا يجعلها أكثر سهولة في الاستخدام. </ p> <p> إن TinyMCE <a href="https://www.tiny.cloud/pricing/" target="_blank" rel="noopener noreferrer"> ليس مجانيًا </a> ، ولكن إصدار المجتمع هو الإصدار المجاني مفتوح المصدر. يأتي مع جميع خيارات التحرير الأساسية مثل تنسيق النص والقوائم والجداول وأيضًا بعض خيارات تحرير الصور. </ p> <p> احتفظ المطورون بتسعير النماذج المتميزة وفقًا لعدد المستخدمين. تتضمن بعض الميزات المميزة دعم Google Drive و Microsoft Azure والإضافات والمدقق الإملائي والارتباط والدعم الفني. </ p> <p> <img loading = "lazy" class = "penci-lazy border aligncenter wp-image- 34916 الحجم الكامل "src =" https://techwiser.com/wp-content/uploads/2018/07/TinyMCE.jpg "data-src =" https: // techwiser. واجهة مستخدم سهلة الاستخدام وعدد كبير من الميزات ، عبارة عن حزمة كاملة. إذا كنت تريد فقط محرر WYSIWYG HTML مفتوح المصدر الأكثر ثراءً بالميزات ولا بأس في إنفاق بعض المال ، فإن TinyMCE هو السبيل للذهاب. أيضًا ، يقدمون إصدارًا تجريبيًا مجانيًا لمدة شهر واحد لطراز Pro الخاص بهم والذي يمكنك دائمًا التحقق منه. </ p> <p> <strong> <a href = "https://www.tiny.cloud/docs/demo/full -featured / "target =" _ blank "rel =" noopener noreferrer "> احصل على TinyMCE Demo </a> </strong> </p> <h3> 4. Jodit </h3> <p> Jodit هو محرر WYSIWYG HTML محرر مفتوح المصدر سريع وخفيف الوزن يمكنك تضمينه في التعليمات البرمجية الخاصة بك والبدء في تحرير صفحتك. إنه خفيف جدًا ويبلغ حجمه حوالي 100 كيلوبايت وقد تمت كتابته بالكامل بلغة TypeScript. لهذا السبب لا تحتاج إلى أي تبعيات أو مكتبات لتشغيلها. </ p> <p> يأتي مع واجهة سحب وإفلات للصورة أيضًا. يمكنك أيضًا إرفاق مقاطع فيديو YouTube أو Vimeo عبر رابط أو تضمينها. أفضل ما يعجبني في Jodit هو أنه يأتي مع <strong> محرر ACE </strong> خارج الصندوق وبزر واحد ، يمكنك التبديل بين الكود الفعلي ووضع المعاينة. </ p> <p > <img loading = "lazy" class = "penci-lazy border aligncenter wp-image-34917 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Jodit.jpg" alt = "واجهة مستخدم Jodit" width = "677" height = "394" data-srcset = "https : //techwiser.com/wp-content/uploads/2018/07/Jodit.jpg 677w ، https://techwiser.com/wp-content/uploads/2018/07/Jodit-300x175. jpg 300w "sizes =" (max-width: 677px) 100vw، 677px "> </p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 2 "style =" float: none؛ الهامش: 0 بكسل 0 0 بكسل 0 ؛ text-align: center؛ "> <ins class =" adsbygoogle "style =" display: inline-block؛ width: 336px؛ height: 280px "data-ad-client =" ca-pub-3072677420592088 "data-ad-slot = "1324909417"> </ins> </div> <p> <strong> الايجابيات: </ strong> </p> <ul> <li> خفيف الوزن ، بدون مكتبات </ li> <li> اسحب n- drop </li> <li> محرر ACE خارج الصندوق </ li> <li> الدعم الفني (مدفوع) </ li> </ul> <p> <strong> الحكم: </ strong> <br> Jodit يقدم أفضل ما في العالمين - محرر WYSIWYG المرئي السهل وكذلك تحرير التعليمات البرمجية الأولية. إذا كنت شخصًا لديه على الأقل بعض المعرفة في HTML ، فقد يكون Jodit هو الخيار الأفضل لك. </ p> <p> <a href = "https://xdsoft.net/jodit/play.html" target = "_blank" rel = "noopener noreferrer"> <strong> احصل على Jodit Playground </strong> </a> </p> <h3> 5. Summernote </h3> <p> Summernote هو محرر WYSIWYG بسيط للغاية ومفتوح المصدر مبني على jQuery ويعتمد على Bootstrap. نظرًا لأنه يدعم Bootstrap ، يمكنك استخدام جميع الأنماط والسمات المدعومة على المحرر الخاص بك من Bootswatch. </p> <p> يحتوي محرر WYSIWYG HTML مفتوح المصدر نفسه على واجهة مستخدم نظيفة جدًا ومحدودة للغاية ويمكنك حتى تحرير أو إضافة تنسيق خيارات حسب حاجتك. باستخدام وضع الهواء في Summernote ، يمكنك إخفاء شريط الأدوات بالكامل وتعديل المستند سريعًا. مناسب. يمكنه أيضًا تحويل جميع الصور تلقائيًا إلى base64 ، لذلك لن تضطر إلى التعامل مع الصور على الإطلاق. </ p> <p> بالنسبة لي ، أفضل جزء في Summernote هو فريق المطورين الذين يعملون بجد الذين يقفون وراءها والذين يستمعون دائمًا إلى المجتمع وإضافة ميزات جديدة. تتضمن الأمثلة دعمًا للمكونات الإضافية وإصدارًا خفيفًا أو فانيلا من Summernote لا يتطلب Bootstrap. </p> <p> <img loading = "lazy" class = "penci-lazy border aligncenter wp-image-34918 size-full "src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg "data-src =" https://techwiser.com/wp-content/uploads/2018/07/Summernote .jpg "alt =" Summernote visual Editor "width =" 677 "height =" 441 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Summernote.jpg 677w، يستحق Summernote التحقق منه. </ p> <p> <strong> <a href="https://summernote.org/" target="_blank" rel="noopener noreferrer"> احصل على عرض Summernote التجريبي </a> </strong> </p> <h3> 6. Froala </h3> <p> Froala هو محرر WYSIWYG HTML جميل مفتوح المصدر مكتوب بلغة JavaScript. إنها واحدة من أكثر الأدوات شيوعًا في هذه القائمة ويمكن أن تُعزى شعبيتها لدى المطورين إلى سهولة تكاملها وتصميمها النظيف. </ p> <p> يعد Froala محررًا قويًا للغاية في حد ذاته وعدد لا يحصى من المكونات الإضافية له فقط زاد نفس الشيء. يشتمل بعضها على محرر صور متقدم ، ورموز تعبيرية ، ومدقق إملائي ، ومن السهل أيضًا إنشاء المكون الإضافي الخاص بك. يمكن أيضًا الوصول إلى جميع الأدوات باستخدام المحرر المضمن الذي يعد ملائمًا للغاية. </ p> <p> مثل TinyMCE ، <a href="https://www.froala.com/wysiwyg-editor/pricing"> يتوفر Froala بالعديد من النكهات </a> ، ولكن حتى الإصدار المجاني يحتوي على الكثير من الميزات. الاختلاف الوحيد هو أنك لن تحصل على كود المصدر الكامل والدعم الفني. </ p> <p> <img loading = "lazy" class = "penci-lazy border aligncenter wp-image-34919 size-full" src = "https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg" data-src = "https://techwiser.com/wp-content/uploads/2018/07/Froala. jpg "alt =" محرر Froala WYSIWYG HTML مفتوح المصدر "width =" 677 "height =" 394 "data-srcset =" https://techwiser.com/wp-content/uploads/2018/07/Froala.jpg 677w، https://techwiser.com/wp-content/uploads/2018/07/Froala-300x175.jpg 300w "sizes =" (max-width: > <strong> احصل على Froala </strong> </a> </p> <h3> 7. CKEditor </h3> <p> يحظى CKEditor بشعبية كبيرة بين المستخدمين لكونه محرر WYSIWYG HTML مفتوح المصدر مصمم بشكل جميل. يأتي مع أكثر من 21 ألف اختبار لمساعدتك على تعلم HTML بتنسيق سهل. الوثائق التفصيلية موجودة لمساعدتك على صقل مهاراتك بشكل أكبر. تثق به بعض أكبر الأسماء في مجال التكنولوجيا. </ p> <p> لاحظ أنه سيتعين عليك الاحتفاظ بإشعارات حقوق النشر في كل ملف كما هي وعدم حذف ملف LICENSE.md الموجود في مجلد التثبيت CKEditor. هذا ليس عيبًا ، خاصةً عندما تحصل على الكثير من القيمة في المقابل. </ p> <p> هناك دعم للمكونات الإضافية ، والإشارة @ ، والرموز التعبيرية ، والمتصفحات القديمة ، وحتى الإكمال التلقائي الذي يمكن أن يوفر الكثير من الوقت. </ p> <p> <img loading = "lazy" p> <strong> الايجابيات: </ strong> </p> <ul> <li> التوثيق التفصيلي والاختبارات والأسئلة </ li> <li> التعاون والإشارة باستخدام @ </li> <li> الإكمال التلقائي </ li> </ul> <p> <strong> السلبيات: </ strong> </p> <ul> <li> احتفظ بملف الترخيص </ li> </ul> <p> <strong> <a href = "https: //ckeditor.com/ "target =" _ blank "rel =" noopener noreferrer "> احصل على CKEditor </a> </strong> </p> <p> <strong> الإشارات الفخرية: </ strong> </p> <p> 1. <a href="https://github.com/yabwe/medium-editor" target="_blank" rel="noopener noreferrer"> MediumEditor </a> هو استنساخ مفتوح المصدر لمحرر WYSIWYG المضمن لـ Medium.com . انها بسيطة ميتة ، خفيف الوزن ويأتي بدون أي تبعيات. على الرغم من أنه ليس بهذه القوة ، إلا أنه يمكن أن يعمل كأداة تحرير مضمنة رائعة للمستندات ذات الصلة بالنصوص أو النصوص. </ p> <p> 2. تسمح لك <a href="https://atom.io/packages/atom-html-preview" target="_blank" rel="noopener noreferrer"> حزمة معاينة HTML </a> في Atom بإضافة جزء معاينة فيه يمكنك الحصول على معاينة مباشرة لشفرة HTML الخاصة بك ، والتي يمكن أن تكون مفيدة جدًا للمطورين. على الرغم من أن هذا ليس للمبتدئين بالتأكيد ، إلا أنه يعد حزمة رائعة لإضافتها إلى سير العمل الحالي إذا كنت تقوم بالفعل بالبرمجة بتنسيق HTML. </p> <h3> أفضل محرر WYSIWYG HTML مفتوح المصدر </ h3> <p> بينما لا يزال HTML الطريقة الأكثر فاعلية لإنشاء موقع ويب والمزيد من الأشياء المعقدة التي يمكن استخدامها ، لقد حصل محررو WYSIWYG على مكان خاص بهم. يتطلب تعلم البرمجة الكثير من استثمار الوقت والطاقة وقد لا يكون مفيدًا للجميع. إذا كانت لديك خبرة سابقة في البرمجة ولم يكن لديك وقت للتعلم ، فيمكنك الابتعاد تمامًا باستخدام محرر WYSIWYG HTML مفتوح المصدر. </ p> <p> <strong> اقرأ أيضًا: </ strong> <a href = "https : //techwiser.com/open-source-browser-for-android/ "> 7 أفضل متصفح مفتوح المصدر لنظام Android (2018) </a> </p> <div class =" e85e5af91879d860f8283fd1fb4949d1 "data-index =" 3 "style =" float: none؛ margin: 0px 0 0px 0؛ text-align: center؛ "> <ins class =" adsbygoogle "style =" display: block؛ text-align: center؛ " data-ad-layout = "in-article" data-ad-format = "سائل" data-ad-client = " ca-pub-3072677420592088 "data-ad-slot =" 2804037256 "> </ins> </div> <div style =" font-size: 0px؛ الارتفاع: 0 بكسل ؛ ارتفاع الخط: 0 بكسل ؛ الهامش: 0؛ حشوة: 0 ؛ clear: both؛ "> </div> <div class =" penci-single-link-pages "> </div>