kindeditor 富文本的应用

官方链接 :http://kindeditor.net/down.php

目前最新版本是4.x

主要特点

  • 快速:体积小,加载速度快
  • 开源:开放源代码,高水平,高品质
  • 底层:内置自定义 DOM 类库,精确操作 DOM
  • 扩展:基于插件的设计,所有功能都是插件,可根据需求增减功能
  • 风格:修改编辑器风格非常容易,只需修改一个 CSS 文件
  • 兼容:支持大部分主流浏览器,比如 IE、Firefox、Safari、Chrome、Opera

使用说明:下载后解压放到目录中。 将所有文件上传到您的网站程序目录里,例如:http://您的域名/editor/

添加引用

<script charset="utf-8" src="../editor/kindeditor-all-min.js"></script>

html中配置textarea

我们以配置两个富文本框 为例

<textarea id="address" name="address" style="width:700px;height:300px;"></textarea>
<textarea id="rule" name="rule" style="width:700px;height:300px;"></textarea>

script脚本中进行注册

  KindEditor.ready(function(K) {
            window.editorRule = K.create('#rule');
            window.editorAddress = K.create('#address');
        });

对数据进行保存

editorAddress.sync(); //要先调用同步,数据才能拿到。
editorRule.sync();
var searchConditon={};
searchConditon.rule = $("#rule").val(); //jq的方式获取数据
searchConditon.address = $("#address").val();

修改时展示数据

editorAddress.html(d.data.address);
editorRule.html(d.data.rule);

本文由 hcb 创作,采用 知识共享署名 3.0,可自由转载、引用,但需署名作者且注明文章出处。

还不快抢沙发

添加新评论