Estoy intentando diseñar un procesador de textos muy básico. Quiero que aparezca una "página" en segundo plano (como puede ver en Google Docs o MS Word) en la que está escrito su texto.

¿Cómo dibujo esta página? ¿Debería ser un SVG? ¿Un DIV estilizado? Un gran lienzo? Soy muy nuevo en el diseño con DOM, por lo que agradezco cualquier ayuda.

2
HomestuckBrother 30 oct. 2017 a las 23:04

3 respuestas

La mejor respuesta

Puede que le interese obtener la apariencia de página en Google Docs. Si es así, consulte este tutorial realmente agradable sobre cómo crear un editor de texto colaborativo con Javascript. Está bien escrito e introduce conceptos gradualmente e incluso tiene un repositorio de GitHub.

Simplifiqué el ejemplo en un solo archivo HTML con el que puedes jugar. Este ejemplo también utiliza la propiedad contenteditable mencionada en Respuesta de Armen. Por cierto, el efecto de página se logra a través de CSS que he incluido dentro del archivo HTML usando la etiqueta <style>.

<html><head><style>
  body { font-size: 14px; line-height: 20px; background: #e8e8e8; }
  .ribbon { height: 200px; background: #3F51B5; }
  .editor { width: 60%; padding: 40px 28px; min-height: 300px;
    background: #fff; margin: 0 auto; position: relative;
    top: -150px; font-size: 24px; }
</style>
<body>
  <div class="ribbon"></div>
  <div id="doc" class="editor" contenteditable="true"></div>
<script>document.getElementById('doc').focus();</script>
</head></body></html>
1
Rick Majpruz 30 oct. 2017 a las 22:36

Puede usar un elemento de área de texto y establecer un alto y ancho específicos.

const bold = document.getElementById('bold');
const text = document.getElementById('text');

bold.addEventListener('click', () => {
  if (text.style.fontWeight != 'bolder') {
    text.style.fontWeight = 'bolder';
  }
  else {
    text.style.fontWeight = 'normal';
  }
});
textarea {
  height: 500px;
  width: 300px;
}
<button id="bold">bold</button>
<br>
<textarea id="text" placeholder="write text here!"></textarea>
0
hannacreed 30 oct. 2017 a las 20:37

Eche un vistazo a la propiedad contenteditable aquí. En realidad, esto permite que el usuario final edite el contenido de algunos elementos. Por ejemplo, si tengo

<div contenteditable="true">Hello!</div>

De hecho, puedo editar el texto y cambiarlo según mis necesidades, directamente desde el navegador. Esto será útil cuando intente implementar funciones como negrita o cursiva , y un elemento div también es mucho más fácil de diseñar en general que un área de texto o campo de entrada enorme. Como aviso, tampoco te olvides de XSS.

2
Armen Vardanyan 30 oct. 2017 a las 20:08