How to integrate TinyMCE into my UI?

Basic Issues for CrossUI
Post Reply
linb
Site Admin
Posts: 11
Joined: Thu Jan 25, 2024 4:40 pm

How to integrate TinyMCE into my UI?

Post by linb »

   

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());
        }
    }
});

   
Post Reply