Ext JS 4.1.1整合CKEditor。

最新推荐文章于 2017-12-07 08:11:41 发布

原创最新推荐文章于 2017-12-07 08:11:41 发布 · 240 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext js #CKEditor #Ext

EXTJS 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在ExtJS框架中实现CKEditor富文本编辑器的组件化，并提供了具体的实现代码。此外，还包含了必要的CSS样式以确保组件正常运行。


Ext.define('GB.view.CKeditor', {
	extend : 'Ext.Component',
	alias : 'widget.ckeditor',
	cls : "xcke",
	initComponent : function() {
		this.html = "<textarea id='" + this.getId() + "-input' name='" + this.name + "'></textarea>";

		this.callParent(arguments);
		this.on('afterrender', function() {
			this.editor = CKEDITOR.replace(this.getId() + '-input');
		}, this);
	},
	setValue : function(value) {
		this.callParent(arguments);
		if (this.editor) {
			this.editor.setData(value);
		}
	},
	getValue : function() {
		return this.getRawValue();
	},
	getRawValue : function() {
		if (this.editor) {
			return this.editor.getData()
		} else {
			return ''
		}
	}
});

除此之外，你还需要加入两个样式：


.xcke * {
	box-sizing: content-box !important;
	-moz-box-sizing: content-box !important;
	-ms-box-sizing: content-box !important;
	-webkit-box-sizing: content-box !important;
}

.cke_dialog_tabs * {
	box-sizing: content-box !important;
	-moz-box-sizing: content-box !important;
	-ms-box-sizing: content-box !important;
	-webkit-box-sizing: content-box !important;
}

运行后基本能用。