En este artículo, demostraremos el efecto de la opción externalControl de la clase InPlaceEditor mediante el uso de una biblioteca de JavaScript llamada script.aculo.us que nos ayuda a agregar un elemento que activará la edición del editor en el lugar.
Sintaxis:
Ajax.InPlaceEditor( element, url, { size: 100 });
Enfoque 1: Para demostrar el uso de esta función, hemos escrito un pequeño fragmento de código. Hemos escrito un pequeño código JavaScript que creará un editor en el lugar para elementos específicos. Al hacer clic en el botón, verá que se activa el editor en el lugar y pasa al modo de edición.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import the libraries -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
</head>
<body>
<p id="editme">Click me</p>
<button id="editbutton">
Edit
</button>
<!-- Script for the JavaScript
to initialize the objects -->
<script type="text/javascript">
new Ajax.InPlaceEditor(
'editme', 'example',
{ externalControl: 'editbutton' }
);
</script>
</body>
</html>
Producción:
Enfoque 2: en este enfoque, hemos escrito un pequeño código JavaScript que creará un editor en el lugar para elementos específicos, y luego haremos una solicitud a un archivo y buscaremos el contenido de ese archivo. Crearemos un archivo con el nombre test.html con un texto simple GeeksforGeeks en él. Al hacer clic en el botón, verá que se activa el editor en el lugar y entra en modo de edición. Haremos clic en Aceptar para obtener el contenido del archivo.
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Import the libraries -->
<script type="text/javascript"
src="prototype.js">
</script>
<script type="text/javascript"
src="scriptaculous.js">
</script>
</head>
<body>
<p id="editme">Click me</p>
<button id="editbutton">
Edit
</button>
<!-- Script to initialize the objects -->
<script type="text/javascript">
new Ajax.InPlaceEditor(
'editme', '/test.html',
{ externalControl: 'editbutton' }
);
</script>
</body>
</html>
Producción:
