contenteditable样式（content and style）

本文目录一览：

• 1、快速了解JavaScript的富文本编辑
• 2、textarea属性
• 3、H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长...

快速了解JavaScript的富文本编辑

1、富文本编辑器是在网页上使用的所见即所得文本编辑器，是Web应用开发中常见的需求。实现富文本编辑器有2种方式：使用iframe和contenteditable属性。使用iframe时，可在空白HTML文档中嵌入一个iframe，并将designMode属性设置为on，使文档变为可编辑。

2、Textbox.io：专为移动设备设计，支持图像处理和辅助技术，适合移动端解决方案，商业版和合作伙伴版定价分别为99美元和499美元。 DHTMLX富文本编辑器：完全可定制，支持HTML和Markdown，适合注重性价比的开发者，商业许可证价格根据团队规模有所不同，从149美元起。

3、这是最简单的富文本编辑器实现方式。用户可以在文本区域内输入文本，并使用浏览器自带的格式化功能（如Ctrl+B加粗、Ctrl+I斜体等）进行格式化。但这种方式的编辑功能相对有限，无法满足复杂的富文本编辑需求。

4、首先，MarkitUp是一个轻量级且高度可定制的jQuery编辑器，适用于CMS和论坛等，虽然不是WYSIWYG，但支持常用快捷键和浏览器。jWYSIWYG则是一款常用的jQuery编辑器，拥有HTML代码编辑、文字编辑和图片链接功能，以保持简洁性。对于简单应用，Lightweight RTE提供了基本格式化功能，体积仅7kb。

5、UEditor是一款基于JavaScript的富文本（Rich Text）编辑器。以下是关于UEditor的详细介绍：基本定义 UEditor（现在称为UEditor 0以后版本通常简称为UEditor）由中国的开发者团队开发，广泛用于网页上编辑和发布文本内容。

6、css等浏览器可以认识的代码，其核心的实现技术就是JavaScript和html 、css等前端技术。富文本编辑器的应用，比如做为一个网站的开发者，当我们需要一个发布文章的功能时候，用户可能不知道html代码，此时我们可以使用一些别人写好的富文本编辑器嵌入到我们的程序中即可解决这一问题。

textarea属性

textarea元素的常用属性包括：cols：规定文本区的宽度，以列数显示内容。rows：规定文本区内可见的行数，影响文本区域的显示形式和用户交互体验。其他功能性的属性有：autofocus：设置页面加载时文本区域是否获得焦点，true表示获得焦点，false表示不自动聚焦。

CSS隐藏：通过CSS的display： none；属性，可以将textarea完全隐藏，不占据页面空间。使用隐藏域（hidden input）：虽然这不是直接隐藏textarea，但在某些情况下，可以通过使用input type=hidden来代替textarea传递隐藏数据。

当处理文本溢出时，使用overflow属性来决定是否显示滚动条。此属性包含四个值：visible、scroll、hidden 和 auto。其中，visible属性下，内容会显示在元素之外；scroll属性下，将自动显示滚动条；hidden属性隐藏滚动条；而auto属性会根据内容是否溢出而自动决定是否显示滚动条。

wrap属性：textarea有一个wrap属性，可以设置为hard、soft或virtual。wrap=hard：表示文本在textarea中自动换行，并且这些换行符（r ）会被发送到服务器。wrap=soft：表示文本在textarea中自动换行，但这些换行符不会被发送到服务器（即，文本在发送前会被视为连续的一行）。

在html中textarea 的字体大小可以用“font-size”属性来修改，字体颜色可以用“color”来修改。

在网页开发中，textarea元素用于显示和收集多行文本输入。它可以被自定义以适应不同的需求，通过一系列的属性进行调整。其中，最常用的属性是cols和rows，它们分别规定了文本区的宽度和高度，以列和行的形式显示内容。

H5新增属性contenteditable(不用JS,实现div模拟textarea高度自增长...

无意中发现contenteditable属性，只需将div标签设为contenteditable=true，便能实现代替textarea，文本内容增加时，div自动调整高度，无需使用JavaScript。下面的代码示例展示了一个简单的实现，添加了一些样式，将文本域也包括进去，方便对比。

无意间翻阅博客，发现了一个令人惊喜的HTML5新增属性——contenteditable。只需在div标签中添加contenteditable=true，便能实现div模拟textarea功能，使div高度随内容增长自动调整。

使用textarea标签进行多行文本的输入有很多限制，比如不能实现高度自适应，会出现难看的滚动条等问题。

很多人刚开始接触contenteditable这个属性时都会想到textarea。 textarea支持多行文本输入，满足了我们编辑的很大需求。然而，textarea不能像div一样高度自适应，高度保持不变，内容大于高度时就会出现滚动条。