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

  1. SpringMvc + Jsp+ 富文本 kindeditor 进行 图片ftp上传nginx服务器 实现

    一:html 原生态的附件上传 二:实现逻辑分析: 1.1.1 需求分析 Common.js 1.绑定事件 2.初始化参数 3.上传图片的url: /pic/upload 4.上图片参数名称: upl ...

  2. java富文本编辑器KindEditor

    在页面写一个编辑框: <textarea name="content" class="form-control" id="content&quo ...

  3. 富文本编辑器kindeditor配置

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

  4. kindeditor富文本框,上传文件后,显示文件名称

    kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定 ...

  5. 常用的富文本框插件FreeTextBox、CuteEditor、CKEditor、FCKEditor、TinyMCE、KindEditor ;和CKEditor实例

    http://www.cnblogs.com/cxd4321/archive/2013/01/30/2883078.html 目前市面上用的比较多的富文本编辑器有: FreeTextBox 一个有很多 ...

  6. django的admin或者应用中使用KindEditor富文本编辑器

    由于django后台管理没有富文本编辑器,看着好丑,展示出来的页面不美观,无法做到所见即所得的编辑方式,所以我们需要引入第三方富文本编辑器. 之前找了好多文档已经博客才把这个功能做出来,有些博客虽然写 ...

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

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

  8. 配置KindEditor富文本编辑器

    第一步:首先我们要到KindEditor官网下载资源包-点击进入官网下载KindEditor资源包 第二部:在下载完了KindEditor的资源包后解压结构如下图所示: 里面包括集中语言的文件上传后台 ...

  9. 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介

    1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...

随机推荐

  1. /tmp/crontab.tDoyrp: 设备上没有空间 查看文件夹所在分区 磁盘剩余空间 15g的root-mail大文件

    问题诊断: 文件夹所在磁盘已满 问题确认: 查看文件夹所在磁盘剩余空间,找出空间被消耗的文件(集) 查看文件夹所在磁盘空间的所属文件(暂未解决) [root@hadoop1 /]# df -Bg /t ...

  2. Java反射的基本应用

    反射机制,程序在运行时加载新的类,使程序更加灵活 public class HelooReflect { public static void main(String[] args) { // 获取类 ...

  3. git 如何让单个文件回退到指定的版本【转】

    本文转载自:http://blog.csdn.net/ikscher/article/details/43851643 1.进入到文件所在文件目录,或者能找到文件的路径查看文件的修改记录 1 $ gi ...

  4. ubuntu中pytesseract 安装与使用示例

    1. 安装 tesseract-ocr 包 安装方法: sudo apt-get install tesseract-ocr 2. 安装 PIL PIL(python imaging library) ...

  5. 洛谷P2943 清理——DP

    题目:https://www.luogu.org/problemnew/show/P2943 一眼看去就有个 n^2 的做法:f[i] = min{ f[j] + num( i - j ) * num ...

  6. sql 指删除表,改表名,改字段名

    删除表: DECLARE @Table NVARCHAR(30) DECLARE tmpCur CURSOR FOR SELECT name FROM sys.objects WHERE TYPE=' ...

  7. 使用ubuntu16.04配置linux内核和busybox出现错误的解决方法总结

    也许很多人都知道,ARM裸机1期加强版课程用的是ubuntu 16.04,当用这个ubuntu编译内核和制作文件系统的时候会出现一些问题,售后团队用了一天时间找到了如下解决方法.   更多干货关注威信 ...

  8. 哈理工OJ P2320:OX

    题目链接:OX 题意 :给出一个3X3的黑白棋棋盘,棋盘上有若干黑白子,再给出下一个下的人,问下一个下的人能否赢 分析:考虑到只有39种状态,故用一个数保存目前棋盘的状态,记为value,再枚举空位D ...

  9. bzoj 3875: [Ahoi2014&Jsoi2014]骑士游戏【dp+spfa】

    设f[i]为杀死i的最小代价,显然\( f[i]=min(k[i],s[i]+\sum f[to]) \) 但是这个东西有后效性,所以我们使用spfa来做,具体就是每更新一个f[i],就把能被它更新的 ...

  10. 4800: [Ceoi2015]Ice Hockey World Championship(折半搜索)

    4800: [Ceoi2015]Ice Hockey World Championship Time Limit: 10 Sec  Memory Limit: 256 MBSubmit: 622  S ...