Imprimir Página - como puedo hacer que mi web sea editable, pasar de javascript a jquery, ayuda!!!

como puedo hacer que sea editable una web, es decir que el texto e imagenes de la web las pueda retocar y escribir en el mismo navegador un texto y poderlo borrar sin utilizar campos ni nada es decir como esta web:

http://www.arsys.es/crear_web/producto.html (http://www.arsys.es/crear_web/producto.html)

algo para empezar y eso, ejemplos, etc que me sean de ayuda, gracias

conforme voy googleando voy encontrando respuestas a mis preguntas hecharme una mano de como introducir cambios en negrita etc:

http://www.cristalab.com/tutoriales/contenido-html-editable-con-html5-y-javascript-c102085l/

señores e conseguido algo pero utiliza javascript y jquery se podria pasar todo a JQUERY,quiero que se modifique cualquier <div> o debe estar dentro de un <iframe> una manita x favor:

<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>

<style>
.font-bold
{
   padding:0px 10px 0px 10px;
   font-weight:bold;
}
</style>

</head>
<body>

<div contentEditable="true">
   Acá puedes escribir
</div>

<div id="miDiv">
   <input type="button" value="boton"/>
   <a href="#" >Enlace</a>
   <input type="radio"/>
   <span>texto</span>
</div>

<a id="bold" class="font-bold">B</a>

<iframe id="textEditor" style="width:500px; height:170px;">
</iframe>

<script type="text/javascript">
//document.getElementById('miDiv').contentEditable = true;
$("#miDiv").get(0).contentEditable = "true";

$(document).ready(function(){
   document.getElementById('textEditor').contentWindow. document.designMode="on";
   document.getElementById('textEditor').contentWindow. document.close();
$("#bold").click(function(){

   if($(this).hasClass("selected"))
   {
   $(this).removeClass("selected");
   }else
   {
   $(this).addClass("selected");
   }
   boldIt();
   });

});

function boldIt()
   {
   var edit = document.getElementById("textEditor").contentWindow;
   edit.focus();
   edit.document.execCommand("bold", false, "");
   edit.focus();
   }

</script>

</body>

</html>

Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: tecasoft en 20 Marzo 2013, 19:55 pm