纯JS文本在线HTML编辑器KindEditor
KindEditor(http://www.kindsoft.net)是一款比较专业,主流,好用的在线HTML编辑器。
它除了可以将文本进行编辑、将Word中的内容复制进来外,本身还可以拖动缩放(右下角),十分好用。
当然,最重要的是,它是纯JS版的,加载它十分方便:
<head>
<script type="text/javascript" src="/jquery-1.9.1.js"></script>
<script type="text/javascript" src="/kindeditor-4.1.6/kindeditor.js"></script>
<script type="text/javascript" src="/kindeditor-4.1.6/lang/zh_CN.js" charset="utf-8"></script>
</head>
说明:
1)第一段是引用了JQuery,理论上1.3.2版本以上都可以,但如果有新版本向下兼容,请替换老版本。下载
2)第二段是在官方主页上下载的JS主体(http://www.kindsoft.net)。下载
3)第三段是中文补丁包,为能正常显示编码,请加上:charset="utf-8"。下载
然后,创建editor对象:
<script type="text/javascript">
//创建editor对象
KindEditor.ready(function(K) {
window.editor = K.create('#txtEditor');
});
</script>
用HTML控件创建KindEditor:
<textarea id="txtEditor" name="txtEditor" style="height:300px;width:100%;"></textarea>
从JS中取值:
<script type="text/javascript">
//获取HTML值
var vHTML = window.editor.html();
//获取Text值
var vText = window.editor.text();
</script>
或者更简单的用服务器控件创建KindEditor:
<asp:TextBox ID="txtEditor" runat="server" TextMode="MultiLine" Width="100%" Height="300px"></asp:TextBox>
从.cs文件后台取值:
string editorValue = this.txtEditor.Text.Trim();
更多关于KindEditor的使用方法,请参见官网
纯JS文本在线HTML编辑器KindEditor的更多相关文章
- 纯JS Web在线可拖拽的流程设计器
F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...
- 在线HTML编辑器KindEditor
简介 KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEdi ...
- Js的在线代码编辑器:CodeMirror
github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...
- F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)
Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- Django配置富文本编辑器kindeditor
一.简介 django是一个容易快速上手的web框架,用它来创建内容驱动型的网站(比如独立博客)十分方便.遗憾的是,django并没有提供官方的富文本编辑器,而后者恰好是内容型网站后台管理中不可或缺的 ...
- JAVAEE——宜立方商城04:图片服务器FastDFS、富文本编辑器KindEditor、商品添加功能完成
1. 学习计划 1.图片上传 a) 图片服务器FastDFS b) 图片上传功能实现 2.富文本编辑器的使用KindEditor 3.商品添加功能完成 2. 图片服务器的安装 1.存储空间可扩展. 2 ...
- Django之富文本编辑器kindeditor 及上传
1.什么是富文本编辑器 百度百科(https://baike.baidu.com/item/%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8 ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
随机推荐
- C# Web中Session的使用
1. 关于使用之前要注意的: 在使用session之前,一定要注意继承自System.Web.UI.Page,或在使用session时加上System.Web.HttpContext.Current: ...
- SCCM部署win7操作系统,系统盘为D盘
SCCM部署win7操作系统,系统盘为D盘 1. 系统部署完毕之后是这样的 2.解决方案 解决分发干净Windows7操作系统盘符为”D”的方法也比较简单. 在SCCM管理控制台中,打开”软件库””操 ...
- 国内外做MySQL的公司
MariaDB 基金会 Percona企业级服务 vividx 监控 webyog 监控和管理 springboksql mysql 一体机 htt ...
- Apache Commons fileUpload实现文件上传之一
需要两个jar包: commons-fileupload.jar Commons IO的jar包(本文使用commons-io-2.4.jar) 利用Servlet来实现文件上传. package ...
- 20145218 《Java程序设计》第9周学习总结
20145218 <Java程序设计>第9周学习总结 教材学习内容总结 16.1.1 JDBC简介 JDBC全名Java DataBase Connectivity,是java联机数据库的 ...
- poj----(1470)Closest Common Ancestors(LCA)
Closest Common Ancestors Time Limit: 2000MS Memory Limit: 10000K Total Submissions: 15446 Accept ...
- 127. 126. Word Ladder *HARD* -- 单词每次变一个字母转换成另一个单词
127. Given two words (beginWord and endWord), and a dictionary's word list, find the length of short ...
- 《JavaScript权威指南》读书笔记(一)
日期 2015-11-28 把之前的读书笔记在我弄丢它之前搬过来~~ 时间过去好久,回头一看理解都不一样了. 重点浏览了一下和Java的不同之处: js是一种宽松类型语言:js不区别整形数值与浮点型数 ...
- Java:多线程,使用同步锁(Lock)时利用Condition类实现线程间通信
如果程序不使用synchronized关键字来保证同步,而是直接使用Lock对象来保证同步,则系统中不存在隐式的同步监视器,也就不能用wait().notify().notifyAll()方法进行线程 ...
- groovy基础
字符串字面值 def age=25 log.info 'My age is ${age}' log.info "my age is \${age}" log.info " ...