HTML / Javascript 自动 ContentEditable 标签？答案

【问题标题】：HTML / Javascript Automatic ContentEditable Tags?HTML / Javascript 自动 ContentEditable 标签？
【发布时间】：2018-03-12 00:51:10
【问题描述】：

我正在尝试为日记构建一个基于浏览器的基本文本编辑器，我想知道是否有人能指出如何设置 ContentEditable 标签的正确方向？

目前我一直在关注本指南：

https://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/

让它工作，但是它需要你输入文件，实际上输入类似<h1>TEST</h1>的东西，然后你才能重新打开文件并编辑上述文本。

我正在寻找一种输入<h1> 的方法，浏览器会识别它并将以下文本转换为标题，<p> 也是如此。

总而言之，我希望能够做到以下几点：

打开 HTML 文件，写入 <h1>，然后浏览器识别出我正在输入标题，<p>，然后浏览器识别出我正在输入段落。

非常欢迎任何帮助，我对此还是很陌生，我假设它需要 Javascript。

【问题讨论】：

标签： javascript html tags contenteditable

【解决方案1】：

这可能会变得非常棘手，因为您必须基本上监控对可编辑区域的每一次更改，并且因为 HTML 标记包含了它们的内容 - 所以动态更新意味着设置无效的 HTML。这是一段粗略的代码，可以满足您的描述，但它有很多限制，并不是最友好的用户体验。不过，请随意使用它进行构建！

var area = document.querySelector('#edit-me');
var tagOpen = false;


area.addEventListener('keyup', function(e) {

  // Check for ">", aka period + shift
  if (e.keyCode == 190 && e.shiftKey) {

    // We toggle this flag so it doesn't convert the text to html
    // until the tag seems closed - ie until two '>'s have been entered. 
    // This will work for simple one-level html,
    // but will have issues with self-closing tags and nesting.
    tagOpen = !tagOpen;

    if (!tagOpen) {
      var areaContent = area.textContent;
      area.innerHTML = areaContent;
    }
  }

});

&lt;div id="edit-me" contenteditable&gt;Click to edit&lt;/div&gt;

【讨论】：