אנחנו צריכים ליצור שתי פונקציות (הסבר אחרי הקוד) :
<![CDATA[<script language=JavaScript>
function code()
{
var code=document.1.code.value
document.write("<!--from lior73-->
<p align=right>" + code + "</p>")
}
function text(eCommandname)
{
document.getElementById(editor).focus()
document.execCommand(eCommandname)
document.getElementById(editor).focus()
}
</script>]]>
הסבר :
הפונקציה הראשונה יוצרת את האפשרות של צפיה בתוצאה של הקוד
והשניה בשביל לערוך <div> מיוחד.
עכשיו צריך ליצור <div> עם אפשרות עריכה.
עושים זאת כך : <![CDATA[<div contenteditable=true style="border:1px solid black" id="editor" hieght=150% width=100%></div>]]>
עכשיו יוצרים אפשרות לערוך את התוכן, אני עשיתי זאת כך :
<![CDATA[|
<span onclick="text(bold)">מודגש</span>
|
<span onclick="text(createlink)">קישור</span>
|
<span onclick="text(underline)">קו תחתון</span>
|
<select onchange="document.getElementById(editor).focus();
document.execCommand(forecolor,false,this[this.selectedIndex].value);
document.getElementById(editor).focus()">
<option value="black">שחור</option>
<option value="red">אדום</option>
<option value="green" >ירוק</option>
<option value="blue">כחול</option>
</select>
|
<span onclick="text(InsertHorizontalRule)">קו אופקי</span>
|
<span onclick="1.code.value = editor.innerHTML">צור קוד ליצירת הדף הזה</span>
|]]>
עכשיו עברנו את החלק הקשה, עכשיו צריכים ליצור טופס שכאשר ילחצו על "צור קוד ליצירת דף זה" יוצג הקוד ב textarea וכאשר לוחצים על (בטופס) "בדוק דף" יצא הדף שיצרנו ב<div>.
אפשר לעשות זאת בקלות כך :
<![CDATA[<form name=1 onsubmit="code()">
<textarea id=code name=code rows=10 cols=60>
</textarea>
<br>
<input type=submit value="בדוק דף">
</form>]]>
ועכשיו הקוד המלא (למי שכבר נימאס לעתיק ולהדביק הרבה פעמים) :
<![CDATA[<html dir=rtl>
<head>
<title>Make Code</title>
<!--form lior73-->
<script language=JavaScript>
function code()
{
var code=document.1.code.value
document.write("<!--from lior73-->
<p align=right>" + code + "</p>")
}
function text(eCommandname)
{
document.getElementById(editor).focus()
document.execCommand(eCommandname)
document.getElementById(editor).focus()
}
</script>
</head>
<body>
<div contenteditable=true style="border:1px solid black" id="editor" hieght=150% width=100%></div>
|
<span onclick="text(bold)">מודגש</span>
|
<span onclick="text(createlink)">קישור</span>
|
<span onclick="text(underline)">קו תחתון</span>
|
<select onchange="document.getElementById(editor).focus();
document.execCommand(forecolor,false,this[this.selectedIndex].value);
document.getElementById(editor).focus()">
<option value="black">שחור</option>
<option value="red">אדום</option>
<option value="green" >ירוק</option>
<option value="blue">כחול</option>
</select>
|
<span onclick="text(InsertHorizontalRule)">קו אופקי</span>
|
<span onclick="1.code.value = editor.innerHTML">צור קוד ליצירת הדף הזה</span>
|
<p></p>
<p></p>
<form name=1 onsubmit="code()">
<textarea id=code name=code rows=10 cols=60>
</textarea>
<br>
<input type=submit value="בדוק דף">
</form>
</body>
</html>]]>
| 
