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

我正在尝试设计一个非常基本的字处理器。我想在后台显示一个“页面”（就像你在谷歌文档或微软Word上看到的那样），你的文本就是在这个页面上写的

---

我怎样画这一页？它应该是SVG吗？风格化的DIV？大画布？我对使用DOM进行设计非常陌生，因此非常感谢您的帮助。

请查看

contenteditable

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

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

你好！

实际上，我可以直接从浏览器编辑文本并根据需要进行更改。当您尝试实现诸如粗体或斜体文本之类的功能时，这会很方便，而且div元素通常比巨大的文本区域或输入字段更容易设置样式。

---

请注意，也不要忘记XSS。

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

const bold=document.getElementById（'bold'）；
const text=document.getElementById（'text'）；
bold.addEventListener（'单击'，（）=>{
如果（text.style.fontwweight！=“加粗”）{
text.style.fontwweight='bold'；
}
否则{
text.style.fontwweight='normal'；
}
});
textarea{
高度：500px；
宽度：300px；
}
粗体


您可能对在中获得类似页面的外观感兴趣。如果是这样的话，那么看看这个关于构建一个。它写得很好，逐渐引入了一些概念，甚至有一个

我将示例简化为一个可以使用的单个文件HTML文件。此示例还使用中提到的
contenteditable
属性。顺便说一下，类似页面的效果是通过CSS实现的，我使用
标记将CSS包含在HTML文件中



正文{字号：14px；行高：20px；背景：#e8e8e8；}
.ribbon{高度：200px；背景：#3F51B5；}
.editor{宽度：60%；填充：40px 28px；最小高度：300px；
背景：#fff；边距：0自动；位置：相对；
顶部：-150px；字体大小：24px；}
document.getElementById（'doc'）.focus（）；
这是一篇关于处理XSS ie攻击的堆栈溢出文章。“我想在背景中显示一个“页面”，不知道这意味着什么……如果你尝试一下，你会看到文本被输入到灰色背景之上的白色矩形中。矩形周围还有一些阴影。这给人的印象是在一张纸上打字。也许这就是@HomestuckBrother提到使用SVG的原因。是的，我想要的是一个白色的矩形，我想在上面输入文本，很抱歉不够清晰。这正是我想要的。我不太清楚，我需要显示的页面实际上只是一个稍长的矩形，而这个例子正是这样。非常感谢。