正常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. 洛谷P3246 [HNOI2016]序列(离线 差分 树状数组)

    题意 题目链接 Sol 好像搞出了一个和题解不一样的做法(然而我考场上没写出来还是爆零0) 一个很显然的思路是考虑每个最小值的贡献. 预处理出每个数左边第一个比他小的数,右边第一个比他大的数. 那么\ ...

  2. centos 安装mysql Package: akonadi-mysql-1.9.2-4.el7.x86_64 (@anaconda)

    wget http://repo.mysql.com/mysql-community-release-el7-5.noarch.rpm rpm -ivh mysql-community-release ...

  3. [IB]Integration Broker 是如何处理传入的请求(Part 2)

    让我们讨论一下集成代理如何处理传入的请求.可以先阅读(理解PeopleSoft集成代理 Part1). 当PeopleSoft集成代理接收传入请求时,会发生一系列事件. 当侦听连接器(Listenin ...

  4. C#:关于C#4中IEnumerable<out T>的理解

    IEnumerable<out T>这个接口非常常见,它是最基础的泛型集合接口,表示可迭代的项的序列. 但是奇怪的是为什么泛型参数要带一个“out”? 经过一番资料查阅后,发现此“out” ...

  5. Flutter 布局(三)- FittedBox、AspectRatio、ConstrainedBox详解

    本文主要介绍Flutter布局中的FittedBox.AspectRatio.ConstrainedBox,详细介绍了其布局行为以及使用场景,并对源码进行了分析. 1. FittedBox Scale ...

  6. 算法:用两个栈来实现一个队列,完成队列的Push和Pop操作。 队列中的元素为int类型。

    算法:用两个栈来实现一个队列,完成队列的Push和Pop操作. 队列中的元素为int类型.<剑指offer> 利用栈来进行操作,代码注释写的比较清楚:首先判断两个栈是否是空的:其次当栈二 ...

  7. 解决Chrome与jQuery菜单兼容问题

    题外,Chrome最近在耗电量方面超过了Edge,不过内存占用还是高啊,开发时偶尔用用.这不,http://jqueryui.com/menu/的官方菜单都支持的不好,改改吧! 打开jquery-ui ...

  8. getprop从哪获取属性

    Android SystemProperties设置/取得系统属性的用法总结 通过调查得知,Android系统中取得/设置系统属性的用法参考以下3篇文章就足够了. 1.Android SystemPr ...

  9. Windows服务器防火墙配置规范

    本文属于一篇内部规范文档,整理的初衷是为了规范.统一集团的Windows服务器(仅仅SQL Server数据库服务器)防火墙设置,仅仅供内部其它同事设置Windows防火墙时作为参考的文档资料.如有不 ...

  10. sql prompt 缩写 快捷键

    快捷键代码 1. df DELETE FROM 2. ssf SELECT * FROM  3. be BEGIN  END 4. ij INNER JOIN  5. ap ALTER PROCEDU ...