更好的文本区域输入
当你在 Stack Overflow 上提问时,你会看到一个文本区域框,其中包含“粗体”、“斜体”、“添加超链接”等选项。我想做同样的事情...但是我该怎么做呢?有这方面的例子吗?我确信互联网上有一些相关内容。任何帮助将不胜感激。谢谢!
When you make a question on Stack Overflow, you get a text area box with options like "bold", "italic", "add hyperlink" and everything. I want to do the same thing... But how would I do this? Is there any examples of this? I'm sure there is something on the internet for this. Any help would be greatly appreciated. Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
在非常粗略的高级视图中,那些花哨的在线编辑器只是一个具有
contentEditable
属性设置为 true。按钮栏、菜单等等……只是一些额外的东西。At the very coarse high-level view, those fancy online editors are just a div that's had its
contentEditable
attribute set to true. the button bars, menus, etc... are just fluffy extras.您可以尝试在谷歌上搜索所见即所得插件,例如 CLEditor jQuery 插件 http://premiumsoftware.net/cleditor/
You can try googling for wysiwyg plugins, like CLEditor jQuery plugin http://premiumsoftware.net/cleditor/
通常你应该使用tinymce等。
但特别是在Stackoverflow上,他们使用Markdown和一个简单的文本区域。这里的几个按钮只是将 markdown 符号的简单 ascii 文本插入文本区域
Normally you should use tinymce, etc.
But specifically on Stackoverflow, they use Markdown and a simple textarea. The few buttons here just insert simple ascii-text for the markdown symbols into the textarea
您想查看 W(hat) Y(ou) S(ee) I(s) W(hat) Y(ou) G(et) 编辑器。示例: TinyMCE 、 ckeditor
You want to look at W(hat) Y(ou) S(ee) I(s) W(hat) Y(ou) G(et) Editors. Examples: TinyMCE , ckeditor
您还可以研究该网页的源代码。我推荐 Firefox 的 Firebug 插件。它使浏览网页源变得更加容易。
只需右键单击 html 元素(例如文本区域或按钮),然后单击“检查元素”。它直奔源头。
我已经有一段时间没有深入研究网页设计了,但显然有很多 CSS 和 JavaScript,你可以在源代码中看到这两者(因为它们是客户端)。
You can also study the source for this web page. I recommend the Firebug plugin for Firefox. It makes it much easier to navigate the source of a web page.
Simply right-click on an html element, like a text-area, or a button, and click "Inspect element". It goes straight to the source.
I haven't delved my hand in web design for a little while, but there's clearly a lot of CSS and maybe JavaScript going on, both of which (as they are client-side) you can see in the source.