limitar textarea

[rrecarte]

buenas... mi consulta es como limito el maximo que puedan escribir de largo en un text area que es un editor de texto de javasctipt.. es extremadamente largo el codigo para pegarlo

no quiero limitar el largo que se ve.... whidth.
lo que quiero limitar es el largo maximo que puedan escribir antes de pasar al proximo renglon...

como lo hago... es desde vacascript o desde el textarea.. paso a pegar el codigo cortado para ver quien me pueda ayudar. gracias

var WYSIWYG = {

/**
* Settings class, holds all customizeable properties
*/
Settings: function() {

// Images Directory
this.ImagesDir = "images/";

// Popups Directory
this.PopupsDir = "popups/";

// CSS Directory File
this.CSSFile = "styles/wysiwyg.css";

// Default WYSIWYG width and height (use px or %)
this.Width = "500px";
this.Height = "200px";

// Default stylesheet of the WYSIWYG editor window
this.DefaultStyle = "font-family: Arial; font-size: 12px; background-color: #FFFFFF";

// Stylesheet if editor is disabled
this.DisabledStyle = "font-family: Arial; font-size: 12px; background-color: #EEEEEE";

// Width + Height of the preview window
this.PreviewWidth = 500;
this.PreviewHeight = 400;

// Confirmation message if you strip any HTML added by word
this.RemoveFormatConfMessage = "Clean HTML inserted by MS Word ?";

// Nofication if browser is not supported by openWYSIWYG, leave it blank for no message output.
this.NoValidBrowserMessage = "openWYSIWYG does not support your browser.";

// Anchor path to strip, leave it blank to ignore
// or define auto to strip the path where the editor is placed
// (only IE)
this.AnchorPathToStrip = "auto";

// Image path to strip, leave it blank to ignore
// or define auto to strip the path where the editor is placed
// (only IE)
this.ImagePathToStrip = "auto";

// Enable / Disable the custom context menu
this.ContextMenu = true;

// Enabled the status bar update. Within the status bar
// node tree of the actually selected element will build
this.StatusBarEnabled = true;

// If enabled than the capability of the IE inserting line breaks will be inverted.
// Normal: ENTER = <p> , SHIFT + ENTER = <br>
// Inverted: ENTER = <br>, SHIFT + ENTER = <p>
this.InvertIELineBreaks = false;

// Replace line breaks with <br> tags
this.ReplaceLineBreaks = false;

// Page that opened the WYSIWYG (Used for the return command)
this.Opener = "admin.asp";

// Insert image implementation
this.ImagePopupFile = "";
this.ImagePopupWidth = 0;
this.ImagePopupHeight = 0;

// Holds the available buttons displayed
// on the toolbar of the editor
this.Toolbar = new Array();
this.Toolbar[0] = new Array(
"font",
"fontsize",
"headings",
"bold",
"italic",
"underline",
"strikethrough",
"seperator",
"forecolor",
"backcolor",
"seperator",
"justifyfull",
"justifyleft",
"justifycenter",
"justifyright",
"seperator",
"unorderedlist",
"orderedlist",
"outdent",
"indent"
);
this.Toolbar[1] = new Array(
"save",
// "return", // return button disabled by default
"seperator",
"subscript",
"superscript",
"seperator",
"cut",
"copy",
"paste",
"removeformat",
"seperator",
"undo",
"redo",
"seperator",
"inserttable",
"insertimage",
"createlink",
"seperator",
"preview",
"print",
"seperator",
"viewSource",
"maximize",
"seperator",
"help"
);

// DropDowns
this.DropDowns = new Array();
// Fonts
this.DropDowns['font'] = {
id: "fonts",
command: "FontName",
label: "<font style=\"font-family:{value};font-size:12px;\">{value}</font>",
width: "90px",
elements: new Array(
"Arial",
"Sans Serif",
"Tahoma",
"Verdana",
"Courier New",
"Georgia",
"Times New Roman",
"Impact",
"Comic Sans MS"
)
};
// Font sizes
this.DropDowns['fontsize'] = {
id: "fontsizes",
command: "FontSize",
label: "<font size=\"{value}\">Size {value}</font>",
width: "54px",
elements: new Array(
"1",
"2",
"3",
"4",
"5",
"6",
"7"
)
};
// Headings
this.DropDowns['headings'] = {
id: "headings",
command: "FormatBlock",
label: "<{value} style=\"margin:0px;text-decoration:none;font-family:Arial\">{value}</{value}>",
width: "74px",
elements: new Array(
"H1",
"H2",
"H3",
"H4",
"H5",
"H6"
)
};

// Add the given element to the defined toolbar
// on the defined position
this.addToolbarElement = function(element, toolbar, position) {
if(element != "seperator") {this.removeToolbarElement(element);}
if(this.Toolbar[toolbar-1] == null) {
this.Toolbar[toolbar-1] = new Array();
}
this.Toolbar[toolbar-1].splice(position+1, 1, element);
};

// Remove an element from the toolbar
this.removeToolbarElement = function(element) {
if(element == "seperator") {return;} // do not remove seperators
for(var i=0;i<this.Toolbar.length;i++) {
if(this.Toolbar[i]) {
var toolbar = this.Toolbar[i];
for(var j=0;j<toolbar.length;j++) {
if(toolbar[j] != null && toolbar[j] == element) {
this.Toolbar[i].splice(j,1);
}
}
}
}
};

// clear all or a given toolbar
this.clearToolbar = function(toolbar) {
if(typeof toolbar == "undefined") {
this.Toolbar = new Array();
}
else {
this.Toolbar[toolbar+1] = new Array();
}
};

},
},

[rrecarte]

config: new Array(),
// Create viewTextMode global variable and set to 0
// enabling all toolbar commands while in HTML mode
viewTextMode: new Array(),
// maximized
maximized: new Array(),

/**
* Get the range of the given selection
*
* @param {Selection} sel Selection object
* @return {Range} Range object
*/
getRange: function(sel) {
return sel.createRange ? sel.createRange() : sel.getRangeAt(0);
},

/**
* Return the editor div element
*
* @param {String} n Editor identifier
* @return {HtmlDivElement} Iframe object
*/
getEditorDiv: function(n) {
return $("wysiwyg_div_" + n);
},

/**
* Return the editor table element
*
* @param {String} n Editor identifier
* @return {HtmlTableElement} Iframe object
*/
getEditorTable: function(n) {
return $("wysiwyg_table_" + n);
},

/**
* Get the iframe object of the WYSIWYG editor
*
* @param {String} n Editor identifier
* @return {HtmlIframeElement} Iframe object
*/
getEditor: function(n) {
return $("wysiwyg" + n);
},

/**
* Get editors window element
*
* @param {String} n Editor identifier
* @return {HtmlWindowElement} Html window object
*/
getEditorWindow: function(n) {
return this.getEditor(n).contentWindow;
},

/**
* Attach the WYSIWYG editor to the given textarea element
*
* @param {String} id Textarea identifier (all = all textareas)
* @param {Settings} settings the settings which will be applied to the textarea
*/
attach: function(id, settings) {
if(id != "all") {
this.setSettings(id, settings);
WYSIWYG_Core.includeCSS(this.config[id].CSSFile);
WYSIWYG_Core.addEvent(window, "load", function generateEditor() {WYSIWYG._generate(id, settings);});
}
else {
WYSIWYG_Core.addEvent(window, "load", function generateEditor() {WYSIWYG.attachAll(settings);});
}
},

/**
* Attach the WYSIWYG editor to all textarea elements
*
* @param {Settings} settings Settings to customize the look and feel
*/
attachAll: function(settings) {
var areas = document.getElementsByTagName("textarea");
for(var i=0;i<areas.length;i++) {
var id = areas[i].getAttribute("id");
if(id == null || id == "") continue;
this.setSettings(id, settings);
WYSIWYG_Core.includeCSS(this.config[id].CSSFile);
WYSIWYG._generate(id, settings);
}
},

/**
* Display an iframe instead of the textarea.
* It's used as textarea replacement to display HTML.
*
* @param id Textarea identifier (all = all textareas)
* @param settings the settings which will be applied to the textarea
*/
display: function(id, settings) {
if(id != "all") {
this.setSettings(id, settings);
WYSIWYG_Core.includeCSS(this.config[id].CSSFile);
WYSIWYG_Core.addEvent(window, "load", function displayIframe() {WYSIWYG._display(id, settings);});
}
else {
WYSIWYG_Core.addEvent(window, "load", function displayIframe() {WYSIWYG.displayAll(settings);});
}
},

/**
* Display an iframe instead of the textarea.
* It's apply the iframe to all textareas found in the current document.
*
* @param settings Settings to customize the look and feel
*/
displayAll: function(settings) {
var areas = document.getElementsByTagName("textarea");
for(var i=0;i<areas.length;i++) {
var id = areas[i].getAttribute("id");
if(id == null || id == "") continue;
this.setSettings(id, settings);
WYSIWYG_Core.includeCSS(this.config[id].CSSFile);
WYSIWYG._display(id, settings);
}
},

/**
* Set settings in config array, use the textarea id as identifier
*
* @param n Textarea identifier (all = all textareas)
* @param settings the settings which will be applied to the textarea
*/
setSettings: function(n, settings) {
if(typeof(settings) != "object") {
this.config[n] = new this.Settings();
}
else {
this.config[n] = settings;
}
},

/**
* Insert or modify an image
*
* @param {String} src Source of the image
* @param {Integer} width Width
* @param {Integer} height Height
* @param {String} align Alignment of the image
* @param {String} border Border size
* @param {String} alt Alternativ Text
* @param {Integer} hspace Horizontal Space
* @param {Integer} vspace Vertical Space
* @param {String} n The editor identifier (the textarea's ID)
*/
insertImage: function(src, width, height, align, border, alt, hspace, vspace, n) {

// get editor
var doc = this.getEditorWindow(n).document;
// get selection and range
var sel = this.getSelection(n);
var range = this.getRange(sel);

// the current tag of range
var img = this.findParent("img", range);

// element is not a link
var update = (img == null) ? false : true;
if(!update) {
img = doc.createElement("img");
}

// set the attributes
WYSIWYG_Core.setAttribute(img, "src", src);
WYSIWYG_Core.setAttribute(img, "style", "width:" + width + ";height:" + height);
if(align != "") { WYSIWYG_Core.setAttribute(img, "align", align); } else { img.removeAttribute("align"); }
WYSIWYG_Core.setAttribute(img, "border", border);
WYSIWYG_Core.setAttribute(img, "alt", alt);
WYSIWYG_Core.setAttribute(img, "hspace", hspace);
WYSIWYG_Core.setAttribute(img, "vspace", vspace);
img.removeAttribute("width");
img.removeAttribute("height");

// on update exit here
if(update) { return; }

// Check if IE or Mozilla (other)
if (WYSIWYG_Core.isMSIE) {
range.pasteHTML(img.outerHTML);
}
else {
this.insertNodeAtSelection(img, n);
}
},

/**
* Insert or modify a link
*
* @param {String} href The url of the link
* @param {String} target Target of the link
* @param {String} style Stylesheet of the link
* @param {String} styleClass Stylesheet class of the link
* @param {String} name Name attribute of the link
* @param {String} n The editor identifier (the textarea's ID)
*/
insertLink: function(href, target, style, styleClass, name, n) {

// get editor
var doc = this.getEditorWindow(n).document;
// get selection and range
var sel = this.getSelection(n);
var range = this.getRange(sel);
var lin = null;

// get element from selection
if(WYSIWYG_Core.isMSIE) {
if(sel.type == "Control" && range.length == 1) {
range = this.getTextRange(range(0));
range.select();
}
}

[rrecarte]

}

// find a as parent element
lin = this.findParent("a", range);

// check if parent is found
var update = (lin == null) ? false : true;
if(!update) {
lin = doc.createElement("a");
}

// set the attributes
WYSIWYG_Core.setAttribute(lin, "href", href);
WYSIWYG_Core.setAttribute(lin, "class", styleClass);
WYSIWYG_Core.setAttribute(lin, "className", styleClass);
WYSIWYG_Core.setAttribute(lin, "target", target);
WYSIWYG_Core.setAttribute(lin, "name", name);
WYSIWYG_Core.setAttribute(lin, "style", style);

// on update exit here
if(update) { return; }

// Check if IE or Mozilla (other)
if (WYSIWYG_Core.isMSIE) {
range.select();
lin.innerHTML = range.htmlText;
range.pasteHTML(lin.outerHTML);
}
else {
var node = range.startContainer;
var pos = range.startOffset;
if(node.nodeType != 3) { node = node.childNodes[pos]; }
if(node.tagName)
lin.appendChild(node);
else
lin.innerHTML = sel;
this.insertNodeAtSelection(lin, n);
}
},

/**
* Strips any HTML added by word
*
* @param {String} n The editor identifier (the textarea's ID)
*/
removeFormat: function(n) {

if ( !confirm(this.config[n].RemoveFormatConfMessage) ) { return; }
var doc = this.getEditorWindow(n).document;
var str = doc.body.innerHTML;

str = str.replace(/<span([^>])*>(&nbsp;)*\s*<\/span>/gi, '');
str = str.replace(/<span[^>]*>/gi, '');
str = str.replace(/<\/span[^>]*>/gi, '');
str = str.replace(/<p([^>])*>(&nbsp;)*\s*<\/p>/gi, '');
str = str.replace(/<p[^>]*>/gi, '');
str = str.replace(/<\/p[^>]*>/gi, '');
str = str.replace(/<h([^>])[0-9]>(&nbsp;)*\s*<\/h>/gi, '');
str = str.replace(/<h[^>][0-9]>/gi, '');
str = str.replace(/<\/h[^>][0-9]>/gi, '');
str = str.replace (/<B [^>]*>/ig, '<b>');

// var repl_i1 = /<I[^>]*>/ig;
// str = str.replace (repl_i1, '<i>');

str = str.replace (/<DIV[^>]*>/ig, '');
str = str.replace (/<\/DIV>/gi, '');
str = str.replace (/<[\/\w?]+:[^>]*>/ig, '');
str = str.replace (/(&nbsp;){2,}/ig, '&nbsp;');
str = str.replace (/<STRONG>/ig, '');
str = str.replace (/<\/STRONG>/ig, '');
str = str.replace (/<TT>/ig, '');
str = str.replace (/<\/TT>/ig, '');
str = str.replace (/<FONT [^>]*>/ig, '');
str = str.replace (/<\/FONT>/ig, '');
str = str.replace (/STYLE=\"[^\"]*\"/ig, '');
str = str.replace(/<([\w]+) class=([^ |>]*)([^>]*)/gi, '<$1$3');
str = str.replace(/<([\w]+) style="([^"]*)"([^>]*)/gi, '<$1$3');
str = str.replace(/width=([^ |>]*)([^>]*)/gi, '');
str = str.replace(/classname=([^ |>]*)([^>]*)/gi, '');
str = str.replace(/align=([^ |>]*)([^>]*)/gi, '');
str = str.replace(/valign=([^ |>]*)([^>]*)/gi, '');
str = str.replace(/<\\?\??xml[^>]>/gi, '');
str = str.replace(/<\/?\w+:[^>]*>/gi, '');
str = str.replace(/<st1:.*?>/gi, '');
str = str.replace(/o:/gi, '');

str = str.replace(/<!--([^>])*>(&nbsp;)*\s*<\/-->/gi, '');
str = str.replace(/<!--[^>]*>/gi, '');
str = str.replace(/<\/--[^>]*>/gi, '');

doc.body.innerHTML = str;
},

/**
* Display an iframe instead of the textarea.
*
* @private
* @param {String} n The editor identifier (the textarea's ID)
* @param {Object} settings Object which holds the settings
*/
_display: function(n, settings) {

// Get the textarea element
var textarea = $(n);

// Validate if textarea exists
if(textarea == null) {
alert("No textarea found with the given identifier (ID: " + n + ").");
return;
}

// Validate browser compatiblity
if(!WYSIWYG_Core.isBrowserCompatible()) {
if(this.config[n].NoValidBrowserMessage != "") { alert(this.config[n].NoValidBrowserMessage); }
return;
}

// Load settings in config array, use the textarea id as identifier
if(typeof(settings) != "object") {
this.config[n] = new this.Settings();
}
else {
this.config[n] = settings;
}

// Hide the textarea
textarea.style.display = "none";

// Override the width and height of the editor with the
// size given by the style attributes width and height
if(textarea.style.width) {
this.config[n].Width = textarea.style.width;
}
if(textarea.style.height) {
this.config[n].Height = textarea.style.height
}

// determine the width + height
var currentWidth = this.config[n].Width;
var currentHeight = this.config[n].Height;

// Calculate the width + height of the editor
var ifrmWidth = "100%";
var ifrmHeight = "100%";
if(currentWidth.search(/%/) == -1) {
ifrmWidth = currentWidth;
ifrmHeight = currentHeight;
}

// Create iframe which will be used for rich text editing
var iframe = '<table cellpadding="0" cellspacing="0" border="0" style="width:' + currentWidth + '; height:' + currentHeight + ';" class="tableTextareaEditor"><tr><td valign="top">\n'
+ '<iframe frameborder="0" id="wysiwyg' + n + '" class="iframeText" style="width:' + ifrmWidth + ';height:' + ifrmHeight + ';"></iframe>\n'
+ '</td></tr></table>\n';

// Insert after the textArea both toolbar one and two
textarea.insertAdjacentHTML("afterEnd", iframe);

// Pass the textarea's existing text over to the content variable
var content = textarea.value;
var doc = this.getEditorWindow(n).document;

// Replace all \n with <br>
if(this.config[n].ReplaceLineBreaks) {
content = content.replace(/(\r\n)|(\n)/ig, "<br>");
}

// Write the textarea's content into the iframe
doc.open();
doc.write(content);
doc.close();

// Set default style of the editor window
WYSIWYG_Core.setAttribute(doc.body, "style", this.config[n].DefaultStyle);
},

/**
* Replace the given textarea with wysiwyg editor
*
* @private
* @param {String} n The editor identifier (the textarea's ID)
* @param {Object} settings Object which holds the settings
*/
_generate: function(n, settings) {

// Get the textarea element
var textarea = $(n);
// Validate if textarea exists
if(textarea == null) {
alert("No textarea found with the given identifier (ID: " + n + ").");
return;
}

// Validate browser compatiblity
if(!WYSIWYG_Core.isBrowserCompatible()) {
if(this.config[n].NoValidBrowserMessage != "") { alert(this.config[n].NoValidBrowserMessage); }
return;
}

// Hide the textarea
textarea.style.display = 'none';

// Override the width and height of the editor with the
// size given by the style attributes width and height
if(textarea.style.width) {
this.config[n].Width = textarea.style.width;
}
if(textarea.style.height) {
this.config[n].Height = textarea.style.height
}

// determine the width + height
var currentWidth = this.config[n].Width;
var currentHeight = this.config[n].Height;

// Calculate the width + height of the editor
var toolbarWidth = currentWidth;
var ifrmWidth = "100%";
var ifrmHeight = "100%";
if(currentWidth.search(/%/) == -1) {
toolbarWidth = currentWidth.replace(/px/gi, "");
toolbarWidth = (parseFloat(toolbarWidth) + 2) + "px";
ifrmWidth = currentWidth;
ifrmHeight = currentHeight;
}

// Generate the WYSIWYG Table
// This table holds the toolbars and the iframe as the editor
var editor = "";
editor += '<div id="wysiwyg_div_' + n + '" style="width:' + currentWidth +';">';
editor += '<table border="0" cellpadding="0" cellspacing="0" class="tableTextareaEditor" id="wysiwyg_table_' + n + '" style="width:' + currentWidth + '; height:' + currentHeight + ';">';
editor += '<tr><td style="height:22px;vertical-align:top;">';

// Output all command buttons that belong to toolbar one
for (var j = 0; j < this.config[n].Toolbar.length;j++) {
if(this.config[n].Toolbar[j] && this.config[n].Toolbar[j].length > 0) {
var toolbar = this.config[n].Toolbar[j];

// Generate WYSIWYG toolbar one
editor += '<table border="0" cellpadding="0" cellspacing="0" class="toolbar1" style="width:100%;" id="toolbar' + j + '_' + n + '">';
editor += '<tr><td style="width:6px;"><img src="' + this.config[n].ImagesDir + 'seperator2.gif" alt="" hspace="3"></td>';

// Interate over the toolbar element
for (var i = 0; i < toolbar.length;i++) {
var id = toolbar[i];
if (toolbar[i]) {
if(typeof (this.config[n].DropDowns[id]) != "undefined") {
var dropdown = this.config[n].DropDowns[id];
editor += '<td style="width: ' + dropdown.width + ';">';
// write the drop down content
editor += this.writeDropDown(n, id);
editor += '</td>';
}
else {

// Get the values of the Button from the global ToolbarList object
var buttonObj = this.ToolbarList[toolbar[i]];
if(buttonObj) {
var buttonID = buttonObj[0];
var buttonTitle = buttonObj[1];
var buttonImage = this.config[n].ImagesDir + buttonObj[2];
var buttonImageRollover = this.config[n].ImagesDir + buttonObj[3];

if (toolbar[i] == "seperator") {
editor += '<td style="width: 12px;" align="center">';
editor += '<img src="' + buttonImage + '" border=0 unselectable="on" width="2" height="18" hspace="2" unselectable="on">';
editor += '</td>';
}
// View Source button
else if (toolbar[i] == "viewSource"){
editor += '<td style="width: 22px;">';

[rrecarte]

bue falta mucho mas de la mitad.. el hecho es que no puedo limitar el maximo a escribir por renglon....

gracias