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);
还不快抢沙发