如何用 JavaScript 编写一个简单的所见即所得编辑器?

发布于 2024-07-19 07:23:25 字数 168 浏览 4 评论 0原文

在我的项目中,我需要编写小型所见即所得编辑器(只需让用户将文本设为粗体/斜体/下划线,也许还有更多)。 所以我不想使用像tinymce或fckeditor这样的怪物。 我的问题是我需要了解哪些 HTML 元素和 javascript 函数? 在这个问题中,可以编辑和格式化文本的 HTML 元素是一件非常有趣的事情。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

乙白 2024-07-26 07:23:25

如果您想自己动手,请查看 Midas。 它适用于 FF3+、IE、Safari、Opera、Chrome。

基本上,您使用 contentEditable 和 execCommand 将浏览器变成 RTE。

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

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

你的背包 2024-07-26 07:23:25
document.getElementById('edit').contentDocument.designMode = "on";

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

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

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

掩于岁月 2024-07-26 07:23:25

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

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.

我纯我任性 2024-07-26 07:23:25

或者使用简单的语言,如 Markdown 或 Textile,并提供实时预览。

我认为大多数人都会得到星号用于强调双星用于粗体

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

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

饮湿 2024-07-26 07:23:25

我过去使用过 YUI 的所见即所得编辑器,它可以让您配置按钮,以便您可以轻松使用它并将按钮限制为粗体/斜体/下划线。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文