富文本KindEditor使用
1.官网down KindEditor,添加到自己的项目中;添加时可把不需要的文件夹干掉,asp/php等等。我的项目用的是纯html和js,直接调用后台api;

2.页面引入相关js。eclipse中打开min.js的时候可能会报错,直接忽略就可以,不影响使用。
<link rel="stylesheet" href="/kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="/kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="/kindeditor/kindeditor-all-min.js"></script>
<script charset="utf-8" src="/kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="/kindeditor/plugins/code/prettify.js"></script>
3.编辑器初始化脚本。
<script type="text/javascript">
KindEditor.ready(function(K){
K.create('textarea[name="messagecontent"]', {
themeType: 'simple',
resizeType: 1,
allowFileManager: true,
//当失去焦点时执行 this.sync();
afterBlur: function(){this.sync();}
});
});
</script>
4.form表单添加文本域。
<textarea id="editor" name="messagecontent" style="width:700px;height:300px;"></textarea>
5.表单提交,如果不执行sync()函数,将无法获取到textarea的值。
function saveMsgInfo(){
if($('#msgInfoForm').form('validate')){
var formData = $("#msgInfoForm").serialize();
formData = decodeURIComponent(formData,true);
console.info(formData);
$("#msgInfoForm").form("submit", {
url:forceRefresh('msg/info/createMsgInfo'),
onSubmit: function(param){
param = formData;
},
success: function(data){
}
});
}
}
6.文本域的清空和赋值
KindEditor.instances[0].html("");
KindEditor.instances[0].html(val);
富文本KindEditor使用的更多相关文章
- SpringMvc + Jsp+ 富文本 kindeditor 进行 图片ftp上传nginx服务器 实现
一:html 原生态的附件上传 二:实现逻辑分析: 1.1.1 需求分析 Common.js 1.绑定事件 2.初始化参数 3.上传图片的url: /pic/upload 4.上图片参数名称: upl ...
- java富文本编辑器KindEditor
在页面写一个编辑框: <textarea name="content" class="form-control" id="content&quo ...
- 富文本编辑器kindeditor配置
<!--富文本编辑器kindeditor配置↓ --> <link type="text/css" rel="stylesheet" href ...
- kindeditor富文本框,上传文件后,显示文件名称
kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...
- 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例
http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...
- django的admin或者应用中使用KindEditor富文本编辑器
由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...
- easyUI整合富文本编辑器KindEditor详细教程(附源码)
原因 在今年4月份的时候写过一篇关于easyui整合UEditor的文章Spring+SpringMVC+MyBatis+easyUI整合优化篇(六)easyUI与富文本编辑器UEditor整合,从那 ...
- 配置KindEditor富文本编辑器
第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...
随机推荐
- 【bzoj4401】块的计数
首先,块的大小确定的话,可以发现方案最多只有1种 然后就可以O(nsqrt(n))搞,不过会TLE 接着我们又发现,一个节点可以作一个块的根,当且仅当该节点的size能被块的大小整除 然后就可以O(n ...
- (17)会话之Cookie的使用详解
Cooke技术 1,特点 Cookie技术:会话数据保存在浏览器客户端. 2,Cookie技术核心 Cookie类:用于存储会话数据 1)构造Cookie对象 Cookie(java.lang.St ...
- html5--项目实战-仿天猫(移动端页面)
html5--项目实战-仿天猫(移动端页面) 总结: 1.标准搜索栏的做法:这里是弹性布局,放大镜和小话筒是background img 2.手机尾部导航做法:这是一个个 li 标签,每个li标签占% ...
- 六.OC基础--1. id和instancetype类型,2.动态类型检测,3.响应方法,构造方法,4.重写构造方法,5.自定义构造方法
1. id和instancetype类型, id和instancetype类型区别: 1. id和instancetype都可以用来作为方法的返回值 2. id可以用来定义类型,instancetyp ...
- BZOJ_2947_[Poi2000]促销_堆
BZOJ_2947_[Poi2000]促销_堆 Description Bytelandish连锁超市委托你编写一个程序来模拟一项即将施行的促销活动,该活动的规则如下: ●想要参与的顾客,只需把他的个 ...
- 小程序-demo:小程序示例-page/component2
ylbtech-小程序-demo:小程序示例-page/component2 以下将展示小程序官方组件能力,组件样式仅供参考,开发者可根据自身需求自定义组件样式,具体属性参数详见小程序开发文档. 1. ...
- STM32F4 LTDC学习
很久没有写东西了,也很久没看文档了吼吼,觉得有点无聊,找来F4看看,主要看F429.督促自己多看多记录. 首先配置同步时序先看参考手册 下面看一个实际例子,一块439的开发板 设置: LTDC_Ini ...
- 【196】Dell 移动工作站系统安装方法
会出现找不到硬盘的情况,解决方法:安装系统的时候需要加载阵列卡驱动 下载阵列卡驱动,以 Dell T7610 为例根据安装系统进行选择,地址:http://zh.community.dell.com/ ...
- Unity3d 应用系统分析
- python正则表达式_总结
正则表达式: 作用:正则表达式是用来查找字符串的. 之前:使用正则表达式首先要导入re模块(import re) re.match -- 从字符串的第一个单词开始匹配字符串.如果匹配到则返回一个对象: ...