en un formulario hay una forma que cuando seleccione una palabra le pueda dar un etil

jor_0203 · #1 (**permalink**) 24/10/2011, 23:40

en un formulario hay una forma que cuando seleccione una palabra le pueda dar un estilo
<form id="form1" name="form1" method="post" action="">
<label>
<textarea name="textarea" id="textarea" cols="45" rows="5"></textarea>
</label>
<p>
<input type="submit" name="button" id="button" value="cambia de estilo a negritas " />

</p>
</form>
claro el estilo solo se aplica cuando selecciono la palabra y le doy clic al boton para que haga el cambie de estilo
mil gracias

IsaBelM · #2 (**permalink**) 25/10/2011, 04:39

panino te da la solución

Raziel_Ravenheart · #3 (**permalink**) 25/10/2011, 09:36

Cita:

Iniciado por IsaBelM

panino te da la solución

Excelente Aporte Isabel.

Lo leeré, por que con los textarea no estoy seguro que eso se pueda hacer, creo que estos solo tienen ese tipo de letra.

IsaBelM · #4 (**permalink**) 25/10/2011, 12:29

lo que quieres hacer es un editor de texto (wysiwyg o bbcode). en la liga que te dejé el editor es wysiwyg. en caso que quieras que sea bbcode, si es posible hacerlo en un textarea

jor_0203 · #5 (**permalink**) 25/10/2011, 20:57

prueben este codigo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Editor de texto</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<script language="JavaScript">
function Inicializar()
{
editor.document.designMode = 'On';
}
function Negrita()
{
editor.document.execCommand('bold', false, null);
}
function Copiar()
{
editor.document.execCommand('copy',false, null);
}
function Cortar()
{
editor.document.execCommand('cut',false, null);
}
function Pegar()
{
editor.document.execCommand('paste',false, null);
}
function Italica()
{
editor.document.execCommand('italic',false, null);
}
function Subrayado()
{
editor.document.execCommand('underline',false, null);
}
function Enlace()
{
editor.document.execCommand('CreateLink');
}

</script>

</head>
<body onLoad="Inicializar()">

<form name="form1" id="form1" method="post" action="">
<h3>Editor de texto</h3>
<p> <a onclick="Copiar()">copiar</a>
<a onclick="Cortar()">cortar</a>

<a onclick="Italica()">italica</a>
<a onclick="Enlace()">enlace</a>
<a onclick="Negrita()">negrita</a>
<a onclick="Pegar()">pegar</a>
<a onclick="Subrayado()">subrayado</a>

</p>

</form>
<iframe id="editor" name="editor" style="width: 500px; height:500px" scrolling="auto" frameborder="1"></iframe>

</body>
</html>

jor_0203 · #6 (**permalink**) 25/10/2011, 23:32

hay otro codigo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>editor</title>
<style>
input{
border:1px solid #000;
background:#CCCCCC;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:9px;
margin-bottom:3px;
}
</style>
<script>
var editor;
function $(id){
return document.getElementById(id);
}
function formato(f){
editor.execCommand(f, false, null);
}
function rev(t) {
return t.split("<").join("<").split(">").join(">"). split("\"").join(""");
}
function insertarEnlace(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.execCommand("CreateLink",false,u);
}
function insertarImagen(){
var u;
if(!(u=prompt('ingresar url','http://')))return;
editor.body.focus();
editor.execCommand("InsertImage",false,u);
}
function color(c){
editor.execCommand("forecolor",false,c);
}

function colorFondo(c){
var h=window.ActiveXObject?'backcolor':'hilitecolor';
editor.execCommand(h,false,c);
}
function inHTML(){
var u,u2;
if(!(u=prompt('ingresar html','')))return;

try{
editor.execCommand("inserthtml",false,u);
}catch(e){
try{
editor.body.focus();
u2=editor.selection.createRange();
u2.pasteHTML(u);
}catch(E){
alert('nop');
}
}
}

function htmlOEditor(e){
e=e || window.event;
ob=e.target || e.srcElement
$('edit').style.display=(ob.value=='html')?'none': 'block';
$('ht').style.display=(ob.value!='html')?'none':'b lock';
$('ht').innerHTML=rev(editor.body.innerHTML);
ob.value=(ob.value=='html')?'editor':'html';
}
window.onload=function(){

editor=$('edit').contentDocument || $('edit').contentWindow.document;
editor.designMode='on';
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<input type="button" name="Submit" value="N" onclick="formato('bold')" />
<input type="button" name="Submit2" value="C" onclick="formato('italic')" />
<input type="button" name="Submit3" value="S" onclick="formato('underline')" />
<input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" />
<input type="button" name="Submit5" value="link" onclick="insertarEnlace()" />
<input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" />
<input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" />
<input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" />
<input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" />
<input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" />
<input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" />

<input type="button" name="Submit12" value="insertar html" onclick="inHTML()" />
<br />
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe>
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div>
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div>
</form>
</body>
</html>

IsaBelM · #7 (**permalink**) 26/10/2011, 05:56

jor_0203, el último código que dejas, es el mismo que está en la liga que dejé en mi primer post.

al menos debería de dejar los créditos (en caso que los tuviera) o hacer referencia al autor del código, más cuando es uno de los grandes por estos lares

jor_0203 · #8 (**permalink**) 26/10/2011, 15:52

Cita:

Iniciado por IsaBelM

jor_0203, el último código que dejas, es el mismo que está en la liga que dejé en mi primer post.

al menos debería de dejar los créditos (en caso que los tuviera) o hacer referencia al autor del código, más cuando es uno de los grandes por estos lares

el segundo código es de isabel
ya que es el mejor
mil gracias isabe m
gran aporte
se lo dejo a mis cuates para que vean la grandeza de este aporte

IsaBelM · #9 (**permalink**) 26/10/2011, 16:17

Cita:

Iniciado por jor_0203

el segundo código es de isabel
ya que es el mejor
mil gracias isabe m
gran aporte
se lo dejo a mis cuates para que vean la grandeza de este aporte

no, no...... te equivocas, el código de ambas ligas es de Panino5001

de hecho en mi primer post reza

Cita:

Iniciado por IsaBelM

panino te da la solución

jor_0203 · #10 (**permalink**) 26/10/2011, 22:28

Cita:

Iniciado por IsaBelM

no, no...... te equivocas, el código de ambas ligas es de [URL="http://www.forosdelweb.com/miembros/panino5001/"]Panino5001[/URL]

de hecho en mi primer post reza

no entiendo isabel el código lo encontré en internet, y el que me diste es de piano, pero si busque en su portal un no encontré mas uno.
mi pregunta seria donde puedo encontrar mas cosas de el
ya que cheque su portal y no vi mas que solo este caso
mil gracias

IsaBelM · #11 (**permalink**) 27/10/2011, 04:34

en la sección espacio programación tienes códigos de php, actionscript y javascript