Sample on how to define Key "setup" in Editor.Conf Dictionary

[davidmfritz]

Hi there,

I'd like to have an example on how to define a reference to a JavaScript function for Editor.Conf that actually gets executed when tinymceBlazorWrapper.init is run.

<Editor Value="@Text" ScriptSrc="/js/tinymce/tinymce.min.js" Conf="@_editorConf" ValueChanged="ValueChanged" />

@code {

// ...

    private readonly Dictionary<string, object> _editorConf = new()
    {
	    {"setup", "<<What to write here?>>"}
    };
}

Can you help me with this issue?

Thank you in advance!
Best regards, David

[exalate-issue-sync]

Internal Ref: INT-3238

[abhijeetgupta1988]

Refer following :

private Dictionary<string, object> editorConf = new Dictionary<string, object>{
{"toolbar", "undo redo | casechange blocks | bold italic backcolor | alignleft aligncenter alignright alignjustify | bullist numlist checklist outdent indent | removeformat | code table help"},
{"width", 800},
{"plugins","code,advlist,autolink,lists,link,image,charmap,preview,anchor,searchreplace,visualblocks,fullscreen,insertdatetime,media,table,help,wordcount"}

};

[davidmfritz]

Thank you, @abhijeetgupta1988, but that doesn't solve my issue on how to define a JavaScript function in a C# string that then gets executed with this NuGet Package.

[spocke]

There isn't a way currently the config js JSON serialized and so you can't pass in a function reference to it.

Not sure exactly how one would solve this maybe have a list of options that are callbacks then treat strings inside them as things you resolve in the global namespace. So setting "setup: "myFunc" in the C# record would then basically do "setup: myFunc" if myFunc is a global function if one want to hide that then one could have it be namespaced like setup: "foo.bar.baz.myFunc" can't think of any other idea so others are welcome.

[spocke]

You can set things client side using the https://www.tiny.cloud/docs/tinymce/6/blazor-ref/#jsconfsrc though it really depends in what you need inside that setup function call. If it's all client side JS then the JsConfSrc should work.

[LGinC]

You can set things client side using the https://www.tiny.cloud/docs/tinymce/6/blazor-ref/#jsconfsrc though it really depends in what you need inside that setup function call. If it's all client side JS then the JsConfSrc should work.

it work

MyEditor.razor

<Editor Id="mytextarea" JsConfSrc="editorInit" ScriptSrc="/lib/tinymce/tinymce.min.js" />

MyEditor.razor.js

window.editorInit = {
    toolbar: 'undo redo | bold italic | link image | h2 | h3 | mylist-with-title |',
    branding: false,
    resize: 'both',
    icons: 'default',
    theme: 'silver',
    content_css: ['/css/prod/base.css''],
    external_plugins: {
        'base': '/js/prod/base.js'
    },
    plugins: ['lists', 'link', 'image'],
    images_upload_handler: image_upload_handler,
    setup: (editor) => {
        editor.ui.registry.addButton('mylist-with-title', {
            icon: 'ordered-list-rtl',
            tooltip: 'with title list',
            onAction: function () {
                if (editor.selection.getContent() === '' || editor.selection.getContent() === ' ') {
                    editor.windowManager.alert('pls select something');
                    return;
                }
                const selectedNode = editor.selection.getNode();
                const isAlreadyList = selectedNode.tagName === 'UL' || Array.from(selectedNode.childNodes).some(node => node.tagName === 'UL');
                if (isAlreadyList) {
                    editor.execCommand('InsertUnorderedList');
                    return;
                }
                editor.windowManager.open({
                    title: 'choose list style',
                    body: {
                        type: 'panel',
                        items: [
                            {
                                type: 'listbox',
                                name: 'listStyle',
                                label: 'cols',
                                items: [
                                    { text: '1 col', value: 'col-md-12 col-sm-6' },
                                    { text: '2 cols', value: 'col-md-6 col-sm-6' },
                                    { text: '3 col's, value: 'col-md-4 col-sm-6' }
                                ]
                            }
                        ]
                    },
                    initialData: {
                        listStyle: lastSelectListWithTitle
                    },
                    buttons: [
                        {
                            type: 'cancel',
                            text: 'cancel'
                        },
                        {
                            type: 'submit',
                            text: 'commit',
                            primary: true
                        }
                    ],
                    onSubmit: function (api) {
                           //do something
                        }
                        api.close();
                    }
                });
            }
        });
}

import js in App.rarzor

<body>
    <Routes @rendermode="InteractiveAuto" />
    <script src="_framework/blazor.web.js"></script>
 
    <script src=@Assets["/Pages/MyEditor.razor.js"]></script>
</body>