PDA

View Full Version : تداخل ادیتور TINYMCE با textarea در صفحه



zibaaa
سه شنبه 27 دی 1390, 10:15 صبح
سلام و خسته نباشید.
من توی صفحه ام از ادیتور tinymce استفاده کردم. می خوام که از یک textarea هم استفاده کنم. ولی تگ textarea تبدیل به ادیتور میشه دوباره. یعنی نمیشه یه تکست باکس چند سطر و ستونه در صفحه گذاشت. راه حلی برای این مشکل هست؟

alonemm
سه شنبه 27 دی 1390, 12:27 عصر
باسلام:
1- کدهاتون رو بزارید تا کامل از جریال کار آگاه بشیم.
2- ببینید که کنترل مورد نظرتون Class یا ID خاصی نداشته باشه.

شادباشید.

zibaaa
سه شنبه 27 دی 1390, 12:42 عصر
کد اچ تی ام ال ادیتور :

<textarea name="elm1" cols="95" rows="15" dir="rtl" id="elm1" style="width: 85%;" runat="server"> </textarea>

کد جاوا اسکریپت ادیتور :
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
theme : "advanced",
plugins : "Jsvk",

// Theme options
theme_advanced_buttons1 : "fontselect,fontsizeselect,|,bold,italic,underline, |,justifyleft,justifycenter,justifyright,justifyfu ll,|,forecolor,Jsvk",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
theme_advanced_buttons4 : "",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "right",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/example.css",

// Drop lists for link/image/media/template dialogs
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",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>

حالا اگه یه تگ textarea دیگه توی صفحه بذارم ، اونهم تبدیل به ادیتور میشه.

alonemm
سه شنبه 27 دی 1390, 13:03 عصر
مقدار ID و Name رو تغییر بدید.

zibaaa
سه شنبه 27 دی 1390, 13:20 عصر
تگ textarea ادیتور رو به صورت زیر تغییر دادم:

<textarea cols="95" rows="15" dir="rtl" id="txtmatn" style="width: 85%;" runat="server"> </textarea>

ولی باز هم درست نشد

alonemm
سه شنبه 27 دی 1390, 14:36 عصر
پروژه تون رو بزارید برای دانلود تا باز کنم و مشکل رو برسی کنم.

zibaaa
سه شنبه 27 دی 1390, 15:26 عصر
پروژه تون رو بزارید برای دانلود تا باز کنم و مشکل رو برسی کنم.

حجم زیپ شده اش 2 مگابایته. آپلودر سایت قبول نمیکنه!! چطوری براتون بفرستم؟
البته پروژه ای که واستون میفرستم یک صفحه بیشتر نیست ولی چون فایلهای ادیتور هم توشه اون سنگینش کرده.

alonemm
سه شنبه 27 دی 1390, 15:50 عصر
حجم زیپ شده اش 2 مگابایته. آپلودر سایت قبول نمیکنه!! چطوری براتون بفرستم؟
البته پروژه ای که واستون میفرستم یک صفحه بیشتر نیست ولی چون فایلهای ادیتور هم توشه اون سنگینش کرده.

به آدرس Email من بفرستید.

اگر بتونم مشکلو حل کنم در همین جا پاسخ میدم.


موفق باشید.

alonemm
سه شنبه 27 دی 1390, 17:14 عصر
باسلام:
میل رو دریافت کردم.

راه حل:
در بالای صفحه و در قسمت کدهای مربوط به ادیتور کد زیر رو ویرایش کنید:

<script type="text/javascript">
tinyMCE.init({
// General options
//mode : "textareas",
mode : "exact",
elements : "elm1,elm2" ,
theme : "advanced",
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",

// Theme options
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_toolbar_location : "top",
theme_advanced_toolbar_align : "right",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true,

// Example content CSS (should be your site CSS)
content_css : "css/example.css",

// Drop lists for link/image/media/template dialogs
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",

// Replace values for the template plugin
template_replace_values : {
username : "Some User",
staffid : "991234"
}
});
</script>


در قسمت Mode رو به exact تغییر دادم و در قسمت Elements میتونید لیستی از نام کنترل هایی که میخواید به شکل ادیتور نمایش پیدا کنه رو مشخص کنید.


mode : "exact"
elements : "elm1,elm2"


حالا به کدهای HTML نگاه کنید:

<table class="style1">
<tr>
<td>
<div align="right" dir="rtl">
<textarea cols="35" rows="3" dir="rtl" id="elm1" style="width: 40%;" runat="server"> </textarea>
</div>
</td>

<td>
<div align="right" dir="rtl">ادیتور:</div></td>
</tr>
<tr>
<td><div align="right" dir="rtl">
<textarea cols="50" rows="3" dir="rtl" > </textarea></div></td>

<td>
<div align="right" dir="rtl">اگه بخوام یک textarea ساده توی صفحه داشته باشم :</div></td>
</tr>
</table>


حالا فقط کنترل هایی که ID اون ها در قسمت elements تعریف شده به شکل ادیتور نمایش پیدا میکنه و بقیه حالت عادی خودشونو حفظ میکنند.
از کدنویسی لذت ببرید.