لنبدأ :
مشكلة لون الخط مع متصفح انترنت اكسبلور IE :
غالباً المصممين والمطورين يقفون عاجزين امام تطوير برمجياتهم وتصاميمهم على متصفح انترنت اكسبلور IE , لكنهم لا يواجهون مشاكل مع المتصفحات الأخرى لو هم قامو بالمضيء قدما مع المعايير القياسيه , وسوف نقوم بإصلاح المشكلة الخاصه باللون مع هذا المتصفح :
من حظنا الجيد أن انترنت اكسبلور IE لديه "شرط" لمعرفه هل انت تتصفح منه او لا وهو مفيد للمطورين , والكود كالتالي :
كود: تحديد الكل
<!--[if IE]>
<img src="images/color.gif" onClick="Colour(clr.value)" title="add colour" />
<![endif]--> الآن قمنا بإضافه زر , المتصفح من انترنت اكسبلور سيحتاج الآن لإختيار اللون أولا ثم الظغط على الزر الجديد هذا لتطبيق اللون على النص المحدد في المحرر .
إضافة زر "ازالة رابط" unlink للمحرر :
لم نقم بذكر اننا سوف نضيف هذا الزر, لكنه مفيد لإزالة رابط من على نص محدد ..
وببساطه يمكننا اضافته كالتالي :
كود: تحديد الكل
<img src="images/unlink.gif" onClick="dowithtext('Unlink')" title="unlink" />
ولاتنسى أن تستطيع اضافة اكثر من زر واكثر من عمليه كما ذكرنا في الأجزاء السابقه ..
ويظهر كالتالي :
إرسال المحتوى :
يجب أن نقوم بنهاية تطبيقنا لمحرر لمعرفة كيفية إرسال المحتوى من االمحرر لأي جهه تستبقله كملف php . وبالتالي نحتاج لأن ننشأل داله تقوم بإستيراد المحتوى من المحرر iframe ووضعه داخل صندوق نصي input كالتالي :
كود: تحديد الكل
function Gettext() {
var text = document.getElementById('text');
text.value = Editor.body.innerHTML;
} و صندوق نص مخفي لاستقبال المحتوى من المحرر iframe.
كود: تحديد الكل
<input type="hidden" id="text" name="text" />
<input type="submit" id="submit" onClick="Gettext()" />وتستقبله عن طريق ملف php بشكل طبيعي من أي form , لو لم تكن تعرف الكثير عن php يجب أن تبحث عن كيفية إستقبال نماذج forms لملف php , وعموماً سوف يكون استقبال المحتوى كالتالي :
كود: تحديد الكل
<?=$_POST['text']?>الكود الناتج من الشرح هو :
كود: تحديد الكل
<html>
<head>
<script language="JavaScript">
window.onload = function() {
Editor = document.getElementById('box').contentWindow.document;
Editor.designMode = "on";
}
function dowithtext(text)
{
Editor.execCommand(text, false, null);
}
function createURL() {
var szURL = prompt("Enter a URL:", "http://");
if ((szURL != null) && (szURL != "")) {
Editor.execCommand("CreateLink",false,szURL);
}
}
function insertimage() {
imagePath = prompt('Enter Image URL:', 'http://');
if ((imagePath != null) && (imagePath != "")) {
Editor.execCommand('InsertImage', false, imagePath);
}
}
function Colour(colour) { Editor.execCommand("forecolor",false, colour); }
function Gettext() {
var text = document.getElementById('text');
text.value = Editor.body.innerHTML;
}
</script>
</head>
<body>
<img src="images/undo.gif" onClick="dowithtext('Undo')" title="underline" />
<img src="images/redo.gif" onClick="dowithtext('Redo')" title="underline" />
<img src="images/bold.gif" onClick="dowithtext('bold')" title="Bold" />
<img src="images/italic.gif" onClick="dowithtext('italic')" title="italic" />
<img src="images/underline.gif" onClick="dowithtext('underline')" title="underline" />
<img src="images/link.gif" onClick="createURL()" title="URL" />
<img src="images/unlink.gif" onClick="dowithtext('Unlink')" title="unlink" />
<img src="images/insertimage.gif" onClick="insertimage()" title="insert image" />
<script language="JavaScript" src="images/jscolor.js"></script>
<input id="clr" class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />
<!--[if IE]>
<img src="images/hv120x69.png" width="20" height="20" onClick="Colour(clr.value)" title="add colour" />
<![endif]-->
<img src="images/justifyleft.gif" onClick="dowithtext('justifyleft')" title="justify left" />
<img src="images/justifycenter.gif" onClick="dowithtext('justifycenter')" title="justify center" />
<img src="images/justifyright.gif" onClick="dowithtext('justifyright')" title="justify right" />
<br/>
<iframe id="box" width="500" scrolling="auto" height="120" style="border-style:1px solid;"></iframe>
<br />
<form action="php.php" method="post">
<input type="hidden" id="text" name="text" />
<input type="submit" id="submit" onClick="Gettext()" />
</form>
</body>
</html> ويمكنك تحميل الصور والملف الجافاسكربت من هنا :
ملف الصور والجافاسكربت
______________
المصادر:
Almsamim group - Home