como insertar una imagen con width y height

tecasoft · 17 Abril 2013, 16:11 PM

estoy haciendo un CMS, como incluiriais una imagen, que eso se, pero con widht, height, border, etc, tengo esto y solo incluyo las imagenes originales sin tamaño ni nada:

Código [Seleccionar]


$('#insertar_imagen').click(function(){
 var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
 if(imgSrc != null){
  document.execCommand('insertimage',false, imgSrc);
  
 }
  return false;
 
});

he probado con esto y sin exito me borra o me lo escribe al final del contenedor contentEditable="true":

Código [Seleccionar]


$("#contenedor").append("<img src='imagenes_clientes/Text-Heading-1-32.png'>");

Código [Seleccionar]


$("#contenedor").html("<img src='imagenes_clientes/Text-Heading-1-32.png'>");

#!drvy · 17 Abril 2013, 17:48 PM

Citarhe probado con esto y sin exito me borra o me lo escribe al final del contenedor contentEditable="true":

Em... html() sobreescribe todo lo que haya dentro del contenedor y append() añade al final de dicho contenedor.. no te sorprendas porque hacen lo que tienen que hacer xD.

La pregunta es... donde lo quieres incluir ?
Lo de los parámetros:

Código (html4strict) [Seleccionar]

<img src"ruta" width="ancho" height="alto" alt="texto alternativo" style="border:bla bla bla" />

Saludos

tecasoft · 17 Abril 2013, 20:11 PM

es un wysiwyg dentro de contenedor donde en cualquier parte donde quiera escribir:

Código (html) [Seleccionar]


<html>
<head>

<meta charset="utf-8">
 <title>Tecasoft.com | Editor</title>
<link href="css/smoothness/jquery-ui-1.9.2.custom.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>

<link rel="shortcut icon" type="image/x-icon" href="http://www.tecasoft.com/imagenes/favicon.ico" />

<link rel="StyleSheet" type="text/css" href="css/estilos_clientes.css">

</head>
<body>

<div id="editor_contenido">

<table>
<tr>

<td><a href="editor.php" title="Vas a la pagina principal del editor"><b>Inicio</b></a>&nbsp;&nbsp;&nbsp;</td>

<form>

 <td><input type="button" class="boton_publicar" title="Publicar la web en la que estas" value="Publicar">&nbsp;&nbsp;&nbsp;</td>

</form>

<form action="editor_vista_previa.php" method="post" target="_blank" name="form_editor">

 <td><input type="button" class="boton_vista_previa" title="Vista previa de la pagina web en la que estas" value="Vista previa">&nbsp;&nbsp;&nbsp;</td>

 <input type="hidden" name="texto">

</form>

 <td><a id="negrita" href=""><img src="imagenes_clientes/button-bold.png" alt="Negrita" title="Negrita" class="negrita"></a>&nbsp;</td>
 <td><a id="cursiva" href=""><img src="imagenes_clientes/button-italic.png" alt="Cursiva" title="Cursiva" class="cursiva"></a>&nbsp;</td>
 <td><a id="tachado" href=""><img src="imagenes_clientes/button-strikethrough.png" alt="Tachado" title="Tachado" class="tachado"></a>&nbsp;</td>
 <td><a id="subrayar" href=""><img src="imagenes_clientes/button-underline.png" alt="Subrayar" title="Subrayar" class="subrayar"></a>&nbsp;</td>

<td><img src="imagenes_clientes/calendar.gif" alt="Maquetacion" title="Maquetacion" class="maquetacion">&nbsp;</td>

 <td><a id="color" href=""><img src="imagenes_clientes/check-green.gif" alt="Color" title="Color" class="color"></a>&nbsp;</td>

 <td><a id="lista_con_vinetas" href=""><img src="imagenes_clientes/Text-List-Bullets-32.png" alt="Lista con viñetas" title="Lista con viñetas" width="20" height="20" class="lista_con_vinetas"></a>&nbsp;</td>
 <td><a id="lista_numerada" href=""><img src="imagenes_clientes/Text-List-Numbers-32.png" alt="Lista numerada" title="Lista numerada" width="20" height="20" class="lista_numerada"></a>&nbsp;</td>

 <td><a id="alinear_izquierda" href=""><img src="imagenes_clientes/Text-Align-Left-32.png" alt="Alinear a la izquierda" title="Alinear a la izquierda" width="20" height="20" class="alinear_izquierda"></a>&nbsp;</td>
 <td><a id="centrar" href=""><img src="imagenes_clientes/Text-Align-Center-32.png" alt="Centrar" title="Centrar" width="20" height="20" class="centrar"></a>&nbsp;</td>
 <td><a id="alinear_derecha" href=""><img src="imagenes_clientes/Text-Align-Right-32.png" alt="Alinear a la derecha" title="Alinear a la derecha" width="20" height="20" class="alinear_derecha"></a>&nbsp;</td>

 <td><a id="h1" href=""><img src="imagenes_clientes/Text-Heading-1-32.png" alt="H1" title="H1" width="20" height="20" class="h1"></a>&nbsp;</td>
 <td><a id="h2" href=""><img src="imagenes_clientes/Text-Heading-2-32.png" alt="H2" title="H2" width="20" height="20" class="h2"></a>&nbsp;</td>
 <td><a id="h3" href=""><img src="imagenes_clientes/Text-Heading-3-32.png" alt="H3" title="H3" width="20" height="20" class="h3"></a>&nbsp;</td>
 <td><a id="h4" href=""><img src="imagenes_clientes/Text-Heading-4-32.png" alt="H4" title="H4" width="20" height="20" class="h4"></a>&nbsp;</td>
 <td><a id="h5" href=""><img src="imagenes_clientes/Text-Heading-5-32.png" alt="H5" title="H5" width="20" height="20" class="h5"></a>&nbsp;</td>
 <td><a id="h6" href=""><img src="imagenes_clientes/Text-Heading-6-32.png" alt="H6" title="H6" width="20" height="20" class="h6"></a>&nbsp;</td>

 <td><a id="insertar_enlace" href=""><img src="imagenes_clientes/Textfield-Add-32.png" alt="Insertar enlace" title="Insertar enlace" width="20" height="20" class="insertar_enlace"></a>&nbsp;</td>
 <td><a id="eliminar_enlace" href=""><img src="imagenes_clientes/Textfield-Delete-32.png" alt="Eliminar enlace" title="Eliminar enlace" width="20" height="20" class="eliminar_enlace"></a>&nbsp;</td>

 <td><a id="hr" href=""><img src="imagenes_clientes/Text-Horizontalrule-32.png" alt="Barra horizontal" title="Barra horizontal" width="20" height="20" class="hr"></a>&nbsp;</td>

 <td><a id="insertar_imagen" href=""><img src="imagenes_clientes/lightning.png" alt="Insertar imagen" title="Insertar imagen" class="insertar_imagen"></a>&nbsp;</td>

<form>

 <td><input type="button" class="boton_opciones" title="Cambia el diseño de la web y demas opciones" value="Opciones"></td>

</form>

</tr>
</table>

<hr>
</div>


<div id="contenedor">
 <center>

  <div id="cabecera">
  
   <div id="logo">
   
   <a href="http://www.tecasoft.com"><img src="http://www.tecasoft.com/imagenes/logotipo.png" border="0" width="270" height="90" alt="Tecasoft.com, servicio informatico"></a>
   
   </div>
  
   <div id="anexo">
   
   <img src="imagenes_clientes/flag-spain.png">&nbsp;&nbsp;<a href="http://www.tecasoft.com/clientes/anexo.php" class="anexo" title="Cambiar idioma">Spanish (Cambiar ▼)</a>   
   
   </div>
    
  </div>

<!-- Menu navegador -->

  <div id="navegador">
  
  
  
  
  
  
  </div>

<!-- El contenido central -->

 <div id="contenido">
 
  <h1 class="naranja">Inicie Sesión</h1>

  <form action="login.php" method="post" name="form1">
  
  <label for="usuario">Usuario:</label>
  <input type="text" name="usuario" id="tv_3" class="tv_box text ui-widget-content ui-corner-all">
  &nbsp;&nbsp;&nbsp;
  <label for="contrasena">Contraseña:</label>
  <input type="password" name="contrasena" id="tv_4" class="tv_box text ui-widget-content ui-corner-all"><br><br>



  <input type="button" class="tv_sim" value="1">
  <input type="button" class="tv_sim" value="2">
  <input type="button" class="tv_sim" value="3">
  <input type="button" class="tv_sim" value="4">
  <input type="button" class="tv_sim" value="5">
  <input type="button" class="tv_sim" value="6">
  <input type="button" class="tv_sim" value="7">
  <input type="button" class="tv_sim" value="8">
  <input type="button" class="tv_sim" value="9">
  <input type="button" class="tv_sim" value="0">
  
  <input type="button" id="backspace" value="←">
  <br>

<!-- Cambia a mayusculas y minusculas -->
  <input type="button" id="caps" value="Bloq.Mayus">
<!-- End -->

  <input type="button" class="tv_let" value="q">
  <input type="button" class="tv_let" value="w">
  <input type="button" class="tv_let" value="e">
  <input type="button" class="tv_let" value="r">
  <input type="button" class="tv_let" value="t">
  <input type="button" class="tv_let" value="y">
  <input type="button" class="tv_let" value="u">
  <input type="button" class="tv_let" value="i">
  <input type="button" class="tv_let" value="o">
  <input type="button" class="tv_let" value="p">
  <br>
  <input type="button" class="tv_let" value="a">
  <input type="button" class="tv_let" value="s">
  <input type="button" class="tv_let" value="d">
  <input type="button" class="tv_let" value="f">
  <input type="button" class="tv_let" value="g">
  <input type="button" class="tv_let" value="h">
  <input type="button" class="tv_let" value="j">
  <input type="button" class="tv_let" value="k">
  <input type="button" class="tv_let" value="l">
  <input type="button" class="tv_let" value="ñ">
  <br>
  <input type="button" class="tv_let" value="z">
  <input type="button" class="tv_let" value="x">
  <input type="button" class="tv_let" value="c">
  <input type="button" class="tv_let" value="v">
  <input type="button" class="tv_let" value="b">
  <input type="button" class="tv_let" value="n">
  <input type="button" class="tv_let" value="m">
  
  <input type="button" class="tv_sim" value="-">
  <input type="button" class="tv_sim" value="_">
  <input type="button" class="tv_sim" value="@">
  <input type="button" class="tv_sim" value="#">


  <br><br>
  <a href="" class="anexo">¿Has olvidado tu contraseña?</a>
  &nbsp;&nbsp;&nbsp;  
  <input type="submit" class="boton" value="Iniciar sesión">
  </form>
 </div>
  
<!-- Pie Pagina --> 
  
  <div id="pie">

  <hr>

  <div id="pie-izq">
  
  <a href="http://www.tecasoft.com/legal.html" class="pie-izq" title="Condiciones Generales de Contratación">Legal &nbsp;|&nbsp;</a> 
  <a href="http://www.tecasoft.com/proteccion-de-datos.html" class="pie-izq" title="Protección de datos personales">Proteccion de datos &nbsp;|&nbsp;</a>
  <a href="http://www.tecasoft.com/central-de-soporte.html" class="pie-izq" title="Documentación de ayuda">Central de soporte &nbsp;|&nbsp;</a>
  <a href="http://www.tecasoft.com/sitemap.html" class="pie-izq" title="Todos los enlaces web">Mapa web &nbsp;|&nbsp;</a>
  <span class="pie-izq">Rotacion soporte:  &nbsp;|&nbsp;</span>
  <span class="pie-izq">Hora: </span>
   
  
  </div>

  <div id="pie-der">

  <a href="http://www.tecasoft.com/empresas-grupo.html" class="pie-der" title="Nuestro grupo empresarial">Empresas del grupo: anonimo S.L</a>
  
  
  </div>
 
 <br><br> 
 
 </div>
  
 
 </center>

</div>

<script type="text/javascript" >

$(".tv_sim").button();
$(".tv_let").button();
$("#backspace").button();
$("#caps").button();
$(".boton").button();
</script>

<script type="text/javascript" src="js/wysiwyg.js"></script>

</body>
</html>

tecasoft · 27 Abril 2013, 00:32 AM

encontre esto:

Código [Seleccionar]


$('#insertar_imagen').click(function(){
 
 var imgSrc = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
 if(imgSrc != null){
  document.execCommand('insertimage',false, imgSrc);
  
  $("#contenedor").contents().find("img").attr("width", "290px");
  //$("#contenedor").contents().find("#" + id).attr("width", "290px");
 }
  return false;
 
});

en esta direccion pero como hago para que no me cambien todas las imagenes(img):

http://www.webdesignerforum.co.uk/topic/61397-execcommandinsertimage-false-myvar;/

#!drvy · 27 Abril 2013, 00:53 AM

Has leido la tercera respuesta de ese link que has dejado ?

Saludos

tecasoft · 27 Abril 2013, 15:52 PM

he probado la parte tercera toda y nada, este codigo no hace nada tampoco.He probado de multiples formas utilizando la tercera parte y nada, no consigo ningun resultado,puedes hecharle un vistazo haber que te funciona ati, utilizo chrome:

Código [Seleccionar]


$("#contenedor").contents().find("#" + id).attr("width", "290px");

tecasoft · 27 Abril 2013, 16:34 PM

ya parece que funciona lo he hecho asi:

Código [Seleccionar]


$('#insertar_imagen').click(function(){
 
 var img = prompt("Introduzca la localizacion de la imagen: ej. imagenes/logotipo.png","");
 if(img != null){ 
 var img="<img src=" + img + " width='270' height='90'>";
 document.execCommand('inserthtml',false, img);
 }
return false;
 
});

ves alguna anomalia¿?