(编辑器)Jquery-EasyUI集合Kindeditor编辑器
1.在html里面添加
list.html
list.html (function ($, K) {
if (!K)
throw "KindEditor未定义!"; function create(target) {
var opts = $.data(target, 'kindeditor').options;
var editor = K.create(target, opts);
$.data(target, 'kindeditor').options.editor = editor;
} $.fn.kindeditor = function (options, param) {
if (typeof options == 'string') {
var method = $.fn.kindeditor.methods[options];
if (method) {
return method(this, param);
}
}
options = options || {};
return this.each(function () {
var state = $.data(this, 'kindeditor');
if (state) {
$.extend(state.options, options);
} else {
state = $.data(this, 'kindeditor', {
options: $.extend({}, $.fn.kindeditor.defaults, $.fn.kindeditor.parseOptions(this), options)
});
}
create(this);
});
} $.fn.kindeditor.parseOptions = function (target) {
return $.extend({}, $.parser.parseOptions(target, []));
}; $.fn.kindeditor.methods = {
editor: function (jq) {
return $.data(jq[0], 'kindeditor').options.editor;
}
}; $.fn.kindeditor.defaults = {
resizeType: 1,
allowPreviewEmoticons: false,
allowImageUpload: false,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link'],
afterChange: function () {
this.sync();
},
afterBlur: function () { this.sync(); }
};
$.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);
2.需要同时引用easyui和kindeditor相关样式和脚本,然后就可以像使用easyui组件一样使用kindeditor:
<link href="kindeditor-4.1.10/examples/index.css" rel="stylesheet" />
<script src="kindeditor-4.1.10/kindeditor.js"></script>
<script src="kindeditor-4.1.10/kindeditor-all.js"></script>
<script src="kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script src="kindeditor-4.1.10/kindeditor-min.js"></script>
<script src="kindeditor-4.1.10/lang/zh_CN.js"></script>
调用方法:
<textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 90%; height: 140px; visibility: hidden;">KindEditor</textarea>
3.360浏览器不兼容,firefox浏览器正常,所以赋值方法
KE.html(id, val)
设置编辑器的HTML内容。
参数:
id:String,编辑器的ID
val: String,HTML字符串
返回值:无
页面只有一个编辑器的话最新版本这样写就可以。
KindEditor.html('#txtIntroduce', data.Introduce);
loadFilter: function (data) {
$.post("../Action/newsList.ashx", { content: $('#easyui_ditor').val() }, function (data) {
var json = eval("(" + data + ")");
//alert(json.news[0].Content)
//$('#easyui_ditor').val(json.news[0].Content);
KindEditor.html($('#easyui_ditor'), json.news[0].Content);
//console.info($('#easyui_ditor').val());
});
(编辑器)Jquery-EasyUI集合Kindeditor编辑器的更多相关文章
- 关于JqueryEasyUI集合Kindeditor
写在前面 上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 扩展编辑器
jQuery EasyUI 数据网格 - 扩展编辑器 一些常见的编辑器(editor)添加到数据网格(datagrid),以便用户编辑数据. 所有的编辑器(editor)都定义在 $.fn.datag ...
- KindEditor 编辑器使用方法
http://kindeditor.net/docs/usage.html 编辑器使用方法 1. 下载编辑器 下载 KindEditor 最新版本,下载之后打开 examples/index.html ...
- KindEditor编辑器在ASP.NET中的使用
KindEditor编辑器在ASP.NET中的使用 最近做的项目中都有用到富文本编辑器,一直在寻找最后用的富文本编辑器,之前用过CKEditor,也用过UEditor,这次打算用 一下KindEdit ...
- 【HTML】KindEditor编辑器在ASP.NET中使用
本文大多内容来自KindEditor官网,自己加工理解后做的一个备份. 编辑器使用方法 1. 下载编辑器 下载 KindEditor 最新版本,下载之后打开 examples/index.html 就 ...
- ThinPHP第二十八天(F函数和file_put_contents区别|PHP生成PHP文件,Kindeditor编辑器使用方法)
1.F(name,data,path)函数和file_put_contents(file,str)区别 F函数直接生成<?php ?>格式的php文件了,将data加入到<?php和 ...
- 将dedecms织梦后台编辑器ckeditor更换为kindeditor,并高亮显示代码
1.下载kindeditor,并解压到kindeditor目录,把kindeditor目录复制到dede的include目录下(ps:修改kindeditor-all-min.js.lang文件夹下z ...
- Django项目开发,XSS攻击,图片防盗链,图片验证码,kindeditor编辑器
目录 一.Django项目开发 1. 项目开发流程 2. auth模块的补充 (1)django的admin可视化管理页面 (2)将admin可视化管理页面的模型表显示成中文 (3)auth模块的用户 ...
- 如何在一个页面添加多个不同的kindeditor编辑器
kindeditor官方下载地址:http://kindeditor.net/down.php (入门必看)kindeditor官方文档:http://kindeditor.net/doc.ph ...
随机推荐
- 我的Vim配置(自动补全/树形文件浏览)
配置文件的下载路径在这里 http://files.cnblogs.com/files/oloroso/vim.configure.xz.gz 这实际上是一个 xz 格式的文件,添加的 gz 文件后 ...
- SVN权限管理
转自:http://www.cnblogs.com/xingchen/archive/2010/07/22/1782684.html /******************************** ...
- phpcms 无法显示缩略图 Call to undefined function image_type_to_extension
问题背景: 线下的phpcms项目没问题,线上的phpcms新添加的图片缩略图显示有问题,查看了一下php版本,线下是5.5的,线上的是5.1的 问题原因: 看了一下线上的错误日志,显示: PHP F ...
- MySQL thread pool【转】
本文来自:http://blog.chinaunix.net/uid-26896862-id-3993773.html 刚刚经历了淘宝的双11,真实感受到了紧张的氛围.尽管DB淡定的度过,但是历程中的 ...
- winrt控件
http://www.mindscapehq.com/products/metroelements 常见的翻书,相册,图表,时间组件 demo下载地址http://assets.mindscape.c ...
- ASM:《X86汇编语言-从实模式到保护模式》第8章:实模式下硬盘的访问,程序重定位和加载
第八章是一个非常重要的章节,讲述的是实模式下对硬件的访问(这一节主要讲的是硬盘),还有用户程序重定位的问题.现在整理出来刚好能和保护模式下的用户程序定位作一个对比. ★PART1:用户程序的重 ...
- iOS-UIView 之 layoutMargins & preservesSuperviewLayoutMargins 解惑
这里先看下苹果给出的解释: iOS8.0之后,uiview默认layoutMargins 为(8,8,8,8),也可以自己指定,仅适用于自动布局:当添加子view到父view上时,这样设置好约束 默认 ...
- ssm控制输出sql(二)
望时高科联通log4j # DEBUG,INFO,WARN,ERROR,FATAL LOG_LEVEL=DEBUG ---------这里对应sql的级别 log4j.rootLogger=${LOG ...
- CSS中的ul与li样式详解
CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...
- Android 6.0的运行时权限
原文 http://droidyue.com/blog/2016/01/17/understanding-marshmallow-runtime-permission/ 主题 安卓开发 Andr ...