Javascript textarea内的HTML5富文本

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10404312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-24 01:10:45  来源:igfitidea点击:

HTML5 rich-text inside textarea

javascripthtmltextareasyntax-highlightingrich-text-editor

提问by Alex

I heard that the new HTML5 will add rich text capability to textareas (it will make them more flexible), so you can do stuff like code syntax highlighting editors without very nasty javascript (like creating iframes and stuff).

我听说新的 HTML5 将为 textareas 添加富文本功能(这将使它们更灵活),因此您可以执行代码语法突出显示编辑器之类的事情,而无需非常讨厌的 javascript(例如创建 iframe 之类的东西)。

Is this true? Are there browsers with support for it yet? And where can I find some API?

这是真的?是否有支持它的浏览器?我在哪里可以找到一些 API?

回答by DavidTaubmann

NO - jQuery

否 - jQuery

If what you where looking for (the same as me) is NO-jquery tools (pure HTML/CSS + basic JS), then some of the best options I found are:

如果你在寻找什么(和我一样)是 NO-jquery 工具(纯 HTML/CSS + 基本 JS),那么我发现的一些最好的选择是:

  1. wysihtml5
  2. Squire
  3. ckeditor
  4. widgEditor
  1. 所见即所得
  2. 乡绅
  3. 编辑器
  4. widg编辑器

Nevertheless, those in the list above all convert the element (textarea) into an iframe, so they weren't exactly what I was searching for, finally I found this one which respects the original element(divs or so, but if you use textarea it does creates an additional div), allowing full straightforward JS app development:

尽管如此,上面列表中的那些都将元素 (textarea) 转换为 iframe,所以它们并不是我要搜索的内容,最后我找到了这个尊重原始元素的元素(div 左右,但如果你使用 textarea它确实创建了一个额外的 div),允许完全直接的 JS 应用程序开发:

  1. nicedit
  1. 编辑

Hope this helps you too!

希望这对你也有帮助!

回答by Florian Margaine

Are you looking for Aloha Editor?

您在寻找Aloha 编辑器吗?

It's using the new contenteditableattribute to add a WYSIWYG editor to any div you choose.

它使用新contenteditable属性将 WYSIWYG 编辑器添加到您选择的任何 div。

Look at the demos.

看看演示

回答by Daniel Moses

I believe what you are referring to is the new contentEditable attribute. This is not a textarea, but rather an element attribute. This is good for allowing changes to content.

我相信您所指的是新的 contentEditable 属性。这不是一个文本区域,而是一个元素属性。这有利于允许更改内容。

Try http://html5demos.com/contenteditable

试试http://html5demos.com/contenteditable

Notice that your browser likely doesn't give you the toolbar with bold, italics, etc. Yet chrome will let you select text and use CTR-B, CTR-I, etc. Things are still being ironed out with this.

请注意,您的浏览器可能不会为您提供带有粗体、斜体等的工具栏。但 chrome 可以让您选择文本并使用 CTR-B、CTR-I 等。事情仍在解决中。

Basically, it's a work in progress and your best bet for browser compatability is using a wysiwyg editer like tinymce et al.

基本上,这是一项正在进行的工作,浏览器兼容性的最佳选择是使用像 tinymce 等人这样的所见即所得编辑器。

回答by MilkyWayJoe

Where have you heard that? Looking at W3Schools > HTML5 > textareaI can't see anything that hints this is true.

你在哪里听说过?看着W3Schools > HTML5 > textarea我看不到任何暗示这是真的。

Edit: added more links due to comments of people who dislike w3schools

编辑:由于不喜欢 w3schools 的人的评论添加了更多链接

Even tho it's essentially the same thing at this point, here's the link to w3.org for wikitextarea, as well as the specfor textarea. Also, here's the document with differencesof html 4 and 5 as of march 29, 2012

即使在这一点上它本质上是相同的,这里是wikitextarea 的w3.org 链接,以及textarea的规范。此外,这是截至 2012 年 3 月 29 日的 html 4 和 5差异的文档