正常HTML情况写输入长文本需要textarea 标签 。但textarea 标签局限性很大，切只能输入单一的文本，我们大多情况下看到的新闻类文本信息大多是图文混排得，且有的配有视频和音乐。
我们可以通过KindEditor 来实现前台代码得改善。
简单介绍一下：
KindEditor 是一套开源的在线HTML编辑器，主要用于让用户在网站上获得所见即所得编辑效果，开发人员可以用 KindEditor 把传统的多行文本输入框(textarea)替换为可视化的富文本输入框。 KindEditor 使用 JavaScript 编写，可以无缝地与 Java、.NET、PHP、ASP 等程序集成，比较适合在 CMS、商城、论坛、博客、Wiki、电子邮件等互联网应用上使用。
主要特点：
- 快速：体积小，加载速度快
- 开源：开放源代码，高水平，高品质
- 底层：内置自定义 DOM 类库，精确操作 DOM
- 扩展：基于插件的设计，所有功能都是插件，可根据需求增减功能
- 风格：修改编辑器风格非常容易，只需修改一个 CSS 文件
- 兼容：支持大部分主流浏览器，比如 IE、Firefox、Safari、Chrome、Opera
官方文档：http://kindeditor.net/doc.php
在使用KindEditor时需要导入一个KindEditor JS库
如图：
注：KindEditor-all-min.js是基于jquery-1.12.1.js存在 所以放在jquery-1.12.1.js下 。 KindEditor-all-min.js可以在官方下载
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="../../static/js/jquery-1.12.1.min.js"></script>
<script src="../../static/js/kindeditor/kindeditor-all-min.js"></script>
<title>Document</title>
</head>
<body>
<textarea id="content">富文本</textarea>
<button onclick="checkit()">查看</button>
<script>
initKindEditor();
function initKindEditor() {
var kind = KindEditor.create('#content', {
'100%', // 文本框宽度(可以百分比或像素)
height: '300px', // 文本框高度(只能像素)
minWidth: 200, // 最小宽度（数字）
minHeight: 400 // 最小高度（数字）
});
}
function checkit(){
//声明变量 用来获取文本内信息
var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
alert(content);
}
</script>
</body>
</html>
本文有所借鉴，忘指正