Question

我要用mic制作文本编辑器并输入suupport。我已经将jQuery与它一起使用（没有完全学到它），但是似乎有一个错误。我已经设置了一个事件侦听器，该事件侦听器将侦听enter键并添加'\ r \ n'，但是它会在<br>标记中添加<p>。当我键入内容时，<br>就会消失，并且键入的文本会填满。请尝试理解，尽管我仍然15岁，但不要称我为noob。

我还设置了一个save选项，为此我在新行中付出了很多努力，但并没有加入。

jQuery

$(document).ready(function() {
  $('#download').click(function() {
    $('p').find('br').before(document.createTextNode('\n')).remove();
    $('p').contents().unwrap().wrapAll('<p>');
    $('p').attr("id", "p");
    downloadInnerHtml('notes.txt', 'p', 'txt');
  });
});

JS

let p = document.createElement('p');
const notes = document.querySelector('#notes');
p.setAttribute('id', 'p');
notes.appendChild(p);
document.execCommand('defaultParagraphSeparator', false, 'p');
recognition.addEventListener('result', e => {
  const transcript = Array.from(e.results)
    .map(result => result[0])
    .map(result => result.transcript)
    .join('')

  p.textContent = transcript;
  if (e.results[0].isFinal) {
    p = document.createElement('p');
    p.setAttribute('id', 'p');
    notes.appendChild(p);
  }
  console.log(transcript);
});
notes.addEventListener('beforeinput', function() {
  document.execCommand('defaultParagraphSeparator', false, 'p');
});
notes.addEventListener('keydown', function(event) {
  if (event.key === "Enter") {
    document.getElementById('p').append('\n');
    document.getElementById('p').append('\n');
  }
});
recognition.addEventListener('end', recognition.start);
recognition.start();

function downloadInnerHtml(filename, elTag, mimeType) {
  var elHtml = document.getElementById(elTag).innerHTML;
  var link = document.createElement('a');
  mimeType = mimeType || 'text/plain';
  link.setAttribute('download', filename);
  link.setAttribute('href', 'data:' + mimeType + ';charset=utf-8,' + encodeURIComponent(elHtml));
  link.click();
}

我希望有换行符，但是在“保存”按钮上，该功能还应该包含换行符，但该字符本身没有发生。喜欢，

预期输出：-

I am someone.

Foo bar.

实际输出：-

I am someone.Foo bar.

Answer 1

在HTML中，所有（除非不间断）空格都折叠为一个空格。例如：

<span>Hello<span>\n
<span>World<span>

我添加了\n以突出显示显式换行符。但是，以上内容将显示为：

Hello World

这是预期的HTML行为，因此您会发现其他编辑器要做的是在换行符和<br>之间进行透明转换，以进行存储和显示，并且您需要这样做。

编辑：

您使用<div>作为编辑器的基础。也许您应该改用<textarea>，这是为了达到既定目标而成为编辑的目的。另外，请尝试使用this W3Schools example，以清楚地看到将文本逐字放置在HTML中时，文本生成的内容将如何显示（单击“尝试”，然后在某处添加<br/>，然后再次单击“尝试”）。< / p>

<br>标签被插入而不是'\ r \ n'

1 个答案: