关于JqueryEasyUI集合Kindeditor
写在前面
上一篇《初试JqueryEasyUI(附Demo)》;
在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor、ueditor、kindeditor、eWebEditor等,其实最早接触的是ckeditor(fckeditor),用着功能确实不错,但是感觉太复杂了,而且东西也比较大,不是很方便,ueditor是百度出品的,但是用过kindeditor之后发现感觉还是kindeditor比较好用点,个人感觉,勿喷!
kindeditor的示例也是比较全的,而且兼容性也比较好,就用它试着集合easyui了。
实现
因本人js技术有限,试了好久也没搞好,此处略去十万个字。。。
网上找到一段js代码:
(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();
}
};
$.parser.plugins.push("kindeditor");
})(jQuery, KindEditor);
需要同时引用easyui和kindeditor相关样式和脚本,然后就可以像使用easyui组件一样使用kindeditor:
<textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 100%; height: 200px; visibility: hidden;">EasyUI集合KindEditor</textarea>
如果你使用的是后台获取设置kindeditor值的话可以使用这个,但是js获取或设置文本框值,上面就不好实现,也试了很多方法没有解决,有关js的大神如果知道方法还请赐教。
注意创建kindeditor的时候有个afterChange事件,表示更改编辑器的内容发生的事件,这边需要重写下。其实kindeditor不集合到easyui中也是可以使用,只不过没有上面这样创建方便,做了个示例,大家可以看下:
<tr>
<td>easyui-kindeditor编辑器:</td>
<td>
<textarea name="easyui_ditor" id="easyui_ditor" class="easyui-kindeditor" style="width: 100%; height: 200px; visibility: hidden;">EasyUI集合KindEditor</textarea>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="">设置</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(KindEditor.html())">获取</a>
</td>
</tr>
<tr>
<td>kindeditor编辑器:</td>
<td>
<textarea name="txtContent" id="txtContent" style="width: 100%; height: 200px; visibility: hidden;">KindEditor</textarea>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="editor.html('我在设置KindEditor内容');">设置</a>
<a href="javascript:void(0)" class="easyui-linkbutton" onclick="alert(editor.html())">获取</a>
</td>
</tr>
js代码:
//编辑器
var editor;
KindEditor.ready(function (K) {
editor = K.create('textarea[name="txtContent"]', {
allowFileManager: true,
resizeType: 1,
allowPreviewEmoticons: false,
items: [
'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline',
'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
'insertunorderedlist', '|', 'emoticons', 'image', 'link']
});
});
效果:
完整示例Demo下载:http://pan.baidu.com/s/1c0zP6KC
关于JqueryEasyUI集合Kindeditor的更多相关文章
- (编辑器)Jquery-EasyUI集合Kindeditor编辑器
1.在html里面添加 list.html list.html (function ($, K) { if (!K) throw "KindEditor未定义!"; functio ...
- 最近遇到的若干Web前端问题:disable和readonly,JqueryEasyUI,KindEditor
最近项目中用到了Jquery Easyui和KindEditor等框架组件,问题真不少啊~ 一些看起来很简单理所当然的事情,竟然花费了不少时间,才解决好~ 1.readonly和disable的区 ...
- jQueryEasyUI
jQueryEasyUI 编辑 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面.开发者 ...
- 二十二、【轻量级开源框架】EFW框架Web前端开发之JqueryEasyUI
回<[开源]EFW框架系列文章索引> EFW框架源代码下载V1.2:http://pan.baidu.com/s/1hcnuA EFW框架实例源代码下载:http://pan ...
- JqueryEasyUI教程入门篇
什么是jQueryEasyUI? JqueryUI是一组基于jQuery的UI插件集合 学习jQueryEasyUI的条件? 必须掌握Jquery的基本语法知识 jQueryEasyUI的特点? 1. ...
- [转]JqueryEasyUI教程入门篇
什么是jQueryEasyUI? JqueryUI是一组基于jQuery的UI插件集合 学习jQueryEasyUI的条件? 必须掌握Jquery的基本语法知识 jQueryEasyUI的特点? 1. ...
- jquery-easyui实现页面布局和增删改查操作(SSH2框架支持)转载
http://blessht.iteye.com/blog/1069749/ 已注册:ooip 关联的csdn 前几天心血来潮用jquery-easyui+spring.struts2.hiberna ...
- “MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现)
“MVC+Nhibernate+Jquery-EasyUI” 信息发布系统 第四篇(用户管理功能的实现) 一.前三篇的内容是否对您有帮助呢?如果有的话,请您继续关注这篇吧,这篇主要是实现”用户管理“的 ...
- python学习博客地址集合。。。
python学习博客地址集合... 老师讲课博客目录 http://www.bootcdn.cn/bootstrap/ bootstrap cdn在线地址 http://www.cnblogs. ...
随机推荐
- java分享第十八天( JAVA利用enum结合testng做数据驱动示例)
数据驱动是做自动化测试中很重要的一部分,数据源的方案也是百花八门了,比如利用外部文件,直接在@DataProvider中写死等等,我们今天介绍一下利用enum来做数据源,先来看一下enum的写法: p ...
- 让/etc/profile文件修改后立即生效
方法1: 让/etc/profile文件修改后立即生效 ,可以使用如下命令: # . /etc/profile 注意: . 和 /etc/profile 有空格 方法2: 让/etc/profile ...
- jsfl调整笔刷的笔触和颜色
今天在用jsfl写脚本以简化对fla资源的处理工作,在画矩形时需要能自动调整笔刷的笔触颜色,填充颜色透明度,查jsfl文档无果,上网查了多番资料写出了可用代码,共享下: var fill = fl.g ...
- WIN32 窗口封装类实现
CQWnd.h窗口类定义 // QWnd.h: interface for the CQWnd class. // ////////////////////////////////////////// ...
- webstorm2016注册码
43B4A73YYJ-eyJsaWNlbnNlSWQiOiI0M0I0QTczWVlKIiwibGljZW5zZWVOYW1lIjoibGFuIHl1IiwiYXNzaWduZWVOYW1lIjoiI ...
- java web(六)多个请求对应一个Servlet
概要: 提交请求的常用方式有两种,get/post , 运行程序后被请求,在加载执行web.xml文件时通过该文件中的映射关系找到即将要执行的Servlet; 而在要执行的Servlet文件中可通过反 ...
- session跟cookie的区别
这些都是基础知识,不过有必要做深入了解.先简单介绍一下. 二者的定义: 当你在浏览网站的时候,WEB 服务器会先送一小小资料放在你的计算机上,Cookie 会帮你在网站上所打的文字或是一些选择, 都纪 ...
- 查看sbt版本
进入 sbt 命令行模式, 键入sbtVersion 得到[info]0.13.12
- cordova插件开发注意事项
1. 编写插件,先创建好cordova项目之后,在项目里开发调试好在去创建插件目录 如何在cordova项目里创建呢,在android文件夹下面的res/xml/config.xml里去加入插件 例如 ...
- angular----关于注入HTML
后台接口返回了一个HTML字符串,要绑定到页面,第一时间想到了innerHTML... 一:先说下一般用法 //原生用法 <div id="content"></ ...