ahmedsaoud31

إضافة تلوين الأكواد snippet للإصدار الرابع من المحرر tinymce

5 ردود في هذا الموضوع

السلام عليكم

 

إضافة تلوين الأكواد snippet tinymce plugin

والرابط التالي مثال مباشر لتجربة الإضافة

http://goo2pro.com/myFiles/examples/snippet

post-254524-0-00206400-1371603474_thumb.

 

والتالي صورة أماكن الإضافة في المحرر لإدخال الأكواد للمحرر :

post-254524-0-87234300-1371603492_thumb.

 

إضافة تلوين الأكواد للإصدار الرابع من المحرر tinymce , وتم بناء هذه الإضافة على إضافة لمكتبة jQuery  وهي snippet والمبنية على SHJS  وتم استخدام إضافة snippetcashe لعمل cashe للأكواد عند التطبيق لأكثر من كود داخل نفس الصفحة .

 

- لإضافة الإضافة للمحرر ستقوم بنسخ المجلد snippet داخل المجلد plugins في المحرر tinymce

- إضافة الإضافة عند تهيئة المحرر كالتالي :

<script type="text/javascript">    tinymce.init({        name: 'tt',        selector: "textarea",        theme: "modern",        plugins: [            "table preview image link media insertdatetime snippet code"        ],        toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image snippet",        toolbar2: "print preview media | forecolor backcolor emoticons",        templates: [            {title: 'Test template 1', content: 'Test 1'},            {title: 'Test template 2', content: 'Test 2'}        ]    });</script>

- وفي صفجة عرض الأكود لا ننسى تضمين الملفات التالية لتظهر الأكواد بتنسيقاتها :

<script type="text/javascript" src="path/to/js/jquery-migrate-1.1.1.min.js"></script><script type="text/javascript" src="path/to/js/jquery.snippet.min.js"></script><script type="text/javascript" src="path/to/js/jquery.snippet.compiler.js"></script><script type="text/javascript" src="path/to/js/jquery.snippet.run.js"></script><link rel="stylesheet" type="text/css" href="path/to/css/jquery.snippet.min.css">

- بعد تضمين هذه الملفات سيتم إظهار وتنسيق الأكواد تلقائياً عند إكتمال تحميل الصفحة .

 

ملاحظة: إذا أردت تنفيذ التنسيق عند حدث معين أخر يمكن لك استخدام الدالة runSnippet .

 

والتالي رابط تنزيل المحرر كامل بالإضافة مع مثالين هما exapmle.html و الثاني example.php لحفظ الأكواد في صفحة لإعادة استخدامها مرة أخرى .

snippet.zip

تم تعديل بواسطه ahmedsaoud31
4

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

tinymce رائع ، أفضل طريقة إستخدمتها في العديد من الاشياء منها منتديات SMF هي google-code-prettify :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

بالطبع google-code-prettify رائعة وهي أول مكتبة لهذا الغرض استخدمتها ومن دلني عليها هو أنت في مشاركة سابقة لي في قسم PHP :) , ولكن snippet تأتي بتشكيلة متنوعة من المظاهر المختلفة للأكواد , بالإضافة للتحكم السهل في الخصائص كأرقام الأسطر وتحديد نطاق من الأسطر البرمجية وأخريات .

1

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

great work :)

0

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

السلام عليكم

 

بوركت أستاذ أيوب , وكل عام وأنتم بخير بمناسبة حلول الشهر المبارك

 

تم إضافة التعديلات الأتية :
- إدراج الكود داخل المحرر مع مراعات المسافات الفارغة ومسافات الـ tab و enter .
- إغلاق إمكانية التعديل للكود من خلال المحرر مباشراً ولكن يمكن التعديل من خلال نافذة الـ snippet .
- تحميل إعدادت الكود خلال نافذة الـ snippet عند تعديل كود قديم , حتى لا تضطر لإعادة ضبط الخصائص للكود في كل مرة تقوم بالتعديل عليه .
- إمكانية استخدام الكود مباشراً ضمن موقع عربي إتجاهه من اليمين لليسار فسيظل إتجاه الكود من اليسار لليمين .
- تعديل بعض الأخطاء في الإصدار السابق .

- عدم الإعتماد على مكتبة الـ snippetcache لأنها أدت لظهور بعض الأخطاء في الإضافة .

 

لتجربة الإضافة على نفس الرابط في الأعلى

http://goo2pro.com/myFiles/examples/snippet

 

رابط تنزيل المحرر كامل متضمن الإضافة والتعديلات

snippet.zip

 

دمتم بخير

تم تعديل بواسطه ahmedsaoud31
2

شارك هذا الرد


رابط المشاركة
شارك الرد من خلال المواقع ادناه

  • يستعرض القسم حالياً   0 members

    لا يوجد أعضاء مسجلين يشاهدون هذه الصفحة .