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的更多相关文章

  1. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

  2. 在线HTML编辑器KindEditor

     简介 KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器.KindEdi ...

  3. Js的在线代码编辑器：CodeMirror

    github地址:https://github.com/codemirror/CodeMirror/tree/master/demo 里面包含需要的js.css文件以及大量的示例 官网:https:/ ...

  4. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器（八）

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  5. 富文本编辑器kindeditor配置

    <!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...

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

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

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

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

  8. 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 ...

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

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

随机推荐

  1. dedecms5.7怎么取消邮箱验证以及dedecms 会员发布的文章不需要审核的解决方法

    后台 ——系统基本参数——会员设置——会员权限开通状态——改为0 1.实现会员发布文章不需要审核,非会员发布需要审核 在member这个文件夹下找到archives_sg_add.php这个文件,打开 ...

  2. android GC内存回收小析

    由于时间问题,简单的谈谈自己的理解. 大家都知道,在android开发中,不需要自己去管理,有垃圾回收机制会自动帮我们去回收 没有被引用到的对象. 那垃圾回收机制到底是怎样的呢?下面列出本人的一些理解 ...

  3. mathematics

    二倍角公式 史济怀-数学分析1-2003-09-19_2.asx-在线播放-优酷网,视频高清在线观看http://v.youku.com/v_show/id_XMTMzMDU1MTgw.html 国立 ...

  4. 阿里Linux Shell脚本面试25个经典问答

    转载: 阿里Linux Shell脚本面试25个经典问答 Q:1 Shell脚本是什么.它是必需的吗? 答:一个Shell脚本是一个文本文件,包含一个或多个命令.作为系统管理员,我们经常需要使用多个命 ...

  5. jq实现某个标签内，达到一定字数后，剩下的用 ... 显示

    $(".infom_con").each(function(){ var text=$(this).find("a").text(); var len=text ...

  6. Ubuntu配置Open BlockChain

    /* 以前只是听说过BlockChain,没怎么了解过,最近导师在搞Blockchain,让我配一下Open BlockChain的环境,于是就硬着头皮配了一下,还挺顺利的. 由于没接触过BlockC ...

  7. python 基础学习（字典对象，set对象）

    1.dict 字典对象 a.定义对象 d={'a':14,'b':12}b.通过key获取value d['a'] 方法1.判断key是否存在 if 'a' in d: d['a']方法2:通过用ge ...

  8. getsockname和getpeername

    int getsockname(int sockfd, struct sockaddr *localaddr, socklen_t *addrlen);  // 获取与某个套接字关联的本地协议地址 i ...

  9. javascript 函数调用方式

    1. 通过函数名直接调用 函数名(实际参数): 2. 通过指向函数的变量去调用 var 变量=函数名: 变量(实际参数):

  10. WebDataTree 使用XML做数据源绑定数据

    英文版原文链接:http://www.infragistics.com/help/topic/e5f07b51-ee2d-4a33-aaac-2f43cffff327 所使用的控件版本为:Infrag ...