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

كيف اضيف زر لمحرر المنتدى ckeditor لإضافة ايقونة لمحرر ckeditor المستخدم بالمنتدى تعمل

لإضافة ايقونة لمحرر ckeditor المستخدم بالمنتدى تعمل على فتح نافذة جديدة بتضمين صفحة هتمل يوجد بها كود مركز تحميل خارجي مثلاً تكون الطريقة كالتالي



look/images/icons/i1.gif كيف اضيف زر مركز تحميل خارجي لمحرر المنتدى ckeditor
  04-09-2014 03:32 مساءً  
معلومات الكاتب ▼
انضم في : 18-07-2009
رقم العضوية : 1
المشاركات : 12,571
الدولة : KSA
الجنس :
الدعوات : 52
قوة السمعة : 74,196
موقعي : زيارة موقعي
لإضافة ايقونة لمحرر ckeditor المستخدم بالمنتدى تعمل على فتح نافذة جديدة بتضمين صفحة هتمل يوجد بها كود مركز تحميل خارجي مثلاً
تكون الطريقة كالتالي :
تضيف plugin جديد بداخل مجلد plugins الموجود على المسار التالي
CODE
look/ckeditor/plugins/

اسم مجلد plugin نسميه كمثال : file_upload

وسيكون مسارة كالتالي :
CODE
look/ckeditor/plugins/file_upload

بداخل مجلد file_upload تنشأ ملف جافا سكربت جديد باسم plugin.js

وسيكون مسارة كالتالي :
CODE
look/ckeditor/plugins/file_upload/plugin.js

وتضع به الكود التالي :

CODE
( function() {
	
	    CKEDITOR.plugins.add( 'file_upload',
	    {
	        init: function( editor )
	        {
	                    var pluginName = 'file_upload',
	                lang = editor.lang.iframe;
	
	
	
	
	
	
	
	
	
	           CKEDITOR.dialog.add( 'FilEUploaD', function ()
	           {
	              return {
	                 title : 'مركز التحميل',
	                 minWidth : 550,
	                 minHeight : 200,
	                 contents :
	                       [
	                          {
	                             id : 'iframe',
	                             label : 'Insert file upload...',
	                             expand : true,
	                             elements :
	                                   [
	                                      {
	                                         type:"html",
	                                         html:' <iframe src="look/ckeditor/plugins/file_upload/dialogs/file_upload.html" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:550;width:100%" height="100%" width="100%"></iframe> '
	                                      }
	                                   ]
	                          }
	                       ],
	                 onOk : function()
	                 {
	                    // Notify your iframe scripts here...
	                 }
	              };
	           } );
	
	            editor.addCommand( 'file_uploaD', new CKEDITOR.dialogCommand( 'FilEUploaD' ) );
	
	            editor.ui.addButton( 'file_upload',
	            {
	                label: 'Insert file upload...',
	                command: 'file_uploaD',
	                icon: this.path + 'images/file_upload.gif'
	            } );
	        }
	    } );
	} )();


واحفظ الملف بترميز utf-8

ثم تنشأ مجلد جديد باسم dialogs بداخل مجلد file_upload
CODE
look/ckeditor/plugins/file_upload/dialogs

بداخل مجلد dialogs تنشأ ملف HTML جديد باسم file_upload.html

وسيكون مسارة كالتالي :
CODE
look/ckeditor/plugins/file_upload/dialogs/file_upload.html

وتضع به الكود التالي :

CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" dir="rtl" xml:lang="ar" lang="ar">
	<head>
	    <title>مركز التحميل</title>
	    <meta http-**="Content-Type" content="text/html; charset=utf-8" />
	    <meta name="robots" content="noindex, nofollow" />
	 <style type="text/css">
	        body, html, iframe {
	            margin: 0;
	            padding: 0;
	            border: 0;
	            width: 100%;
	            height: 100%;
	            overflow: hidden;
	        }
	    </style>
	</head>
	<body>
	<!-- start gulfup.com -->
	<div style="width:500px; font: normal 11px Tahoma; margin: 0 auto; text-align:center; background:#fff; border: 2px #000 solid; padding: 10px;">
	<form id="uploader_file" action="http://www.gulfup.com/goo.php" method="post" enctype="multipart/form-data">
	<input type="file" name="file_1_" id="file_1_" size="60" />
	<input type="submit" id="submitr_files" style="font: normal 11px tahoma;" name="submitr" value="[ رفع ]"  />
	</form>
	<br /
	</div>
	<p dir="rtl"> دعم بواسطة : <a href="http://www.gulfup.com/" target="_blank" title="مركز تحميل">مركز الخليج</a></p>
	<!-- end gulfup.com -->
	</body>
	</html>
	
	

واحفظ الملف بترميز utf-8


ثم تنشأ مجلد جديد باسم images لنضع به ايقونة مركز التحميل التي ستظهر في تولبار المحرر
CODE
look/ckeditor/plugins/file_upload/images

بداخل مجلد images ترفع ايقونة باسم file_upload.gif ويفضل ان تكون ابعاد الأيقونة 16*16 بكسل (الارتفاع*العرض)
CODE
look/ckeditor/plugins/file_upload/images/file_upload.gif


ثم تتجه للوحة الإدارة وتحرر قالب : editor_js
وتبحث عن :

CODE
config.extraPlugins = 'code,quote,youtube';


وتستبدله بـ :

CODE
config.extraPlugins = 'code,quote,youtube,file_upload';




ثم تبحث عن :

CODE
['Flash','-','Image','-', 'Smiley','-','rplayer','youtube'],


وتستبدله بـ :

CODE
['Flash','-','Image','-', 'Smiley','-','rplayer','youtube','file_upload'],




انتهى ..



لتعديل او إستبدال او اضافة كود لمركز تحميل آخر افتح ملف الـ HTML
CODE
look/ckeditor/plugins/file_upload/dialogs/file_upload.html

واستبدل الكود والذي يبدأ من

CODE
<!-- start gulfup.com -->


وينتهي بـ

CODE
<!-- end gulfup.com -->




تمت اضافة ملفات تطبيق الشرح بالمرفقات
 
 
  file_upload.zip   تحميل zip مرات التحميل :(21)
الحجم :(2.527) KB



تم تحرير المشاركة بواسطة :Soliman بتاريخ:01-04-2015 06:36 مساءً




الساعة الآن 10:02 PM