Desginmode - Contenido de la linea

iPunto · #1 (**permalink**) 29/11/2006, 10:21

Estoy creando un editor web, similar al fckEditor o hmtlArea, pero simplificando algunas funciones.

Para ello empleo la propiedad DesginMode dentro de un iframe.

El tema es que necesitaría saber el contenido de la linea en la que se encuentra el cursor, tanto el Firefox como en IE.

He estado revisando la documentación del elemento Range del DOM, pero con firefox no veo nada que me pueda valer. Para IE he encontrado algunas cosas, pero porque emplea funciones del DOM propio del IE, y no del W3C.

¿Alguna pista de como se podría implementar?

caricatos · #2 (**permalink**) 29/11/2006, 10:30

Hola:

Lo que se puede saber fácilmente con los navegadores normales es el sitio donde se encuentra el cursor con la propiedad selectionStart... y si hay texto seleccionado puede saberse cuál es con la diferencia entre selectionEnd y selectionStart (siempre que hablemos de campos de texto)

Tal vez el script de esta página: Editor de texto pueda servirte...

Saludos

iPunto · #3 (**permalink**) 30/11/2006, 11:20

De las primeras busquedas que hice en los foros di con tu editor.

Las propiedades que me dices me serían validas si supiera el nº de linea en el que estoy, y cuantos caracteres hay por linea. De ese modo seleccionaría desde el primer carácter de la linea hasta el último y tendría el contenido.

Tengo el siguiente código que funciona en el IE, el cual da la linea y columna del cursor, pero no consigo hacerlo funcionar en FF.

Código:

<!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 content="text/html; charset=ISO-8859-1" http-equiv="content-type" />
  <title>Pruebas Cursor Position</title>


  <script language="JavaScript" type="text/javascript">
<!--
function initPosition(textBox) {
var storedValue = textBox.value;
textBox.value = "";
textBox.select();
var caretPos = document.selection.createRange();
textBox.__boundingTop = caretPos.boundingTop;
textBox.__boundingLeft = caretPos.boundingLeft;
textBox.value = " ";
textBox.select();
caretPos = document.selection.createRange();
textBox.__boundingWidth = caretPos.boundingWidth;
textBox.__boundingHeight = caretPos.boundingHeight;
textBox.value = storedValue;
}
function storePosition(textBox) {
var caretPos = document.selection.createRange();
var boundingTop = (caretPos.offsetTop + textBox.scrollTop) - textBox.__boundingTop;
var boundingLeft = (caretPos.offsetLeft + textBox.scrollLeft) - textBox.__boundingLeft;
textBox.__Line = (boundingTop / textBox.__boundingHeight) + 1;
textBox.__Column = (boundingLeft / textBox.__boundingWidth) + 1;
} function updatePosition(textBox) {
storePosition(textBox);
document.forms[0].txtLine.value = textBox.__Line;
document.forms[0].txtColumn.value = textBox.__Column;
}
//-->
  </script>
  <style type="text/css">
body, td, tg, input, select {
font-family: Verdana;
font-size: 10px;
}
  </style>
</head>

<body onload="initPosition(document.forms[0].txtLayoutViewer)">

<form>
  <table cellpadding="3" cellspacing="0">

    <tbody>
      <tr>

        <td colspan="3">
Change Font Size
        <select onchange="this.form.txtLayoutViewer.style.fontSize = this.options[this.selectedIndex].value; initPosition(this.form.txtLayoutViewer);">
        <option value="10">10px</option>
        <option value="12">12px</option>
        <option value="14">14px</option>
        <option value="16">16px</option>
        <option value="18">18px</option>
        <option value="20">20px</option>
        <option value="24">24px</option>
        <option value="36">36px</option>
        </select>

        </td>

      </tr>

      <tr>

        <td colspan="3">
        <textarea name="txtLayoutViewer" onmouseup="updatePosition(this)" onmousedown="updatePosition(this)" onkeyup="updatePosition(this)" onkeydown="updatePosition(this)" onfocus="updatePosition(this)" rows="15" cols="75">Lorem
ipsum dolor sit amet, consectetuer adipiscing elit. Donec ornare
aliquam quam. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Pellentesque et quam in dui
consequat tempor. Etiam lorem lectus, sollicitudin laoreet, tincidunt
nec, pharetra in, magna. Mauris accumsan velit et augue. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus.</textarea></td>

      </tr>

      <tr>

        <td width="70%">&nbsp;
</td>

        <td width="10%">
Line <input name="txtLine" style="width: 25px;" readonly="readonly" type="text" /></td>

        <td width="20%">
Column <input name="txtColumn" style="width: 25px;" readonly="readonly" type="text" /></td>

      </tr>

    </tbody>
  </table>

</form>

</body>

</html>