正常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库  

如图：

富文本编辑器和java 富文本编辑器 开源_富文本

注：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', {
                        width: '100%',       // 文本框宽度(可以百分比或像素)
                        height: '300px',     // 文本框高度(只能像素)
                        minWidth: 200,       // 最小宽度（数字）
                        minHeight: 400      // 最小高度（数字）
                    });
                }
                
                function checkit(){
                    //声明变量 用来获取文本内信息
                    var content = $(document.getElementsByTagName("iframe")[0].contentWindow.document.body).html()
        
                    alert(content);
        
        
                }
            </script>
</body>
</html>

　　

 本文有所借鉴，忘指正