How to integrate TinyMCE into my UI?
Posted: Fri Apr 26, 2024 8:49 pm
xui.Class('App', 'xui.Module',{
Instance:{
// Dependency CSS
Dependencies:[],
// Required js
Required:["//cdnjs.cloudflare.com/ajax/libs/tinymce/6.1.0/tinymce.min.js"],
// To initialize properties
properties : {},
// To initialize instance(e.g. properties)
initialize : function(){
},
// To initialize internal components (mostly UI controls)
// *** If you're not a skilled, dont modify this function manually ***
iniComponents : function(){
// [[Code created by CrossUI RAD Studio
var host=this, children=[], append=function(child){children.push(child.get(0));};
append(
xui.create("xui.UI.Block")
.setHost(host,"b_container")
.setLeft("5em")
.setTop("2em")
.setWidth("50em")
.setHeight("30em")
.setPanelBgClr("#FFFFFF")
);
host.b_container.append(
xui.create("xui.UI.Div")
.setHost(host,"i_text")
.setDock("fill")
.onRender("_i_onrender")
);
append(
xui.create("xui.UI.Button")
.setHost(host,"b_set")
.setLeft("12.19047619047619em")
.setTop("33.523809523809526em")
.setWidth("6.780952380952381em")
.setCaption("Set conents")
.onClick("_b_set_onclick")
);
append(
xui.create("xui.UI.Button")
.setHost(host,"b_get")
.setLeft("32em")
.setTop("33.523809523809526em")
.setWidth("6.780952380952381em")
.setCaption("Get conents")
.onClick("_b_get_onclick")
);
return children;
// ]]Code created by CrossUI RAD Studio
},
// Give a chance to determine which UI controls will be appended to parent container
customAppend : function(parent, subId, left, top){
// "return false" will cause all the internal UI controls will be added to the parent panel
return false;
},
_i_onrender:function(profile){
var ns = this, uictrl = profile.boxing();
tinymce.init({
target: uictrl.getRootNode(),
init_instance_callback: function(editor){
ns._editor = editor;
}
});
},
_b_set_onclick:function(profile, e, src, value){
var ns = this;
ns._editor.setContent("html");
},
_b_get_onclick:function(profile, e, src, value){
var ns = this;
alert(ns._editor.getContent());
}
}
});