html textarea 如何对文本区域内的内容应用样式
我知道这个话题已经被讨论过,因为我在网上看到了痕迹。共识似乎是这是不可能的。但我知道至少有一种产品(TinyMCE)能够做到这一点。注意:我不想使用 TinyMCE 来做这件事。
我想向 textarea 元素的文本内容添加一些图标。如果也可以单击图标,那就太好了。
也许这里有人已经研究过 TinyMCE 并且知道他们是如何做到的。这是使用 Javascript 完成的吗?或者这是某些特定于浏览器的浏览器机制,例如拼写检查?
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. Note: I do not want to use TinyMCE to do it.
I want to add some icons to the text content of the textarea element. 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. Is this done using Javascript? Or is this some browser specific browser mechanism like spell check?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
根据我的理解,像这样的库使用
contentEditable
div。这允许类似文本区域的编辑以及 html 元素。From my understanding libraries like this use a
contentEditable
div. This allows for textarea-like editing as well as html elements.TinyMCE 隐藏文本区域,并将其替换为内容可编辑的 iframe(使用 iframe 文档的
designMode
属性或 iframe 的contentEditable
属性) > 元素)。我相信文本区域仍然保留在文档中,并且当用户在可编辑 iframe 中编辑内容时,其值会更新,以便 TinyMCE 生成的 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 thecontentEditable
property of the iframe's<body>
element). 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.