显示要使用 javascript 在其上写入文本的文档答案

【问题标题】：Showing a document to write text on with javascript显示要使用 javascript 在其上写入文本的文档
【发布时间】：2017-10-30 20:04:28
【问题描述】：

我正在尝试设计一个非常基本的文字处理器。我希望在背景中显示一个“页面”（就像您可能在 Google Docs 或 MS Word 上看到的那样），您的文本就是在上面写的。

如何绘制此页面？它应该是SVG吗？一个程式化的DIV？大画布？我对使用 DOM 进行设计非常陌生，因此非常感谢任何帮助。

【问题讨论】：

"我想在后台显示一个"页面""不知道这是什么意思....
如果您尝试Google Docs，您将看到文本被输入到位于一些灰色背景之上的白色矩形中。矩形周围也有一些阴影。这给人一种在纸上打字的印象。也许这个视觉方面是@HomestuckBrother 提到使用 SVG 的原因。
是的，我要在其上输入文本的白色矩形是我所追求的，对不够清晰感到抱歉。

标签： javascript dom svg text

【解决方案1】：

查看contenteditable 属性here。这实际上允许最终用户编辑某些元素内容。例如，如果我有

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

实际上，我可以直接从浏览器编辑文本并根据需要进行更改。当您尝试实现 bold 或 italic 文本等功能时，这将派上用场，而且 div 元素通常也比巨大的文本区域或输入字段更容易设置样式。作为一个通知，也不要忘记 XSS。

【讨论】：

而here 是一篇关于处理 XSS 即 cross-site scripting 攻击的 Stack Overflow 文章。

【解决方案2】：

您可能有兴趣在Google Docs 获得类似页面的外观。如果是这样，请查看这个关于构建collaborative text editor with Javascript 的非常好的教程。它写得很好，逐渐引入概念，甚至还有GitHub repo。

我将示例简化为一个可以播放的单文件 HTML 文件。此示例还使用了Armen's answer 中提到的contenteditable 属性。顺便说一句，类似页面的效果是通过 CSS 实现的，我使用 <style> 标记将其包含在 HTML 文件中。

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

【讨论】：

这正是我所追求的。我不是很清楚，我需要显示的页面实际上只是一个矩形，这个例子就是这样。谢谢。

【解决方案3】：

您可以使用 textarea 元素并设置特定的高度和宽度。

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>

【讨论】：