Extjs4本身的HtmlEditor编辑器,太鸡肋了,简单的html能够应付一下,稍加复杂的就无能为力了。

对于Extjs的HtmlEditor扩展主要有三个方向,一个是扩展其本身的htmlEditor,这个我在2.2的时候,扩展过几个功能,例如图片上传,附件添加等等,效果并不是特别理想http://hi.baidu.com/chinacloud/item/8c078fce9763027fced4f8d7

第二个方法一般初学者都会想到,用iframe内嵌一个编辑页面,这个方式我只想说:别糟蹋Extjs

第三个方法就是引用第三方的插件,要善于使用轮子,用轮子来造车,自然我选择第三种。

富文本框编辑器选择很多,但唯有KindEditor让我青睐已久,从最初的版本到现在的4.x,一直在用,小巧稳定,功能强大,配置简单等,除此之外可能百度的Editor也还不错,其他的就不敢说了。

下面开始整合Extjs4和Kindeditor,Extjs是一套非常优秀的RIA框架,能够非常方便的实现类的继承和扩展,我们新创建一个组建,继承textarea。

 Ext.define('WMC.common.view.ExtKindEditor', {
extend: 'Ext.form.field.TextArea',
alias: 'widget.extkindeditor',//xtype名称
initComponent: function () {
this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>";
this.callParent(arguments);
this.on("boxready", function (t) {
this.inputEL = Ext.get(this.getId() + "-input");
this.editor = KindEditor.create('textarea[name="' + this.name + '"]', {
height: t.getHeight()-18,//有底边高度,需要减去
width: t.getWidth() - t.getLabelWidth(),//宽度需要减去label的宽度
basePath: '/Content/Plugin/kindeditor-4.1.5/',
uploadJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/upload_json.ashx',//路径自己改一下
fileManagerJson: '/Content/Plugin/kindeditor-4.1.5/asp.net/file_manager_json.ashx',//路径自己改一下
resizeType: 0,
wellFormatMode: true,
newlineTag: 'br',
allowFileManager: true,
allowPreviewEmoticons: true,
allowImageUpload: true,
items: [
'source', '|', 'undo', 'redo', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', '|',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'bold',
'italic', 'underline', 'lineheight', '|', 'image', 'multiimage',
'table', 'emoticons',
'link', 'unlink', 'fullscreen'
]
});
});
this.on("resize", function (t, w, h) {
this.editor.resize(w - t.getLabelWidth(), h-18);
});
},
setValue: function (value) {
if (this.editor) {
this.editor.html(value);
}
},
reset: function () {
if (this.editor) {
this.editor.html('');
}
},
setRawValue: function (value) {
if (this.editor) {
this.editor.text(value);
}
},
getValue: function () {
if (this.editor) {
return this.editor.html();
} else {
return ''
}
},
getRawValue: function () {
if (this.editor) {
return this.editor.text();
} else {
return ''
}
}
});

使用方法,和其他的field类似,如下:

//首先controller里要引用进来
Ext.define('WMC.controller.Main', {
extend: 'Ext.app.Controller',
.....
views: ['EditWin','WMC.common.view.ExtKindEditor'],
... //之后,在需要编辑的Window里,使用:
{
xtype: 'extkindeditor',
allowBlank: false,
name: 'Responsibilities',
height: 140,
width:670,
id: 'Responsibilities',
fieldLabel: '岗位职责'
}

然后界面就可以构造出来了

那么还剩一步,如何设置和获取extkindeditor的值呢?

//this.getSkills(),this.getResponsibilities()为refs中配置的get属性

//编辑
editRecord: function (view, record, item, index) {
var win = this.getEditWin();
var form = win.down("form");
form.loadRecord(record);
win.show();
//显示时候,将html的值显示到kindeditor中
this.getSkills().setValue(record.data.Skills);
this.getResponsibilities().setValue(record.data.Responsibilities);
},
//保存
saveRecord: function () {
var win = this.getEditWin();
var form = win.down("form");
var model = form.getValues();
//这里是重点,不设置的话,默认是非html格式的
model.Skills = this.getSkills().getValue();
model.Responsibilities = this.getResponsibilities().getValue(); if (form.isValid()) {
record = form.getRecord();
var store = this.getMainGrid().getStore();
if (record) {//如果是修改
record.set(model);
}
else {
store.add(model);
}
win.close();
store.sync();
}
},

OK,Enjoy It!

额。。。忘记了,不要忘记在页面head里加上引用:

<link href="~/Content/Plugin/kindeditor-4.1.5/themes/default/default.css" rel="stylesheet" />
<script src="~/Content/Plugin/kindeditor-4.1.5/kindeditor-all-min.js"></script>
<script src="~/Content/Plugin/kindeditor-4.1.5/lang/zh_CN.js"></script>

Extjs4.2x与富文本框编辑器KindEditor的整合的更多相关文章

  1. 富文本框编辑器实现:a、支持图片复制粘贴;b、支持word复制粘贴图文。

    Chrome+IE默认支持粘贴剪切板中的图片,但是我要发布的文章存在word里面,图片多达数十张,我总不能一张一张复制吧?Chrome高版本提供了可以将单张图片转换在BASE64字符串的功能.但是无法 ...

  2. wangEditor 轻量级富文本框编辑器使用方法

    首先第一步先去wangEditor官网下载所需要的脚本文件! http://www.wangeditor.com/ 接下来先在你的项目的HTML标签里加上这样一段标签: 1 <body> ...

  3. H5页面设计器,仿有赞商城页面在线设计器,比富文本框更友好的内容编辑器

    基本上每个web应用,都会牵扯到内容编辑,尤其是移动的web应用,微信开发之类的.页面内容自定义是最常用的功能了,之前大部分解决方案都是采用富文本框编辑器kindeditor,ueditor,cked ...

  4. webdriver高级应用- 操作富文本框

    富文本框的技术实现和普通的文本框的定位存在较大的区别,富文本框的常见技术用到了Frame标签,并且在Frame里面实现了一个完整的HTML网页结构,所以使用普通的定位模式将无法直接定位到富文本框对象. ...

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

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

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

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

  7. 使用kindeditor获取不到富文本框中的值

    获取不到富文本框中的值,网上一搜一堆,但最终没有几个能解决问题的,折腾一番最终解决.注意就是红色代码,加上之后就可以解决问题了. KindEditor.ready(function (K) { var ...

  8. kindeditor富文本框使用方法

    这周我一共使用了两个文本框编辑器!我的上一篇文档讲的是wangeditor这个编辑器,现在就来讲讲kindeditor这个编辑器! 首先还是去它的官网去下载脚本! http://kindeditor. ...

  9. 富文本HTML编辑器UEditor

    Baidu百度开源富文本HTML编辑器UEditor JS代码网 发表于: 2013-10-30 分类:HTML编辑器  点击:2133  UEditor是由百度web前端研发部开发所见即所得富文本H ...

随机推荐

  1. JAXB注解 @XmlRootElement 及XML文件解析详解

    @Retention(value=RUNTIME) @Target(value=TYPE) public @interface XmlRootElement @Inherited @Retention ...

  2. hihoCoder挑战赛19 A.Rikka with Sequence(状压DP)

    题目链接 比赛链接 \(Description\) \(Solution\) 参考:https://www.cnblogs.com/SovietPower/p/9781573.html 暴力:\(f[ ...

  3. python 元组和字典中元素作为函数调用参数传递

    模式1.  def test1(*args): test3(*args) def test2(**kargs): test3(**kargs) def test3(a, b): print(a,b) ...

  4. [Beego模型] 二、CRUD 操作

    [Beego模型] 一.ORM 使用方法 [Beego模型] 二.CRUD 操作 [Beego模型] 三.高级查询 [Beego模型] 四.使用SQL语句进行查询 [Beego模型] 五.构造查询 [ ...

  5. Asp.Net Core异常处理整理

    目前版本是Asp.Net Core v1.1,这个版本的感觉对Http请求中的错误处理方便不是很完善. 没有HttpException异常类,不能在任何的地方自由的抛出对应的异常状态. 一.默认的异常 ...

  6. SQL Server 导出Excel有换行的解决方法

    参考地址::https://vcoo.cc/blog/1234/ 从 SQL Server 查询结果中复制结果数据粘贴到 Excel 中存在这么个问题:如果字段内容中有换行符,那么粘贴到 Excel ...

  7. Android典型界面设计(5)——使用SlidingMenu和DrawerLayout分别实现左右侧边栏

    一.问题描述 侧边栏是Android应用中十分常见的界面效果,可随主屏在左侧或右侧联动,是特别适应手机等小屏幕特性的典型界面设计方案之一,常用作应用的操作菜单,如图所示 实现侧边栏可以使用第三方组件s ...

  8. (转)Fur Shader

    转自:http://qiankanglai.me/misc/2014/11/15/fur-shader/ 花时间看了下毛发效果,苦于囊中羞涩没能买QuickFur.furFX等插件,最后找到了Fur ...

  9. 利用python制作在Linux服务器后台定时运行的任务-邮件提醒

    1. 自动任务的功能为: 定时扫描数据库中的记录,然后发邮件 代码如下 scheduleMail.py import pymysql import smtplib from email.mime.te ...

  10. Python 读取WAV文件并绘制波形图

    aa Python 读取WAV文件并绘制波形图 ffmpeg -i test_pcm_mulaw.wav -f wav -codec:a pcm_s16le -ar 8000 -ac 1 out.wa ...