创建一个简单的WYSIWYG web编辑器

Question

我对网络开发很陌生，我以前从未从事过与网络相关的项目，但在这个学者项目中，我必须从头开始创建一个所见即所得的网络编辑器。

到目前为止，我已经学习了HTML、CSS和javascipt，我打算攻击Jquery，并阅读web编辑器(如TinyMce)的源代码，让我开始学习并了解我必须做的事情。问题是TinyMce对我来说太复杂了，我需要一个比它简单得多的网络编辑器。所以，如果你能帮我取一个名字，我会非常感激的：)

Answer 1

我的建议是开始构建一些简单和小的东西，而不是试图理解某些编辑器的代码。

基本上，您只需要一个文本区域和一堆按钮(因为textarea很难格式化，所以我们使用了一个可编辑 div，它允许格式化文本)：

<div id="fake_textarea" contenteditable></div>
<button id="jBold" value="B">

然后，使用一些jQuery魔法，您可以在单击按钮时对选定的文本进行“修改”。最简单的方法是execCommand('bold')方法，它查找选定的文本并使其粗体(编辑: execCommand被废弃了！！)

$('#jBold').click(function () {
    document.execCommand('bold');
}); 

在下面的片段中，您可以找到一个基本示例。您可以轻松地添加一些其他按钮，如斜体或下划线。

​

$(document).ready(function() {
  $('#jBold').click(function() {
    document.execCommand('bold');
  });
});

#fake_textarea {
  width: 100%;
  height: 100px;
  border: 1px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='fake_textarea' contenteditable>
  Highlight some text and click the button to make it bold...
  <br>Or write your own text
</div>
<button id="jBold"><b>B</b></button>

​