创建一个简单的所见即所得网络编辑器 [关闭]

Question

我是 Web 开发新手，从未从事过与 Web 相关的工作 之前的项目，但是在这个学者项目的事情中，我必须从头开始创建一个所见即所得的网络编辑器。

到目前为止，我已经学习了 HTML、CSS 和 javascipt，并且我打算攻击 Jquery 并阅读 Web 编辑器（如 TinyMce）的源代码，以帮助我了解我必须做什么。 问题是 TinyMce 对我来说太复杂了，我需要一个比这更简单的网络编辑器。所以如果你能帮我起个名字，我将不胜感激:)

Answer 1

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

基本上你只需要一个textarea和一堆按钮（因为textarea很难格式化，我们使用editable div，它允许格式化文本）：

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

然后使用一些 jQuery 魔法，您可以在单击按钮时“加粗”选定的文本。最简单的方法是execCommand('bold')method，它会找到选定的文本并将其设为粗体（编辑：execCommand 已弃用！！）

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

在下面的 sn -p 中你可以找到一个基本的例子。您可以轻松添加其他按钮，例如斜体或下划线。

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