简单的html编辑器并使用div或textarea获取html内容.execCommand（）

Question

试图创建一个简单的HTML编辑器。

$('#edit').on('input', function(e){
	console.log($(this).html());
});

.edit{
background:gold;
min-height:140px;
font-size:1.6em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='edit' id='edit' contenteditable></div>

在div edit中输入：

lorem
ipsum

然后将光标放在lorem的末尾 - 并按键盘上的spacebar和del来获取：

lorem ipsum

你会看到问题 - ipsum的字体大小比lorem大得多。

这是第一个问题 - 如何避免这种情况？

我的第二次尝试是使用textarea而不是contenteditable div，但在这种情况下，我不能使用document.execCommand将一些文本更改为bold等。

那么在textarea中设置html标签的方法是什么样的，就像在stackoverflow或wordpress网站上完成的那样？

我的最终目标是提供一个简单的编辑器，只需几个命令 - qazxsw poi用户应该能够键入和设置文本样式，单击按钮应该获得html内容。

有帮助吗？

Answer 1

正如许多愤怒的开发者所指出的那样，bold, italic and align确实很糟糕 - 不要期待任何伟大的事情，但不管怎样，让我们​​试着去做。

通过将可编辑div包装在另一个div中并将CSS字体应用于此包装器，在执行问题中描述的过程时，文本不会变大。 HTML仍然是丑陋的（无用的span标签，字体大小为1em），但文本内容是可以接受的。

contenteditable

const editable = document.querySelector('div[contenteditable]');

editable.onkeyup = () => {
  document.querySelector('#html-log').innerText = editable.innerHTML;
  document.querySelector('#text-log').innerText = JSON.stringify(editable.innerText);
}

#wrapper {
  font-size: 1.2em;
}
div[contenteditable] {
  width: 100%;
  height: 100%;
  border: solid;
  font-size: 1em;
}

Answer 2

<div id="wrapper">
  <div contenteditable></div>
</div>

<h3>HTML content</h3>
<pre id="html-log"></pre>

<h3>Text content</h3>
<pre id="text-log"></pre>

尝试动态加载第一个参数，方法是指定每个.execCommand()的#id以匹配命令。

<button>

---

演示

<button id="bold">B</button>
...
... var ID = this.id;
return document.execCommand(ID, false, null)

$('#WYSINWYE').on('submit', function() {
  return false;
});
$('#edit').focus();
$('#edit').on('keyup', function() {
  $('#view').html($(this).text());
});
$('#ctrl button').on('click', function() {
  var ID = this.id;
  if (ID === 'HTML') {
    $('#view').slideToggle('750')
    return;
  }
  return document.execCommand(ID, false, null);
});

form {
  width: 100%;
  height: fit-content;
  font: 400 16px/1.25 Arial;
}

#view {
  background: gold;
  min-height: 100px;
  font: inherit;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}

#ctrl {
  height: 20px;
}

#edit {
  font: inherit;
  font-family: Consolas;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

button {
  display: inline-block;
  font: inherit;
  width: 36px;
  height: 24px;
  line-height: 24px;
  margin: 0 -2px;
  vertical-align: middle;
  cursor: pointer;
  border-radius: 1px;
}

b:hover,
button:hover {
  color: rgba(205, 121, 0, 0.8);
}

#HTML {
  float: right
}

#ctrl button:first-of-type {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}

#ctrl button:nth-of-type(6) {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

#ctrl button:last-of-type {
  border-radius: 4px;
}