简单 html 编辑器并使用 div 或文本区域获取 html 内容

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 标签的方法是什么，就像在 Whosebug 或 wordpress 网站上所做的那样？

我的最终目标是提供一个只有几个命令的简单编辑器 - bold, italic and align 用户应该能够键入文本并设置文本样式，单击按钮应该会获得 html 内容.

有什么帮助吗？

Answer 1

正如许多愤怒的开发人员所指出的那样，contenteditable 确实很糟糕 - 不要指望有什么好事，但无论如何我们还是要凑合一下。

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

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

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

Answer 2

`.execCommand()`

尝试通过分配每个 <button> 的 #id 来动态加载第一个参数以匹配命令。

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

<link href="//use.fontawesome.com/releases/v5.7.2/css/all.css" rel="stylesheet" crossorigin="anonymous">

<form id='WYSINWYE'>
  <fieldset id='view' class='text' contenteditable='false' style='display:none'>
  </fieldset>
  <fieldset id='ctrl'>
    <button id='bold' class="fas fa-bold"></button>
    <button id='italic' class="fas fa-italic"></button>
    <button id='underline' class="fas fa-underline"></button>
    <b>|</b>
    <button id='justifyLeft' class="fas fa-align-left"></button>
    <button id='justifyCenter' class="fas fa-align-center"></button>
    <button id='justifyRight' class="fas fa-align-right"></button>
    <button id='HTML' class="fas fa-code"></button>
  </fieldset>
  <fieldset id='edit' class='text' contenteditable='true'>
  </fieldset>
</form>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

简单 html 编辑器并使用 div 或文本区域获取 html 内容

simple html editor and get html content using div or textarea

html

javascript

jquery

contenteditable

`.execCommand()`

演示