PDA

View Full Version : سوال: درج فايل و فلش در اديتور با استفاده از url



bftarane
پنج شنبه 14 دی 1391, 10:55 صبح
سلام لطفاً اين عکس رو ببينيد.
97779
با وارد کردن آدرس عکس که در هاست هست عکس در اديتور درج ميشه مثلاً http://abc.com/Images/a.gif
و اون پنجره با کليک روي آيکني که با رنگ قرمز مشخص کردم باز ميشه
مي خواستم بدونم آيا اديتور رايگاني مي شناسيد که همچين قابليتي براي درج فايل و فلش داشته باشه؟
يعني ما فايلهامون (مثلاً فايلهاي Pdf) و فايلهاي فلش (swf) رو در يه پوشه در هاست آپلود کنيم بعد آدرسشون رو در پنجره اي مشابه پنجره بالا بتونيم وارد کنيم و اونا در اديتور درج بشن؟
ممنون مي شم پاسخ بديد خيلي ضروريه.

bftarane
پنج شنبه 14 دی 1391, 19:57 عصر
سلام مجدد.
خوب من تصميم گرفتم خودم يه همچين امکاني براي اديتور ايجاد کنم.
عکس و فايل مشکلي نداره درج ميشه.
ولي در مورد swf
ازتون راهنمايي مي خوام ببينيد الآن من يه تکست باکس گذاشتم که يه همچين آدرسي توش وارد مي کنم
http://localhost:8659/Tiny_Uploadify/4663750304151.swf
و يه دکمه که توش اين کد رو نوشتم که اين کد رو هم از لينک زير استفاده کردم

string url = txtswf.Text;
string[] Arry = url.Split('/');
string filename = Arry[Arry.Length - 1];
TextBox1.Text += string.Format("<img height=" + "100" + " width=" + "100" + " title=" + "sound:true,progress:true,autostart:true,swliveconn ect:'false',swstretchstyle:'none',swstretchhalign: 'none',swstretchvalign:'none',src:'{0}',width:'100 ',height:'100'" + " " + "class=" + "mceItemShockWave" + " " + "mce_src='{0}' src='{1}' _moz_resizing=" + "true" + ">", txtswf.Text, txtswf.Text, txtswf.Text);
Label1.Text = TextBox1.Text;
http://barnamenevis.org/showthread.php?279422
حالا وقتي به قسمت html اديتور نگاه مي کنم اين کدها رو مي بينم

<p><img title="sound:true,progress:true,autostart:true,swliveconn ect:'false',swstretchstyle:'none',swstretchhalign: 'none',swstretchvalign:'none',src:'http://localhost:8659/Tiny_Uploadify/4663750304151.swf',width:'100',height:'100'" src="4663750304151.swf" alt="" width="100" height="100" /></p>در صورتي که وقتي از نمونه دانلود شده از لينک بالا رو امتحان مي کنم اين کدها در قسمت html اديتور ديده ميشه پس از درج فلش

<p>
<object classid="clsid:166b1bca-3f9c-11cf-8075-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0">
<param name="sound" value="true" />
<param name="progress" value="true" />
<param name="autostart" value="true" />
<param name="swliveconnect" value="false" />
<param name="swstretchstyle" value="none" />
<param name="swstretchhalign" value="none" />
<param name="swstretchvalign" value="none" />
<param name="src" value="upload/4663750304151.swf" /><embed type="application/x-director" width="100" height="100" src="upload/4663750304151.swf" swstretchvalign="none" swstretchhalign="none" swstretchstyle="none" swliveconnect="false" autostart="true" progress="true" sound="true"></embed>
</object>
</p>لطفاً بگيد با استفاده از چه کدي در اون نمونه که لينکش رو گذاشتم قسمتهاي اضافي که در html source editor پاييني وجود داره و در html من وجود نداره ايجاد ميشن؟
اين نکته رو هم بگم که من از jquery.tinymce.js استفاده مي کنم
اين کدها مربوط به لينکي هست که گفتم
<script language="javascript" type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">

tinyMCE.init({

mode: "textareas",

theme: "advanced",

extended_valid_elements: "textarea[name|class|cols|rows]",

skin: "o2k7",

skin_variant: "silver",

plugins: "safari,spellchecker,pagebreak,style,layer,table,sa ve,advhr,advimage,advlink,emotions,iespell,inlinep opups,insertdatetime,preview,media,searchreplace,p rint,contextmenu,paste,directionality,fullscreen,n oneditable,visualchars,nonbreaking,xhtmlxtras,temp late,imagemanager,filemanager,codehighlighting",

theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethr ough,|,justifyleft,justifycenter,justifyright,just ifyfull,|,styleselect,formatselect,fontselect,font sizeselect",

theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replac e,|,bullist,numlist,|,outdent,indent,blockquote,|, undo,redo,|,link,unlink,anchor,image,cleanup,help, code,|,insertdate,inserttime,preview,|,forecolor,b ackcolor",

theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,su p,|,charmap,emotions,iespell,media,advhr,|,print,| ,ltr,rtl,|,fullscreen",

theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,st yleprops,spellchecker,|,cite,abbr,acronym,del,ins, attribs,|,visualchars,nonbreaking,template,blockqu ote,pagebreak,|,insertfile,insertimage",

theme_advanced_buttons3_add_before: "codehighlighting",

theme_advanced_toolbar_location: "top",

theme_advanced_toolbar_align: "left",

theme_advanced_statusbar_location: "bottom",

theme_advanced_resizing: true,

remove_linebreaks: false,

template_external_list_url: "js/template_list.js",

external_link_list_url: "js/link_list.js",

external_image_list_url: "js/image_list.js",

media_external_list_url: "js/media_list.js"

});

</script>
و اين هم کدهايي که من دارم
<script type="text/javascript" src="jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
$(function () {
$('textarea').tinymce({
script_url: 'jscripts/tiny_mce/tiny_mce.js',
theme: "advanced",
plugins: "spellchecker,pagebreak,style,layer,table,save,advh r,advimage,advlink,emotions,iespell,inlinepopups,i nsertdatetime,preview,media,searchreplace,print,co ntextmenu,paste,directionality,fullscreen,nonedita ble,visualchars,nonbreaking,xhtmlxtras,template",
theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethr ough,|,justifyleft,justifycenter,justifyright,just ifyfull,styleselect,formatselect,fontselect,fontsi zeselect,spellchecker",
theme_advanced_buttons2: "code",
theme_advanced_buttons3: "",
theme_advanced_buttons4: "",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
theme_advanced_resizing: true,
height: 200,
skin: "o2k7",
skin_variant: "silver"
});

bftarane
پنج شنبه 14 دی 1391, 23:45 عصر
خوب اين طور که متوجه شدم به خاطر تفاوتي هست که در بعضي فايلها وجود داره مثلاً media.js. البته من اين سري اومدم tinymce معمولي رو از سايتش دانلود کردم و باهاش امتحان کردم. يعني ربطي به jquery بودن يا نبودن نداشت در اين مورد هم عمل نمي کرد. مثلاً من mceItemShockWave رو در media.js خودم پيدا نکردم.
نمي دونم سوالم رو چه جوري بپرسم. اگه کسي بتونه بگه اين کد چه جوري به دست اومده شايد بشه کاري کرد.
يعني من مي خوام ياد بگيرم فارغ از اين که ورژن چيه بتونم اين کار رو انجام بدم.


string.Format("<img height=" + "100" + " width=" + "100" + " title=" + "sound:true,progress:true,autostart:true,swlivecon nect:'false',swstretchstyle:'none',swstretchhalign :'none',swstretchvalign:'none',src:'{0}',width:'10 0',height:'100'" + " " + "class=" + "mceItemShockWave" + " " + "mce_src='{0}' src='{1}' _moz_resizing=" + "true" + ">", txtswf.Text, txtswf.Text, txtswf.Text);
هر اتفاقي داره اينجا مي افته اينه که مياد خودش
يه جوري همچين کدايي رو به قسمت html اضافه مي کنه.

<object classid="clsid:166b1bca-3f9c-11cf-8075-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/director/sw.cab#version=8,5,1,0"> <param name="sound" value="true" /> <param name="progress" value="true" />ولي چه جوري اين کار رو مي کنه متوجه نمي شم.
بچه ها اين قضيه خيلي برام مهمه لطفاً هر کس بلده راحت از اين سوال نگذره.

bftarane
جمعه 15 دی 1391, 10:36 صبح
سلام.
بچه ها يه جوابي از يه جا گرفتم
to support flash you need to include tinymce's media plugin scripts. look in embed.js source to determine how to embed a swf. hint: use the javascript debugger to play with the editor commands.
خوب الآن اين قسمت در فايل embed.js وجود داره
function writeEmbed(cls, cb, mt, p) {
var h = '', n;

h += '<object classid="clsid:' + cls + '" codebase="' + cb + '"';
h += typeof(p.id) != "undefined" ? 'id="' + p.id + '"' : '';
h += typeof(p.name) != "undefined" ? 'name="' + p.name + '"' : '';
h += typeof(p.width) != "undefined" ? 'width="' + p.width + '"' : '';
h += typeof(p.height) != "undefined" ? 'height="' + p.height + '"' : '';
h += typeof(p.align) != "undefined" ? 'align="' + p.align + '"' : '';
h += '>';

for (n in p)
h += '<param name="' + n + '" value="' + p[n] + '">';

h += '<embed type="' + mt + '"';

for (n in p)
h += n + '="' + p[n] + '" ';

h += '></embed></object>';

document.write(h);
}
حالا من از اين چطور مي تونم استفاده کنم تا فلش رو Embed کنم؟
please help me!

Himalaya
جمعه 15 دی 1391, 12:37 عصر
سلام
اگه با TinyMce کار میکنی، واسه نمایش فایل swf میتونی از دکمه Insert/Edit embedded media استفاده کنی. زمان معرفی TinyMce بخش زیر


media_external_list_url: "js/media_list.js"
مسیر فایلی رو که داره فایلهای swf , mov, avi , ... لیست میکنه نمایش میده. شما موقع آپلود فایل swf باید این فایل رو ویرایش کنید تا فایلتون به لیست فایلهای موجود اضافه بشه و
تو پنجره انتخاب فایل swf نمایش داده بشه. مثلا من تو فایل media_list.js دوتا فایل معرفی کردم. به صورت زیر


var tinyMCEMediaList = [
// Name, URL
["Some Flash 1", "TinyMce/tinyFiles/media/sample1.swf"],
["Some Flash 2", "TinyMce/tinyFiles/media/sample2.swf"],
];
حالا این 2 تا فایل رو میتونم تو پنجره زیر ببینم و انتخاب کنم

97828
---------------------------------------------------------------------------------
اما اگه میخوای دستی این کار رو بکنی (طبق تصویر پست 1)
یه دکمه اختصاصی تو تولبار تعریف کن و کارایی رو که میخوای از طریق اون انجام بده. میتونی با کلیک این دکمه اول فایل swf رو اول اپلود کنی و بعد مسیر اون رو بعد از پایان آپلود استفاده کنی
واسه این کار هم میتونی از پلاگین jquery.uploadify استفاده کنی

97829


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Skin support example</title>
<link href="TinyMce/tinyFiles/css/myCss.css" rel="stylesheet" />
<!-- TinyMCE -->
<script type="text/javascript" src="TinyMce/jscripts/tiny_mce/tiny_mce.js"></script>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
var customButtonEvent = null;
tinyMCE.init({
mode: "exact",
elements: "elm2",
theme: "advanced",
skin: "o2k7",
plugins: "lists,pagebreak,style,layer,table,save,advhr,advim age,advlink,emotions,iespell,insertdatetime,previe w,media,searchreplace,print,contextmenu,paste,dire ctionality,fullscreen,noneditable,visualchars,nonb reaking,xhtmlxtras,template,inlinepopups,autosave",

theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethr ough,|,justifyleft,justifycenter,justifyright,just ifyfull,styleselect,formatselect,fontselect,fontsi zeselect",
theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replac e,|,bullist,numlist,|,outdent,indent,blockquote,|, undo,redo,|,link,unlink,anchor,image,cleanup,help, code,|,insertdate,inserttime,preview,|,forecolor,b ackcolor",
theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,su p,|,charmap,emotions,iespell,media,advhr,|,print,| ,ltr,rtl,|,fullscreen",
theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,st yleprops,|,cite,abbr,acronym,del,ins,attribs,|,vis ualchars,nonbreaking,template,pagebreak,restoredra ft,mybutton",
theme_advanced_toolbar_location: "top",
theme_advanced_toolbar_align: "left",
theme_advanced_statusbar_location: "bottom",
//theme_advanced_resizing: true,

content_css: "TinyMce/tinyFiles/css/content.css",

template_external_list_url: "TinyMce/tinyFiles/lists/template_list.js",
external_link_list_url: "TinyMce/tinyFiles/lists/link_list.js",
external_image_list_url: "TinyMce/tinyFiles/lists/image_list.js",
media_external_list_url: "TinyMce/tinyFiles/lists/media_list.js",
setup: function (ed) {
ed.addButton('mybutton', {
title: 'Custom button',
image: 'TinyMce/tinyFiles/buttonImages/myButton1.png',
onclick: function () {
customButtonEvent = ed;
$('#swfObject').val('');
$('#inputArea').fadeIn('slow');
}
});
}
});

function addSwf() {
customButtonEvent.focus();
customButtonEvent.selection.setContent('<object>' +
'<embed type="application/x-director" width="150" height="60" src="'+ $('#swfObject').val() +'" swstretchvalign="none" swstretchhalign="none" swstretchstyle="none" swliveconnect="false" autostart="true" progress="true" sound="true"></embed>' +
'</object>');
$('#inputArea').fadeOut('slow');
}
</script>
</head>
<body>
<textarea id="elm2" name="elm2" rows="15" cols="80" style="width: 100%">
This is a sample for add custom button and fire event click.
</textarea>
<div id="inputArea">
Enter swf url:
<input id="swfObject" type="text" value="" style="width:250px;" />
<a href="#" onclick="addSwf();">Add</a>
</div>
</body>
</html>

bftarane
جمعه 15 دی 1391, 13:09 عصر
ممنون ميرم امتحان مي کنم تا نيم ساعت ديگه اگه سوالي داشتم ميام ميپرسم.
راستي

تو پنجره انتخاب فایل swf نمایش داده بشه. مثلا من تو فایل media_list.js دوتا فایل معرفی کردم. به صورت زیر
کد HTML:
var tinyMCEMediaList = [ // Name, URL ["Some Flash 1", "TinyMce/tinyFiles/media/sample1.swf"], ["Some Flash 2", "TinyMce/tinyFiles/media/sample2.swf"], ];
حالا این 2 تا فایل رو میتونم تو پنجره زیر ببینم و انتخاب کنماين جا رو متوجه نشدم آخه ممکنه ادمين هر تعداد دلش خواست فايل swf آپلود کنه يعني کدها بايد يه حالت دايناميک داشته باشن پس فکر مي کنم من مجبورم از روش 2 استفاده کنم درسته؟


من اصلاً دوست ندارم دستي اين کار رو بکنم ولي اون لينکي که در پست 2 گذاشته شده با فايل آپلود ياد داده که صفحه رفرش مي شه و من تمام هدفم اينه که بتونم در اديتور فايل و فلش و عکس درج کنم بدون اينکه صفحه رفرش بشه.
و چون کنترل فايل آپلود با آپديت پنل ناسازگاره گفتم بيام يه تکست باکس و باتن بزارم که حداقل بتونم از آپديت پنل استفاده کنم.

Himalaya
جمعه 15 دی 1391, 13:20 عصر
اين جا رو متوجه نشدم آخه ممکنه ادمين هر تعداد دلش خواست فايل swf آپلود کنه يعني کدها بايد يه حالت دايناميک داشته باشن پس فکر مي کنم من مجبورم از روش 2 استفاده کنم درسته؟
خوب هرچند تا که دوست داشت آپلود کنه. بعد از هر آپلود اون فایل رو آپدیت کنی فایل جدید به لیست اضافه میشه و میتونی اون رو هم انتخاب کنی


عکسها رو هم من نتونستم ببينم.
اگه باز نشد عکسها رو تو یه صفحه جدید باز کن

bftarane
جمعه 15 دی 1391, 13:54 عصر
يه سوال دارم
template_external_list_url: "tinyFiles/lists/template_list.js",
external_link_list_url: "tinyFiles/lists/link_list.js",
external_image_list_url: "tinyFiles/lists/image_list.js",
media_external_list_url: "tinyFiles/lists/media_list.js",
با توجه به اين قسمت من بايد مثلاً فايلي به اسم media_list.js داشته باشم درسته؟ ولي من در پوشه lists فقط دو تا فايل دارم
اينم عکسش
97832
يعني الآن فايلهاي من ناقصن درسته؟ من آخرين نسخه tinymce يعني 3.5.8 رو دانلود کردم.

Himalaya
جمعه 15 دی 1391, 14:19 عصر
من اصلاً دوست ندارم دستي اين کار رو بکنم ولي اون لينکي که در پست 2 گذاشته شده با فايل آپلود ياد داده که صفحه رفرش مي شه و من تمام هدفم اينه که بتونم در اديتور فايل و فلش و عکس درج کنم بدون اينکه صفحه رفرش بشه.
و چون کنترل فايل آپلود با آپديت پنل ناسازگاره گفتم بيام يه تکست باکس و باتن بزارم که حداقل بتونم از آپديت پنل استفاده کنم.

اون پست رو بیخیال شو. اولا که اون دکمه ها اصلا ظاهر خوبی به برنامه ندادن دوما همونطور که گفتی باید post back انجام بشه تا فایل آپ بشه.
من گفتم

یه دکمه اختصاصی تو تولبار تعریف کن
و

واسه آپلود هم میتونی از پلاگین jquery.uploadify استفاده کنی
قسمت 1 مشکل ظاهر رو حل میکنه و پلاگین jquery.uploadify بدون postback فایل رو آپلود میکنه. آدرس سایتشم http://valums.com/ajax-upload بود. توسط یه هندلر فایلت رو آپ میکنی


با توجه به اين قسمت من بايد مثلاً فايلي به اسم media_list.js داشته باشم درسته؟ ولي من در پوشه lists فقط دو تا فايل دارم
دو تا پوشه lists وجود داره. اونی که شما رفتی سراغش تو مسیر tinymce\jscripts\tiny_mce\plugins\lists قرار داره و اونی که من گفتم تو مسیر tinymce\examples\lists قرار داره

bftarane
جمعه 15 دی 1391, 14:56 عصر
ممنونم از راهنمايي تون. اومدم تشکر کنم و نتيجه رو بگم که پستتون رو ديدم.
کاري که فعلاً کردم اومدم media رو با باتن ها اضافه کردم اين طوري theme_advanced_buttons1: "media,save و آيکنش افتاد در تولبار
ديگه اينکه media هم که در پلاگين ها وجود داشت
حالا رو آيکن که کليک کردم چيزي مثل اولين شکلي که شما گذاشتيد اومد و آدرس فايلم رو دادم و preview که گرفتم نشون داده شد فلش حالا در همين حد برام فعلاً کافيه چون خيلي وقت ندارم احتمالاً بعداً سراغ بهتر کردن قضيه ميرم.

هزار تا تشکر

راستي من با آپلوديفاي هم آشنا هستم و در اين پست هم در مورد درج فايل با uploadify در tiny سوال کرده بودم که کسي جواب نداد اما ديگه مهم نيست خودم سر فرصت مي رم سراغش.
http://barnamenevis.org/showthread.php?377005