I found a way to integrate tinymce to be used as editor in data/propertygrid.
<script>
$.extend($.fn.datagrid.defaults.editors, {
tinymce: {
init: function(container, options){
var h = 400;
var s = '';
if (typeof options !== 'undefined') {
if(typeof options.height !== 'undefined' ) h=options.height;
if(typeof options.setup !== 'undefined' ) s = JSON.stringify(options.setup);
}
var xid = 'root' + uniqid();
var id = 'textbox' + uniqid();
var input = $('<div data-setup=\'' + s + '\' style="height:' + h + 'px"><iframe style="height:' + h + 'px" scrolling="no" class="tinyframe" id="' + xid + '" frameBorder="0" /><textarea style="display:none" id="' + id + '" /></div>').appendTo(container);
return input;
},
destroy: function(target){
$(target).remove();
},
getValue: function(target){
return $(target).find('iframe')[0].contentWindow.getValue();
},
setValue: function(target, value){
var id=$(target).find('textarea').html(value).attr('id');
$(target).find('iframe').attr('src', '/tinymce.html?id=' + id);
},
resize: function(target, width){
$(target)._outerWidth(width);
$(target).find('iframe')._outerWidth(width);
}
}
}
</script>
The only other thing you need is to enable the url /timymce.html on your server. It has to provide a document like this:
<html>
<head>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
</head>
<body style='padding:0px;margin:0px'>
<textarea id='tinymce'>
</textarea>
<script>
$.extend({
getUrlVars: function(){
var vars = [], hash;
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
for(var i = 0; i < hashes.length; i++)
{
hash = hashes
.split('=');
vars.push(hash[0]);
vars[hash[0]] = hash[1];
}
return vars;
},
getUrlVar: function(name){
return $.getUrlVars()[name];
}
});
$(function() {
var id='#' + $.getUrlVar('id');
$('#tinymce').html(parent.$(id).html());
var h=parent.$(id).closest('div').height();
var setup=parent.$(id).closest('div').attr('data-setup');
$('body').hide();
$('body').height(h);
var options = {
plugins: "fullscreen image imagetools",
resize: false,
selector: '#tinymce',
menubar: 'file edit insert view format table tools image',
setup : function(ed) {
ed.on('load',function(e) {
window.setTimeout(function() {
$('body').show();
ed.execCommand('mceFullScreen');
},1);
});
}
};
if(setup!='') $.extend(options, JSON.parse(setup));
tinymce.init(options);
});
function getValue(value) {
return tinyMCE.activeEditor.getContent({format : 'raw'});
}
</script>
</body>
</html>
The document is quite static ...
You do not need to include the tinymce-Script in your project exept for this special file.
Options given under "setup" in the editor-options-object are passed directly to tinymce.
Quite easy. If anyone manages to style the tinymce to look more easyui-ish: Let me know. The only changes have to be made in the html-File.
