简体繁体 English

html textarea如何在textarea中的内容上应用样式

[英]html textarea how to apply styles on content within the textarea

原文 2011-08-02 20:30:50 9 2 javascript/ browser/ tinymce/ textarea

I know that this topic has been discussed since I can see traces on the web. 我知道已经讨论了该主题，因为我可以在网上看到痕迹。 The consense seems to be that it is impossible. 共识似乎是不可能的。 But I know on at least one product (TinyMCE) which manages to do it. 但是我知道至少可以做到这一点的产品（TinyMCE）。 Note: I do not want to use TinyMCE to do it. 注意：我不想使用TinyMCE。

I want to add some icons to the text content of the textarea element. 我想在textarea元素的文本内容中添加一些图标。 It would be great if one could click on the icons as well. 如果也可以单击图标，那就太好了。

Maybe somebody here already looked into TinyMCE and knows how they do it. 也许这里有人已经研究过TinyMCE，并且知道他们是如何做到的。 Is this done using Javascript? 这是使用Javascript完成的吗？ Or is this some browser specific browser mechanism like spell check? 还是这是某些浏览器特定的浏览器机制，例如拼写检查？

2 个解决方案

From my understanding libraries like this use a contentEditable div. 根据我的理解，像这样的库使用contentEditable div。 This allows for textarea-like editing as well as html elements. 这样可以进行类似textarea的编辑以及html元素。

TinyMCE hides the textarea and replaces it in the document with an iframe whose content is editable (using either the designMode property of the iframe's document or the contentEditable property of the iframe's <body> element). TinyMCE隐藏文本区域，并将其替换为内容可编辑的iframe（使用iframe文档的designMode属性或iframe <body>元素的contentEditable属性）。 I believe the textarea is still kept in the document and its value updated as the user edits content in the editable iframe so that the HTML produced by TinyMCE is submitted as though it had been entered into the textarea. 我相信textarea仍保留在文档中，并且当用户在可编辑iframe中编辑内容时，textarea的值会更新，以便TinyMCE生成的HTML就像提交到textarea中一样被提交。