JSFiddle - React, Tailwind, and code Playground
by Toni
HTML
<script src="//tinymce.cachefly.net/4.0/tinymce.min.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/ext-theme-neptune/ext-theme-neptune-all.css">
<div id="editor"></div>
JavaScript
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;
editor.on('init', function() {
editor.setContent(me.value || '');
});
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);
}
});
editor.render();
}
,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...