Question

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

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

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

并且让它工作，但它需要您输入文件，实际输入<h1>TEST</h1>之类的内容，然后才能重新打开文件并编辑上述文本。

我正在寻找一种输入<h1>的方式，浏览器会认出并将以下文字转换为标题，同样适用于<p>。

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

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

我们非常欢迎任何帮助，我仍然很陌生，我认为这将需要Javascript。

Answer 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;
    }
  }

});

<div id="edit-me" contenteditable>Click to edit</div>

HTML / Javascript自动ContentEditable标签？

1 个答案: