لنبدأ
- إضافة عمليات أكثر على النص :
بالجزء الأول أضفنا "نص عريض" وتعتبر احد عمليات التعديل على النص التي سوف نقوم باضافة بعضها الآن . وكان الكود لجعل النص عريض كما ذكرنا سابقا :
كود: تحديد الكل
function bold()
{
Editor.execCommand('bold', false, null);
}
و سوف نستخدم execCommand مع داله خاصه بنا , و نزيل الكود الذي يجعل النص عريض سابقا وننشأ داله موحده لبعض العمليات السريعه كالتاالي :
كود: تحديد الكل
function dowithtext(text) {
Editor.execCommand(text,false,null);
}كود: تحديد الكل
<a href="#" onClick="dowithtext('bold')">Add Bold</a>في مثالنا سوف نستخدم هذا الكود الذي يحوي ازاراً للمحرر ..
كود: تحديد الكل
<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" />
تستطيع استخدام ايقونات اخرى تفضلها ..
- اضافة رابط
سوف نجعل المحرر الآن يستقبل الروابط , وسوف نستخدم داله جديده مبنيه على الداله المهمه لنا execCommand وسوف نقوم بطلب الرابط من المستخدم ووضعه داخل المحرر ..
كود: تحديد الكل
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);
}
}سوف نستخدم في مثالنا الأزرار للرابط والصوره كالتالي :
كود: تحديد الكل
<img src="images/link.gif" onClick="createURL()" title="URL" />
<img src="images/insertimage.gif" onClick="insertimage()" title="insert image" />سوف نقوم بوضع داله تقوم بتغيير لون النص داخل المحرر , رجاءاً قم بتحميل الملف التالي الذي يحول ملف جافاسكربت للالوان والصور ..
تحميل ملف الجافاسكربت والصور
وقم بتصمين ملف الجافاسكربت الذي قمت بتحميله داخل مستندك كالتالي :
كود: تحديد الكل
<script language="JavaScript" src="jscolor.js"></script>كود: تحديد الكل
<input class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />
الجزء الثاني من الشرح إنتهى , الكود التالي يعتبر الكود الذي وصلنا اليه بالشرح من الجزء الأول للثاني ..
كود: تحديد الكل
<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); }
</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/insertimage.gif" onClick="insertimage()" title="insert image" />
<script language="JavaScript" src="jscolor.js"></script>
<input class="color" onChange="Colour(this.value)" style="width:60px;height:18px" />
<br/>
<iframe id="box" width="500" scrolling="auto" height="120" style="border-style: solid;border-right-color: #ff0000;"></iframe>
</body>
</html>__________
المصادر :
Almsamim group - Home