创建一个简单的 WYSIWYG 网页编辑器

Question

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

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

Answer 1

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

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

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

然后使用一些 jQuery 魔法，您可以在单击按钮时 'boldify' 选择文本。最简单的方法是 execCommand('bold')method，它会找到选定的文本并将其设为粗体（编辑：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>

创建一个简单的 WYSIWYG 网页编辑器

Create a simple WYSIWYG web editor

javascript

jquery

html

css

wysiwyg