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

كيف اضيف زر لمحرر المنتدى ckeditor

مشاهدة المشاركة في الموضوع بالعرض العادي

: كيف اضيف زر مركز تحميل خارجي لمحرر المنتدى ckeditor

04-09-2014 03:32 مساءً

Soliman

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

تكون الطريقة كالتالي :

تضيف plugin جديد بداخل مجلد plugins الموجود على المسار التالي

CODE

look/ckeditor/plugins/<br />

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

وسيكون مسارة كالتالي :

CODE

look/ckeditor/plugins/file_upload<br />

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

وسيكون مسارة كالتالي :

CODE

look/ckeditor/plugins/file_upload/plugin.js<br />

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

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<br />

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

وسيكون مسارة كالتالي :

CODE

look/ckeditor/plugins/file_upload/dialogs/file_upload.html<br />

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

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">&nbsp;دعم بواسطة : <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<br />

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

CODE

look/ckeditor/plugins/file_upload/images/file_upload.gif<br />

ثم تتجه للوحة الإدارة وتحرر قالب : 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<br />

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

CODE

<!-- start gulfup.com -->

وينتهي بـ

CODE

<!-- end gulfup.com -->

تمت اضافة ملفات تطبيق الشرح بالمرفقات

file_upload.zip تحميل zip مرات التحميل :(21)
الحجم :(2.527) KB

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

الساعة الآن 01:55 AM