如何用 JavaScript 编写一个简单的所见即所得编辑器?
在我的项目中,我需要编写小型所见即所得编辑器(只需让用户将文本设为粗体/斜体/下划线,也许还有更多)。 所以我不想使用像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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
如果您想自己动手,请查看 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.
看看 http://www.mozilla.org/editor/ie2midas.html
Have a look at http://www.mozilla.org/editor/ie2midas.html
有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.
或者使用简单的语言,如 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.
我过去使用过 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.