正常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', {

                        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>

　　

 本文有所借鉴，忘指正

KindEditor 开源得富文本编辑器的更多相关文章

  1. Quill – 可以灵活自定义的开源的富文本编辑器

    Quill 的建立是为了解决现有的所见即所得(WYSIWYG)的编辑器本身就是所见即所得(指不能再扩张)的问题.如果编辑器不正是你想要的方式,这是很难或不可能对其进行自定义以满足您的需求. Quill ...

  2. 现代富文本编辑器Quill的模块化机制

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师.官方网站:devui.designNg组件库:ng-devui(欢迎S ...

  3. Vue整合Quill富文本编辑器

    Quill介绍 Quill是一款开源的富文本编辑器,基于可扩展的架构设计,提供丰富的 API 进行定制.截止2021年1月,在github上面已有28.8k的star. Quill项目地址:https ...

  4. easyUI整合富文本编辑器KindEditor详细教程(附源码)

    原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...

  5. Django配置富文本编辑器kindeditor

    一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...

  6. JAVAEE——宜立方商城04：图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成

    1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...

  7. 推荐两款富文本编辑器：NicEdit和Kindeditor

    做过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多.下面要推荐的两款富文本编辑器都是使用JS编 ...

  8. (转）淘淘商城系列——KindEditor富文本编辑器的使用

    http://blog.csdn.net/yerenyuan_pku/article/details/72809794 通过上文的学习,我们知道了怎样解决KindEditor富文本编辑器上传图片时的浏 ...

  9. （转）学习淘淘商城第二十二课（KindEditor富文本编辑器的使用）

    http://blog.csdn.net/u012453843/article/details/70184155 上节课我们一起学习了怎样解决KindEditor富文本编辑器上传图片的浏览器兼容性问题 ...

随机推荐

  1. nodejs+expressjs+ws实现了websocket即时通讯,服务器和客户端互相通信

    nodejs代码 // 导入WebSocket模块: const WebSocket = require('ws'); // 引用Server类: const WebSocketServer = We ...

  2. 吴恩达机器学习笔记 —— 19 应用举例：照片OCR（光学字符识别）

    http://www.cnblogs.com/xing901022/p/9374258.html 本章讲述的是一个复杂的机器学习系统,通过它可以看到机器学习的系统是如何组装起来的:另外也说明了一个复杂 ...

  3. Spark操作HBase报:org.apache.hadoop.hbase.client.RetriesExhaustedWithDetailsException异常解决方案

    一.异常信息 19/03/21 15:01:52 WARN scheduler.TaskSetManager: Lost task 4.0 in stage 21.0 (TID 14640, hnte ...

  4. 使用Visual Studio Team Services敏捷规划和项目组合管理（三）——使用Kanban板

    使用Visual Studio Team Services敏捷规划和项目组合管理(三)--使用Kanban板 1.要查看Kanban板,请单击Work>Backlogs页面上的Board 链接. ...

  5. mssql instead of 触发器应用一-创建只读视图(view)的方法

    转自: http://www.maomao365.com/?p=4906 <span style="color:white;background-color:blue;font-wei ...

  6. Java集合：List、Set和Map的区别，ArrayList和LinkedList有何区别..........

    一.数组和集合的区别: 数组是大小固定的,并且同一个数组只能存放类型一样的数据(基本类型/引用类型): 集合可以存储和操作数目不固定的一组数据. 所有的JAVA集合都位于 java.util包中! J ...

  7. Linux进程调度器的设计--Linux进程的管理与调度(十七）

    1 前景回顾 1.1 进程调度 内存中保存了对每个进程的唯一描述, 并通过若干结构与其他进程连接起来. 调度器面对的情形就是这样, 其任务是在程序之间共享CPU时间, 创造并行执行的错觉, 该任务分为 ...

  8. 常见 User-Agent 大全（自己在用）

    分享几个常见的User-Agent吧,复制粘贴过来的,谢谢原创. window.navigator.userAgent 1) Chrome Win7: Mozilla/5.0 (Windows NT ...

  9. 安装window 7系统----计算机经验

    上期我们已经成功制作了U盘启动并且也成功进入了PE系统了,在PE微型系统中,除了简单的装系统来恢复C盘,还有什么功能你们可以使用的呢?如果这一期我没有把其他内容讲解的话,千万别乱搞,到时我可能会讲解几 ...

  10. php判断手机是安卓系统还是ios系统

    最近项目,要判断用户的手机是安卓的还是ios的,搜了一下相关的资料,最终获得的结果.事实证明,是有效的!主要是要用到HTTP_USER_AGENT,它表示的意思是用来检查浏览页面的访问者在用什么操作系 ...