السلام عليكم
إضافة تلوين الأكواد snippet tinymce plugin
والرابط التالي مثال مباشر لتجربة الإضافة
http://goo2pro.com/myFiles/examples/snippet
والتالي صورة أماكن الإضافة في المحرر لإدخال الأكواد للمحرر :
إضافة تلوين الأكواد للإصدار الرابع من المحرر 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 لحفظ الأكواد في صفحة لإعادة استخدامها مرة أخرى .