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

Question

我是网络开发的新手，我从未从事与网络相关的工作 以前的项目，但在这个学者项目的事情，我必须从头开始创建一个WYSIWYG网页编辑器。

直到现在我已经学习了HTML，CSS和javascipt，我打算攻击Jquery，并且还要阅读网页编辑器的源代码（比如TinyMce），让我开始了解我必须做什么。      问题是TinyMce对我来说太复杂了，我需要一个比这简单得多的网页编辑器。所以，如果你能帮我一个名字，我将非常感激：）

Answer 1

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

基本上你需要一个textarea和一堆按钮。

Textarea难以格式化，因此您应该使用editable div，它允许格式化文本：

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

然后使用一些jQuery魔法，你可以“加粗”＆＃39;单击按钮时选择的文本。最简单的方法是execCommand('bold') method，它会找到所选文本并使其变为粗体：

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

在此Fiddle中，您可以找到一个基本示例。您可以轻松添加其他按钮，如斜体或下划线。