KindEditorhttp://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. SDL2.0的SDL_Event事件处理

    SDL_Event事件集合 SDL_AudioDeviceEvent SDL_ControllerAxisEvent SDL_ControllerButtonEvent SDL_ControllerD ...

  2. OpenGL的gluPerspective和gluLookAt的关系[转]

    函数原型void gluLookAt(GLdoble eyex, GLdouble eyey, GLdouble eyez,  GLdouble centerx, GLdouble centery, ...

  3. Linux大文件分割split和合并cat使用方法

    本文主要介绍linux下两个命令:split和cat.其中,相信大家都熟悉cat命令,一般用来查看一个文件的内容,但是它还其它的功能,比如这里要介绍的文件合并功能,它可把多个文件内容合并到一个文件中. ...

  4. ifstream,fstream 读写文件问题,read读取字节不够

    从网上下的一个读写bmp文件的接口使用了ifstream和fstream. 发现了在使用read读的时候,读取的字节达不到期望的size. 原因是打开文件的时候使用了ios::in 或ios::out ...

  5. list转datatable c#

    private DataTable ToDataTable<T>(List<T> items) { var tb = new DataTable(typeof(T).Name) ...

  6. LR测试https协议设置方法

    测试ssl隧道的设置方法: 前一段时间使用loadrunner测试ssl vpn时,使用ssl隧道一直配置不成功,经过查资料,终于成功,记录一下,方便大家测试.走ssl隧道与普通http,只需多设两个 ...

  7. js字符串函数之split()join()

    split方法用于把一个字符串切割成字符串数组,与join相反 一个参数表示以该参数为切割点, var str="silence's world"; console.log(str ...

  8. Mybatis 学习-3

    1.设计Dao接口 public interface UserDao { public boolean addUser(User user); } public interface CategoryD ...

  9. Hadoop-env.sh[翻译]

    说明: 某天 ,把hadoop-env.sh的注释看了看 , 感觉受益匪浅,于是想要写一篇告诉大家,文档是最靠谱的,鉴于我的水平有限,只能翻译大概,切勿吐槽,提建议请留言 摘要: 1.这个文件中只有J ...

  10. 133. Clone Graph 138. Copy List with Random Pointer 拷贝图和链表

    133. Clone Graph Clone an undirected graph. Each node in the graph contains a label and a list of it ...