如何用JavaScript编写一个简单的WYSIWYG编辑器呢?

In my project I need to write small WYSIWYG editor (just let users make text bold/italic/underline and maybe some more). So I wouldn't like to use monsters like tinymce or fckeditor. My question is what HTML elements and javascript functions do I need to know for it? An HTML element in which I can edit and format text is a very interesting thing in this question.

在我的项目中，我需要编写一个小的WYSIWYG编辑器(只需让用户将文本加粗/斜体/下划线或者更多)。所以我不喜欢使用像tinymce或fckeditor这样的怪物。我的问题是，我需要知道哪些HTML元素和javascript函数?在这个问题中，一个可以编辑和格式化文本的HTML元素是非常有趣的。

5 个解决方案

#1

If you want to roll your own, look at Midas. It's available in FF3+, IE, Safari, Opera, Chrome.

如果你想自己卷，可以看看Midas。它可以在FF3+，即Safari, Opera, Chrome中使用。

Basically, you use contentEditable and execCommand to turn the browser into an RTE.

基本上，您可以使用contentEditable和execCommand将浏览器转换为RTE。

#2

document.getElementById('edit').contentDocument.designMode = "on";

Have a look at http://www.mozilla.org/editor/ie2midas.html

看看http://www.mozilla.org/editor/ie2midas.html

#3

There is http://www.gosu.pl/steditor/ which code is quite simple and clear. It uses designMode and execCommand as was mentioned in other answers.

有http://www.gosu.pl/steditor/，代码非常简单明了。它使用了designMode和execCommand，如在其他答案中提到的那样。

#4

Alternatively use simple languages like markdown or textile and provide a live preview.

或者使用简单的语言，如markdown或textile，并提供实时预览。

I think most people will get asterisks for emphasis and double ones for bolding.

我想大多数人会用星号表示强调，用双号表示粗体。

#5

-1

I've used YUI's wysiwyg editor in the past and it lets you configure the the buttons so you could easily use it and limit the buttons to bold/italic/underline.

我以前使用过YUI的wysiwyg编辑器，它允许您配置按钮，以便您可以方便地使用它，并将按钮限制为粗体/斜体/下划线。

#1