Showing a document to write text on with javascript

Question

I am attempting to design a very basic word processor. I want to have a "page" shown in the background (like you might see on Google Docs, or MS Word) that your text is written on.

How do I draw this page? Should it be an SVG? A stylized DIV? A big canvas? I am very new to designing using the DOM, so any help is appreciated.

" I want to have a "page" shown in the background" no clue what that means.... — epascarello, Oct 30 '17 at 20:20
If you try out [Google Docs](https://docs.google.com) then you will see that text is entered into a white rectangle that is on top of some gray background. There is also some shading around the rectangle. This gives the impression of typing onto a sheet of paper. Perhaps this visual aspect is why @HomestuckBrother mentioned the idea of using SVG. — Rick Majpruz, Oct 30 '17 at 20:33
Yes, a white rectangle that I would enter text on is what I'm after, sorry about the lack of clarity. — HomestuckBrother, Oct 30 '17 at 22:06

score 2 · Answer 1 · answered Oct 30 '17 at 20:08

2

Take a look at the contenteditable property here. This actually allows some elements content to be edited by the end user. For example, if I have

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

I can actually edit the text and change it as it fits my needs, right from the browser. This will come in handy when you try to implement features like bold or italic text, and a div element is also much easier to generally style than a huge textarea or input field. As a notice, also don't forget about XSS.

answered Oct 30 '17 at 20:08

Armen Vardanyan

3,214
1
13
34

1

And [here](https://stackoverflow.com/questions/8086847/div-contenteditable-xss) is a Stack Overflow article on handling XSS ie [cross-site scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks. – Rick Majpruz Oct 30 '17 at 20:16

Rick Majpruz · Accepted Answer · 2017-10-30T22:36:39.533

You may be interested in the getting the page-like appearance at Google Docs. If so, then check out this really nice tutorial on building a collaborative text editor with Javascript. It's well written and introduces concepts gradually and even has a GitHub repo.

I streamlined the example into a single file HTML file that you can play with. This example also uses the contenteditable property mentioned in Armen's answer. By the way, the page-like effect is achieved via CSS which I've included within the HTML file using the <style> tag.

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

This is exactly what I'm after. I wasn't quite clear, the page I need to display is really just a while rectangle, and this example is exactly that. Thank you. — HomestuckBrother, Oct 30 '17 at 22:03

score 0 · Answer 3 · answered Oct 30 '17 at 20:37

You can use a textarea element and set a specific height and width.

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>

Showing a document to write text on with javascript

3 Answers3