למה זה לא עובד לי? ב JS
זה אמור להיות מערכת עם BBCODES...
editor.html
קוד:
<head>
<script language='Javascript' src='jscripts/editor.js'></script>
</head>
<script language="javascript">
var b_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìäãâéù";
var i_prompt = "äëðñ àú äè÷ñè ùàúä øåöä ùéäéä ðèåé";
var u_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìäåñéó ìå ÷å úçúåï";
var font_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìùðåú ìå àú äôåðè";
var size_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìùðåú ìå àú äâåãì";
var color_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìùðåú ìå àú äöáò";
var align_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìééùø";
var quote_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìöèè";
var code_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìäåñéó ìå úâéã ÷åã";
var php_prompt = "äëðñ àú äè÷ñè ùáøöåðê ìäåñéó ìå úâé PHP";
</script>
<tr>
<td bgcolor="#F0F0F0">
<table cellspacing="0" cellpadding="2" border="0"><tr>
<td>
<select name="font" onchange="insertCode('font', this.options[this.selectedIndex].value)">
<option value="-">ôåðè</option>
<option value="Arial">Arial</option>
<option value="Courier">Courier</option>
<option value="Impact">Impact</option>
<option value="Tahoma">Tahoma</option>
<option value="Times New Roman">Times New Roman</option>
<option value="Trebuchet MS">Terbuchet MS</option>
<option value="Verdana">Verdana</option>
</select>
</td>
<td>
<select name="size" onchange="insertCode('size', this.options[this.selectedIndex].value)">
<option value="-">âåãì</option>
<option value="small">÷èï</option>
<option value="medium">áéðåðé</option>
<option value="large">âãåì</option>
<option value="x-large">âãåì îàåã</option>
<option value="xx-large">òð÷</option>
</select>
</td>
<td>
<select name="color" onchange="insertCode('color', this.options[this.selectedIndex].value)">
<option value="-">öáò</option>
<option value="white" style="color:white;">ìáï</option>
<option value="black" style="color:black;">ùçåø</option>
<option value="red" style="color:red;">àãåí</option>
<option value="yellow" style="color:yellow;">öäåá</option>
<option value="pink" style="color:pink;">åøåã</option>
<option value="green" style="color:green;">éøå÷</option>
<option value="orange" style="color:orange;">ëúåí</option>
<option value="purple" style="color:purple;">ñâåì</option>
<option value="blue" style="color:blue;">ëçåì</option>
<option value="beige" style="color:beige;">áæ</option>
<option value="brown" style="color:brown;">çåí</option>
<option value="teal" style="color:teal;">úëìú</option>
<option value="navy" style="color:navy;">ëçåì ëää</option>
<option value="maroon" style="color:maroon;">áåøãå</option>
<option value="limegreen" style="color:limegreen;">éøå÷ ìéîåï</option></select>
</select>
</td>
</tr></table>
</td>
<td nowrap bgcolor="#F0F0F0" align="right"><input type="button" style="color: red; font: bold 11px verdana" value="ñâåø àú ëì äúâéí" onclick="closeTags()"></td>
</tr>
<tr>
<td nowrap bgcolor="#F0F0F0" colspan="2">
<table cellspacing="0" cellpadding="0" border="0"><tr>
<td>
<img name="b" src="./images/editor/bold.gif" onclick="insertCode('b')" onMouseOver="toolbarHover('b')" onMouseOut="toolbarUnHover('b')" onMouseDown="toolbarMouseDown('b')" alt="è÷ñè áåìè">
<img name="i" src="./images/editor/italics.gif" onclick="insertCode('i')" onMouseOver="toolbarHover('i')" onMouseOut="toolbarUnHover('i')" onMouseDown="toolbarMouseDown('i')" alt="è÷ñè ðèåé">
<img name="u" src="./images/editor/underline.gif" onclick="insertCode('u')" onMouseOver="toolbarHover('u')" onMouseOut="toolbarUnHover('u')" onMouseDown="toolbarMouseDown('u')" alt="÷å úçúåï">
<img src="./images/editor/sep.gif" class="toolbar_normal">
<img name="align_left" src="./images/editor/align_left.gif" onclick="insertCode('align', 'left')" onMouseOver="toolbarHover('align_left')" onMouseOut="toolbarUnHover('align_left')" onMouseDown="toolbarMouseDown('align_left')" alt="ééùåø ìùîàì">
<img name="align_center" src="./images/editor/align_center.gif" onclick="insertCode('align', 'center')" onMouseOver="toolbarHover('align_center')" onMouseOut="toolbarUnHover('align_center')" onMouseDown="toolbarMouseDown('align_center')" alt="ééùåø ìàîöò">
<img name="align_right" src="./images/editor/align_right.gif" onclick="insertCode('align', 'right')" onMouseOver="toolbarHover('align_right')" onMouseOut="toolbarUnHover('align_right')" onMouseDown="toolbarMouseDown('align_right')" alt="éùåø ìéîéï">
<img name="align_justify" src="./images/editor/align_justify.gif" onclick="insertCode('align', 'justify')" onMouseOver="toolbarHover('align_justify')" onMouseOut="toolbarUnHover('align_justify')" onMouseDown="toolbarMouseDown('align_justify')" alt="Justify">
<img src="./images/editor/sep.gif">
<img name="list_num" src="./images/editor/list_num.gif" onclick="insertCode('list', '1')" onMouseOver="toolbarHover('list_num')" onMouseOut="toolbarUnHover('list_num')" onMouseDown="toolbarMouseDown('list_num')" alt="øùéîä îîåñôøú">
<img name="list_bullet" src="./images/editor/list_bullet.gif" onclick="insertCode('list')" onMouseOver="toolbarHover('list_bullet')" onMouseOut="toolbarUnHover('list_bullet')" onMouseDown="toolbarMouseDown('list_bullet')" alt="øùéîä">
<img src="./images/editor/sep.gif">
<img name="img" src="./images/editor/image.gif" onclick="insertCode('img')" onMouseOver="toolbarHover('img')" onMouseOut="toolbarUnHover('img')" onMouseDown="toolbarMouseDown('img')" alt="úîåðä">
<img name="url" src="./images/editor/url.gif" onclick="insertCode('url')" onMouseOver="toolbarHover('url')" onMouseOut="toolbarUnHover('url')" onMouseDown="toolbarMouseDown('url')" alt="÷éùåø">
<img name="email" src="./images/editor/email.gif" onclick="insertCode('email')" onMouseOver="toolbarHover('email')" onMouseOut="toolbarUnHover('email')" onMouseDown="toolbarMouseDown('email')" alt="ãåàø àì÷èøåðé">
<img src="./images/editor/sep.gif">
<img name="quote" src="./images/editor/quote.gif" onclick="insertCode('quote')" onMouseOver="toolbarHover('quote')" onMouseOut="toolbarUnHover('quote')" onMouseDown="toolbarMouseDown('quote')" alt="öéèåè">
<img name="code" src="./images/editor/code.gif" onclick="insertCode('code')" onMouseOver="toolbarHover('code')" onMouseOut="toolbarUnHover('code')" onMouseDown="toolbarMouseDown('code')" alt="÷åã">
<img name="php" src="./images/editor/php.gif" onclick="insertCode('php')" onMouseOver="toolbarHover('php')" onMouseOut="toolbarUnHover('php')" onMouseDown="toolbarMouseDown('php')" alt="PHP">
</td>
</tr></table>
</td>
</tr>
<textarea name="message" rows="20" cols="70" tabindex="3"></textarea>
jscripts/editor.js
HTML קוד:
var myTags = new Array();
var buttonOver = "";
init();
function init() {
var cookies = document.cookie;
var cookiename = "cb_mode=";
var cstart = cookies.indexOf("; "+cookiename);
if(cstart == -1) {
cstart = cookies.indexOf(" "+cookiename);
if(cstart != 0) {
normalmode = false;
}
} else {
cstart += 2;
}
var end = cookies.indexOf(";", cstart);
if(end == -1) {
end = cookies.length;
}
theMode = unescape(cookies.substring((cstart + cookiename.length)+1, end));
if(theMode == "normal") {
document.input.mode[0].checked = true;
document.input.mode[1].checked = false;
normalmode = true;
} else {
document.input.mode[1].checked = true;
document.input.mode[0].checked = false;
normalmode = false;
}
}
function changeMode(newMode) {
document.cookie = "cb_mode="+newMode+"; path=/; expires=Wed, 1 Jan 2020 00:00:00 GMT;";
if(newMode == "normal") {
normalmode = true;
} else {
normalmode = false;
}
}
function garraySize(arrayName) {
for (i=0;i<arrayName.length;i++) {
if((arrayName[i] == "undefined") || (arrayName[i] == "") || (arrayName[i] == null)) {
return i;
}
}
return arrayName.length;
}
function arrayPush(arrayName, arrayValue) {
arraySize = garraySize(arrayName);
arrayName[arraySize] = arrayValue;
}
function arrayPop(arrayName) {
arrayMo = garraySize(arrayName);
arrayValue = arrayName[arrayMo - 1];
delete arrayName[arrayMo - 1];
return arrayValue;
}
function inArray(item, arrayName) {
for(i=0;i<arrayName.length;i++) {
if(arrayName[i] == item) {
return true;
}
}
return false;
}
function arrayPos(item, arrayName) {
for(i=0;i<arrayName.length;i++) {
if(arrayName[i] == item) {
return i;
}
}
return 0;
}
function insertList(type) {
if(type) {
theList = "[list="+type+"]\n";
} else {
theList = "[list]\n";
}
promptRes = "1";
while((promptRes != "") && (promptRes != null)) {
promptRes = prompt("Enter a list item. Click cancel or leave blank to end the list.", "");
if((promptRes != "") && (promptRes != null)) {
theList = theList+"[*]"+promptRes+"\n";
}
}
theList = theList+"[/list]\n";
doInsert(theList);
}
function insertHyperlink() {
var url = prompt("Please enter the URL of the website.", "http://");
if(url) {
var urltitle = prompt("If you wish to, you may also insert a title to be shown instead of the URL.", "");
if(urltitle) {
doInsert("[url="+url+"]"+urltitle+"[/url]", "", false);
} else {
doInsert("[url]"+url+"[/url]", "", false);
}
} else {
alert("Error!\n\nYou did not enter a URL for the website. Please try again.");
}
}
function insertImage() {
var image = prompt("Please enter the remote URL of the image.", "http://");
if(image) {
doInsert("[img]"+image+"[/img]", "", false);
} else {
alert("Error!\n\nYou did not enter a URL for the image. Please try again.");
}
}
function insertEmail() {
var email = prompt("Please enter the email address.", "");
if(email) {
var emailtitle = prompt("If you wish to, you may also insert a title to be shown instead of the email address.", "My Email Address");
if(emailtitle) {
doInsert("[email="+email+"]"+emailtitle+"[/email]", "", false);
} else {
doInsert("[email]"+email+"[/email]", "", false);
}
} else {
alert("Error!\n\nYou did not enter a valid email address. Please try again.");
}
}
function insertCode(myCode,selItem) {
if(myCode == "list") {
insertList(selItem);
} else if(myCode == "url") {
insertHyperlink();
} else if(myCode == "img") {
insertImage();
} else if(myCode == "email") {
insertEmail();
} else {
if(normalmode) {
var prompttext = eval(myCode + "_prompt");
if(selItem) {
if(selItem != "-") {
promptres = prompt(prompttext + "\n["+myCode+"="+selItem+"]xxx[/"+myCode+"]", "");
}
} else {
promptres = prompt(prompttext + "\n["+myCode+"]xxx[/"+myCode+"]", "");
}
if((promptres != null) && (promptres != "")) {
if(selItem) {
if(selItem != "-") {
doInsert("["+myCode+"="+selItem+"]"+promptres+"[/"+myCode+"]");
}
} else {
doInsert("["+myCode+"]"+promptres+"[/"+myCode+"]");
}
}
} else {
var thingA = myCode+"_"+selItem;
args = thingA.split("_");
lastIndex = 0;
alreadyopen = false;
for(i=0;i<myTags.length;i++) {
theTag = myTags[i];
if(theTag) {
args2 = theTag.split("_");
if(args2[0] == args[0]) {
alreadyopen = true;
lastIndex = i;
}
}
}
if(alreadyopen) {
while(myTags[lastIndex]) {
tagRemove = arrayPop(myTags);
thingB = tagRemove.split("_");
doInsert("[/"+thingB[0]+"]", "", false);
// unclick it
element = eval("document.images['"+tagRemove+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
if(buttonOver == tagRemove) {
element.className = "toolbar_hover";
} else {
element.className = "toolbar_normal";
}
}
if(thingA == tagRemove) { // silly check =P
noInsert = true;
}
}
}
if(selItem && selItem != "-" && !noInsert) {
isClosed = doInsert("["+myCode+"="+selItem+"]", "[/"+myCode+"]", true);
if(!isClosed) {
arrayPush(myTags, myCode+"_"+selItem);
} else {
// change the buttons status to closed :P
element = eval("document.images['"+myCode+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
element.className = "toolbar_normal";
}
}
}
else if(!selItem && !alreadyopen) {
isClosed = doInsert("["+myCode+"]", "[/"+myCode+"]", true);
if(!isClosed) {
arrayPush(myTags, myCode);
} else {
// change the buttons status to closed :P
element = eval("document.images['"+myCode+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
element.className = "toolbar_normal";
}
}
}
var alreadyopen = false;
var noInsert = false;
}
if(myCode == "font")
{
document.input.font.selectedIndex = "0";
}
else if(myCode == "size")
{
document.input.size.selectedIndex = "0";
}
else if(myCode == "color")
{
document.input.color.selectedIndex = "0";
}
}
setFocus(document.input.message);
}
function closeTags() {
if(myTags[0]) {
while(myTags[0]) {
tagRemove = arrayPop(myTags);
args = tagRemove.split("_");
isClosed = doInsert("[/"+args[0]+"]", "", false, true);
element = eval("document.images['"+tagRemove+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
element.className = "toolbar_normal";
}
}
}
myTags = new Array();
setFocus(document.input.message);
}
function doInsert(myCode, myClose, singleTag, ignoreSel) {
isClosed = true;
if(ignoreSel != true) {
ignoreSel = false;
}
if(!myClose)
{
myClose = "";
}
var messageBox = document.input.message;
if(is_ie && is_win && (agt_ver >= 4)) {
setFocus(messageBox);
var seltext = document.selection;
var range = seltext.createRange();
if(ignoreSel != false) {
range.collapse;
}
if(((seltext.type == "Text" || seltext.type == "None") && range != null) && ignoreSel != true) {
if(myClose != "" && range.text.length > 0) {
myCode = myCode+range.text+myClose;
} else {
if(singleTag) {
isClosed = false;
}
}
range.text = myCode;
} else {
messageBox.value += myCode;
}
}
else if(is_mozilla && messageBox.selectionEnd) {
var select_start = messageBox.selectionStart;
var select_end = messageBox.selectionEnd;
if(select_end <= 2) {
select_end = messageBox.textLength;
}
var start = (messageBox.value).substring(0, select_start);
var middle = (messageBox.value).substring(select_start, select_end);
var end = (messageBox.value).substring(select_end, messageBox.textLength);
if((messageBox.selectionEnd - messageBox.selectionStart > 0) && ignoreSel != true && myClose != "") {
middle = myCode+middle+myClose;
} else {
if(singleTag) {
isClosed = false;
}
//middle = myCode+middle;
middle = myCode;
}
messageBox.value = start+middle+end;
}
else {
messageBox.value += myCode;
if(singleTag) {
isClosed = false;
}
}
setFocus(messageBox);
return isClosed;
}
function setFocus(formElement) {
formElement.focus();
}
function addsmilie(smilie) {
doInsert(smilie);
}
// these are our cool functions for hovering/highlighting etc...nifty...huh?
function toolbarHover(myCode, method) {
element = eval("document.images['"+myCode+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
element.className = "toolbar_hover";
buttonOver = myCode;
}
}
function toolbarUnHover(myCode) {
element = eval("document.images['"+myCode+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
if(inArray(myCode, myTags)) {
element.className = "toolbar_clicked";
} else {
element.className = "toolbar_normal";
}
}
buttonOver = "";
}
function toolbarMouseDown(myCode) {
element = eval("document.images['"+myCode+"']");
if(element && !element.disabled && element.nodeName == "IMG") {
element.className = "toolbar_mousedown";
}
}
ובבקשה אל תתחילו לחפור שלקחתי את זה ושאני מעתיקן כי אני יודע שלקחתי את זה ואני רוצה לשלב את זה באתר שלי.. |
