Hi, ich hab ein problem (kaum zu glauben).
und zwar wollte ich das so machen das in einer textareawenn man auf einen button klickt ein TAG eingefügt wird. Dazu habe ich im internet ein WYSIWYG-SYSTEM runtergeladen. Wenn ich jetzt den namen der textarea übergebe. wird der der text aber nicht in die textarea eingegeben.
Immer wenn:
<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>
in body steht kann man die BLINK-Tags nicht einfügen.
hier der code:
// [BLINK] [/BLINK] einfügen
function insertBLINK(aTag, eTag) {
var input = document.forms['myform'].elements['yourFieldNameHere'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//textarea im body
<form name="myform" method="POST" action="">
<input type="button" value="BLINKTEXT" onClick="insertBLINK('[HIDE]', '[/HIDE]')">
<textarea name="yourFieldNameHere" style="width:800; height:150">INSERT TEXT ² Save</textarea><br>
<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>
</form>
// Function editor_generate
function editor_generate(objname,userConfig) {
// Default Settings
var config = new editor_defaultConfig(objname);
if (userConfig) {
for (var thisName in userConfig) {
if (userConfig[thisName]) { config[thisName] = userConfig[thisName]; }
}
}
document.all[objname].config = config; // store config settings
// set size to specified size or size of original object
var obj = document.all[objname];
if (!config.width || config.width == "auto") {
if (obj.style.width) { config.width = obj.style.width; } // use css style
else if (obj.cols) { config.width = (obj.cols * 8) + 22; } // col width + toolbar
else { config.width = '100%'; } // default
}
if (!config.height || config.height == "auto") {
if (obj.style.height) { config.height = obj.style.height; } // use css style
else if (obj.rows) { config.height = obj.rows * 17 } // row height
else { config.height = '200'; } // default
}
var tblOpen = '<table border=0 cellspacing=0 cellpadding=0 style="float: left;" unselectable="on"><tr><td style="border: none; padding: 1 0 0 0"><nobr>';
var tblClose = '</nobr></td></tr></table>\n';
// build button toolbar
var toolbar = '';
var btnGroup, btnItem, aboutEditor;
for (var btnGroup in config.toolbar) {
// linebreak
if (config.toolbar[btnGroup].length == 1 &&
config.toolbar[btnGroup][0].toLowerCase() == "linebreak") {
toolbar += '<br clear="all">';
continue;
}
toolbar += tblOpen;
for (var btnItem in config.toolbar[btnGroup]) {
var btnName = config.toolbar[btnGroup][btnItem].toLowerCase();
// fontname
if (btnName == "fontname") {
toolbar += '<select id="_' +objname+ '_FontName" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 2; font-size: 12px;">';
for (var fontname in config.fontnames) {
toolbar += '<option value="' +config.fontnames[fontname]+ '">' +fontname+ '</option>'
}
toolbar += '</select>';
continue;
}
// fontsize
if (btnName == "fontsize") {
toolbar += '<select id="_' +objname+ '_FontSize" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;">';
for (var fontsize in config.fontsizes) {
toolbar += '<option value="' +config.fontsizes[fontsize]+ '">' +fontsize+ '</option>'
}
toolbar += '</select>\n';
continue;
}
// font style
if (btnName == "fontstyle") {
toolbar += '<select id="_' +objname+ '_FontStyle" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;">';
+ '<option value="">Font Style</option>';
for (var i in config.fontstyles) {
var fontstyle = config.fontstyles[i];
toolbar += '<option value="' +fontstyle.className+ '">' +fontstyle.name+ '</option>'
}
toolbar += '</select>';
continue;
}
// separator
if (btnName == "separator") {
toolbar += '<span style="border: 1px inset; width: 1px; font-size: 16px; height: 16px; margin: 0 3 0 3"></span>';
continue;
}
// buttons
var btnObj = config.btnList[btnName];
if (btnName == 'linebreak') { alert("htmlArea error: 'linebreak' must be in a subgroup by itself, not with other buttons.\n\nhtmlArea wysiwyg editor not created."); return; }
if (!btnObj) { alert("htmlArea error: button '" +btnName+ "' not found in button list when creating the wysiwyg editor for '"+objname+"'.\nPlease make sure you entered the button name correctly.\n\nhtmlArea wysiwyg editor not created."); return; }
var btnCmdID = btnObj[0];
var btnTitle = btnObj[1];
var btnOnClick = btnObj[2];
var btnImage = btnObj[3];
toolbar += '<button title="' +btnTitle+ '" id="_' +objname+ '_' +btnCmdID+ '" class="btn" onClick="' +btnOnClick+ '" onmouseover="if(this.className==\'btn\'){this.className=\'btnOver\'}" onmouseout="if(this.className==\'btnOver\'){this.className=\'btn\'}" unselectable="on"><img src="' +config.imgURL + btnImage+ '" border=0 unselectable="on"></button>';
} // end of button sub-group
toolbar += tblClose;
} // end of entire button set
// build editor
var editor = '<span id="_editor_toolbar"><table border=0 cellspacing=0 cellpadding=0 bgcolor="buttonface" style="padding: 1 0 0 2" width=' + config.width + ' unselectable="on"><tr><td>\n'
+ toolbar
+ '</td></tr></table>\n'
+ '</td></tr></table></span>\n'
+ '<textarea ID="_' +objname + '_editor" style="width:' +config.width+ '; height:' +config.height+ '; margin-top: -1px; margin-bottom: -1px;" wrap=soft></textarea>';
// add context menu
editor += '<div id="_' +objname + '_cMenu" style="position: absolute; visibility: hidden;"></div>';
// hide original textarea and insert htmlarea after it
if (!config.debug) { document.all[objname].style.display = "none"; }
if (config.plaintextInput) { // replace nextlines with breaks
var contents = document.all[objname].value;
contents = contents.replace(/\r\n/g, '<br>');
contents = contents.replace(/\n/g, '<br>');
contents = contents.replace(/\r/g, '<br>');
document.all[objname].value = contents;
}
// insert wysiwyg
document.all[objname].insertAdjacentHTML('afterEnd', editor)
// convert htmlarea from textarea to wysiwyg editor
editor_setmode(objname, 'init');
// call filterOutput when user submits form
for (var idx=0; idx < document.forms.length; idx++) {
var r = document.forms[idx].attachEvent('onsubmit', function() { editor_filterOutput(objname); });
if (!r) { alert("Error attaching event to form!"); }
}
return true;
}
Würde mich über hilfe freuen
und zwar wollte ich das so machen das in einer textareawenn man auf einen button klickt ein TAG eingefügt wird. Dazu habe ich im internet ein WYSIWYG-SYSTEM runtergeladen. Wenn ich jetzt den namen der textarea übergebe. wird der der text aber nicht in die textarea eingegeben.
Immer wenn:
<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>
in body steht kann man die BLINK-Tags nicht einfügen.
hier der code:
// [BLINK] [/BLINK] einfügen
function insertBLINK(aTag, eTag) {
var input = document.forms['myform'].elements['yourFieldNameHere'];
input.focus();
/* für Internet Explorer */
if(typeof document.selection != 'undefined') {
/* Einfügen des Formatierungscodes */
var range = document.selection.createRange();
var insText = range.text;
range.text = aTag + insText + eTag;
/* Anpassen der Cursorposition */
range = document.selection.createRange();
if (insText.length == 0) {
range.move('character', -eTag.length);
} else {
range.moveStart('character', aTag.length + insText.length + eTag.length);
}
range.select();
}
/* für neuere auf Gecko basierende Browser */
else if(typeof input.selectionStart != 'undefined')
{
/* Einfügen des Formatierungscodes */
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + aTag + insText + eTag + input.value.substr(end);
/* Anpassen der Cursorposition */
var pos;
if (insText.length == 0) {
pos = start + aTag.length;
} else {
pos = start + aTag.length + insText.length + eTag.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* für die übrigen Browser */
else
{
/* Abfrage der Einfügeposition */
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos)) {
pos = prompt("Einfügen an Position (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length) {
pos = input.value.length;
}
/* Einfügen des Formatierungscodes */
var insText = prompt("Bitte geben Sie den zu formatierenden Text ein:");
input.value = input.value.substr(0, pos) + aTag + insText + eTag + input.value.substr(pos);
}
}
//textarea im body
<form name="myform" method="POST" action="">
<input type="button" value="BLINKTEXT" onClick="insertBLINK('[HIDE]', '[/HIDE]')">
<textarea name="yourFieldNameHere" style="width:800; height:150">INSERT TEXT ² Save</textarea><br>
<script language="javascript1.2">
editor_generate('yourFieldNameHere');
</script>
</form>
// Function editor_generate
function editor_generate(objname,userConfig) {
// Default Settings
var config = new editor_defaultConfig(objname);
if (userConfig) {
for (var thisName in userConfig) {
if (userConfig[thisName]) { config[thisName] = userConfig[thisName]; }
}
}
document.all[objname].config = config; // store config settings
// set size to specified size or size of original object
var obj = document.all[objname];
if (!config.width || config.width == "auto") {
if (obj.style.width) { config.width = obj.style.width; } // use css style
else if (obj.cols) { config.width = (obj.cols * 8) + 22; } // col width + toolbar
else { config.width = '100%'; } // default
}
if (!config.height || config.height == "auto") {
if (obj.style.height) { config.height = obj.style.height; } // use css style
else if (obj.rows) { config.height = obj.rows * 17 } // row height
else { config.height = '200'; } // default
}
var tblOpen = '<table border=0 cellspacing=0 cellpadding=0 style="float: left;" unselectable="on"><tr><td style="border: none; padding: 1 0 0 0"><nobr>';
var tblClose = '</nobr></td></tr></table>\n';
// build button toolbar
var toolbar = '';
var btnGroup, btnItem, aboutEditor;
for (var btnGroup in config.toolbar) {
// linebreak
if (config.toolbar[btnGroup].length == 1 &&
config.toolbar[btnGroup][0].toLowerCase() == "linebreak") {
toolbar += '<br clear="all">';
continue;
}
toolbar += tblOpen;
for (var btnItem in config.toolbar[btnGroup]) {
var btnName = config.toolbar[btnGroup][btnItem].toLowerCase();
// fontname
if (btnName == "fontname") {
toolbar += '<select id="_' +objname+ '_FontName" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 2; font-size: 12px;">';
for (var fontname in config.fontnames) {
toolbar += '<option value="' +config.fontnames[fontname]+ '">' +fontname+ '</option>'
}
toolbar += '</select>';
continue;
}
// fontsize
if (btnName == "fontsize") {
toolbar += '<select id="_' +objname+ '_FontSize" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;">';
for (var fontsize in config.fontsizes) {
toolbar += '<option value="' +config.fontsizes[fontsize]+ '">' +fontsize+ '</option>'
}
toolbar += '</select>\n';
continue;
}
// font style
if (btnName == "fontstyle") {
toolbar += '<select id="_' +objname+ '_FontStyle" onChange="editor_action(this.id)" unselectable="on" style="margin: 1 2 0 0; font-size: 12px;">';
+ '<option value="">Font Style</option>';
for (var i in config.fontstyles) {
var fontstyle = config.fontstyles[i];
toolbar += '<option value="' +fontstyle.className+ '">' +fontstyle.name+ '</option>'
}
toolbar += '</select>';
continue;
}
// separator
if (btnName == "separator") {
toolbar += '<span style="border: 1px inset; width: 1px; font-size: 16px; height: 16px; margin: 0 3 0 3"></span>';
continue;
}
// buttons
var btnObj = config.btnList[btnName];
if (btnName == 'linebreak') { alert("htmlArea error: 'linebreak' must be in a subgroup by itself, not with other buttons.\n\nhtmlArea wysiwyg editor not created."); return; }
if (!btnObj) { alert("htmlArea error: button '" +btnName+ "' not found in button list when creating the wysiwyg editor for '"+objname+"'.\nPlease make sure you entered the button name correctly.\n\nhtmlArea wysiwyg editor not created."); return; }
var btnCmdID = btnObj[0];
var btnTitle = btnObj[1];
var btnOnClick = btnObj[2];
var btnImage = btnObj[3];
toolbar += '<button title="' +btnTitle+ '" id="_' +objname+ '_' +btnCmdID+ '" class="btn" onClick="' +btnOnClick+ '" onmouseover="if(this.className==\'btn\'){this.className=\'btnOver\'}" onmouseout="if(this.className==\'btnOver\'){this.className=\'btn\'}" unselectable="on"><img src="' +config.imgURL + btnImage+ '" border=0 unselectable="on"></button>';
} // end of button sub-group
toolbar += tblClose;
} // end of entire button set
// build editor
var editor = '<span id="_editor_toolbar"><table border=0 cellspacing=0 cellpadding=0 bgcolor="buttonface" style="padding: 1 0 0 2" width=' + config.width + ' unselectable="on"><tr><td>\n'
+ toolbar
+ '</td></tr></table>\n'
+ '</td></tr></table></span>\n'
+ '<textarea ID="_' +objname + '_editor" style="width:' +config.width+ '; height:' +config.height+ '; margin-top: -1px; margin-bottom: -1px;" wrap=soft></textarea>';
// add context menu
editor += '<div id="_' +objname + '_cMenu" style="position: absolute; visibility: hidden;"></div>';
// hide original textarea and insert htmlarea after it
if (!config.debug) { document.all[objname].style.display = "none"; }
if (config.plaintextInput) { // replace nextlines with breaks
var contents = document.all[objname].value;
contents = contents.replace(/\r\n/g, '<br>');
contents = contents.replace(/\n/g, '<br>');
contents = contents.replace(/\r/g, '<br>');
document.all[objname].value = contents;
}
// insert wysiwyg
document.all[objname].insertAdjacentHTML('afterEnd', editor)
// convert htmlarea from textarea to wysiwyg editor
editor_setmode(objname, 'init');
// call filterOutput when user submits form
for (var idx=0; idx < document.forms.length; idx++) {
var r = document.forms[idx].attachEvent('onsubmit', function() { editor_filterOutput(objname); });
if (!r) { alert("Error attaching event to form!"); }
}
return true;
}
Würde mich über hilfe freuen
Kommentar