لإضافة ايقونة لمحرر 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"> دعم بواسطة : <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 -->
تمت اضافة ملفات تطبيق الشرح بالمرفقات
كيف اضيف زر مركز تحميل خارجي لمحرر المنتدى ckeditor
