显示文档以使用javascript编写文字

Question

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

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

Answer 1

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

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

实际上，我可以直接在浏览器中编辑文本并根据需要更改它。 当您尝试实现诸如粗体或斜体文本之类的功能时，这将派上用场，而且div元素通常比大文本区域或输入字段更容易样式化。 注意，也不要忘记XSS。

Answer 2

您可能会对在Google文档中获得类似页面的外观感兴趣。 如果是这样，请查看有关使用Javascript构建协作文本编辑器的非常不错的教程。 它写得很好，并逐步介绍了概念，甚至还有GitHub repo 。

我将示例简化为可以播放的单个文件HTML文件。 此示例还使用Armen的答案中提到的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>

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

显示文档以使用javascript编写文字

问题描述

3 个解决方案

解决方案1
2 2017-10-30 20:08:49

解决方案2
1 已采纳 2017-10-30 21:18:24

解决方案3
0 2017-10-30 20:37:09

显示文档以使用javascript编写文字

问题描述

3 个解决方案

解决方案1 2 2017-10-30 20:08:49

解决方案2 1 已采纳 2017-10-30 21:18:24

解决方案3 0 2017-10-30 20:37:09

解决方案1
2 2017-10-30 20:08:49

解决方案2
1 已采纳 2017-10-30 21:18:24

解决方案3
0 2017-10-30 20:37:09