由于tinyMCE 4与之前的版本相比有很大的变化,有人已经尝试将extjs 4. *集成到新版本的tinyMCE中吗? 最佳答案 基本集成非常简单:
Ext.define('TinyMceField', {
extend: 'Ext.form.field.TextArea'
,alias: 'widget.tinymce'
/**
* TinyMCE editor configuration.
*
* @cfg {Object}
*/
,editorConfig: undefined
,afterRender: function() {
this.callParent(arguments);
var me = this,
id = this.inputEl.id;
var editor = tinymce.createEditor(id, Ext.apply({
selector: '#' + id
,resize: false
,height: this.height
,width: this.width
,menubar: false
}, this.editorConfig));
this.editor = editor;
// set initial value when the editor has been rendered
editor.on('init', function() {
editor.setContent(me.value || '');
});
// render
editor.render();
// --- Relay events to Ext
editor.on('focus', function() {
me.previousContent = editor.getContent();
me.fireEvent('focus', me);
});
editor.on('blur', function() {
me.fireEvent('blur', me);
});
editor.on('change', function(e) {
var content = editor.getContent(),
previousContent = me.previousContent;
if (content !== previousContent) {
me.previousContent = content;
me.fireEvent('change', me, content, previousContent);
}
});
}
,getRawValue: function() {
var editor = this.editor,
value = editor && editor.initialized ? editor.getContent() : Ext.value(this.rawValue, '');
this.rawValue = value;
return value;
}
,setRawValue: function(value) {
this.callParent(arguments);
var editor = this.editor;
if (editor && editor.initialized) {
editor.setContent(value);
}
return this;
}
});
用法示例(see fiddle):
Ext.widget('window', {
width: 400
,height: 350
,layout: 'form'
,items: [{
xtype: 'textfield'
,fieldLabel: 'Foo'
}, {
xtype: 'tinymce'
,id: 'tinyEditor'
,fieldLabel: 'Bar'
,value: '<p>Foo</p><p><strong>Bar</strong></p>'
,listeners: {
change: function(me, newValue, oldValue) {
console.log('content changed: ' + oldValue + ' => ' + newValue);
}
,blur: function() { console.log('editor blurred'); }
,focus: function() { console.log('editor focused'); }
}
}]
,bbar: [{
text: 'Get value'
,handler: function() {
var e = Ext.getCmp('tinyEditor');
alert(e.getValue());
}
}]
});