TinyMce Change Border Color

I have implemented tinymce like below.

function initTinymce(){

tinymce.init({
selector: '#tinymce_textarea',
plugins: 'autolink link code lists media table image textcolor paste directionality wordcount charmap hr pagebreak insertdatetime advlist save autoresize',
font_family_formats:
    "Andale Mono=andale mono,times; Arial=arial,helvetica,sans-serif; Book Antiqua=book antiqua,palatino; Courier New=courier new,courier; Georgia=georgia,palatino; Helvetica=helvetica; Impact=impact,chicago; Tahoma=tahoma,arial,helvetica,sans-serif; Terminal=terminal,monaco; Times New Roman=times new roman,times; Trebuchet MS=trebuchet ms,geneva; Verdana=verdana,geneva; Webdings=webdings; Wingdings=wingdings,zapf dingbats",

toolbar: [
    {
    name: 'history',
    items: ['undo', 'redo'],
    },
    {
    name: 'formatting',
    items: ['bold', 'italic', 'underline', 'strikethrough', 'removeformat'],
    },
    {
    name: 'colors',
    items: ['forecolor', 'backcolor'],
    },
    {
    name: 'alignment',
    items: ['alignleft', 'aligncenter', 'alignright', 'alignjustify'],
    },
    {
    name: 'lists',
    items: ['bullist', 'numlist'],
    },
],
toolbar_mode: 'floating',
toolbar_sticky: true,
tinycomments_mode: 'embedded',
tinycomments_author: 'Author name',
autocorrect_autocorrect: false,
max_height: 300,
min_height: 300,
    
autoresize_bottom_margin: 10,
save_onsavecallback: () => {
    callNativeApp ();
},
mobile: {
menubar: false
},
branding: false,
statusbar: false,
promotion: false,
init_instance_callback(editor) {
    getWordCount();
},
setup: function (editor) {
    editor.on("change", function () {
        callNativeApp(editor);
    });
    editor.on("keyup", function () {
        getWordCount();
        callNativeApp(editor);
        editingBegin();
    });
}
});

}

Now I need to change border color of the tinymce container when the user reached the maximum word count. I was able to get the word count using below code.

function getWordCount() {
try {
    const count = tinymce.activeEditor.plugins.wordcount.body.getWordCount();
    webkit.messageHandlers.wordCountCallbackHandler.postMessage(count);
} catch(err) {
    console.log('The native context does not exist yet');
}

}

But I couldn't able to find a way to change the border color of the tinymce. Could you please help to do this?

If I got your question correctly, you want to give the border color to the text area (where the user can type) in tinymce.

The selector of that text area wrapper is .tox-editor-container. So in your getWordCount function, you can do something like this-

function getWordCount() {
  try {
    const count = tinymce.activeEditor.plugins.wordcount.body.getWordCount();
    webkit.messageHandlers.wordCountCallbackHandler.postMessage(count);
    // If reaches max then give a red border else do not
    document.querySelector('.tox-editor-container').style.border = count > YOUR_MAX_WORD_COUNT ? '3px solid red' : '';
  } catch (err) {
    console.log('The native context does not exist yet');
  }
}

If you want to exclude the border from the toolbar then you can try the .tox-sidebar-wrap selector.

document.querySelector('.tox-sidebar-wrap').style.border = count > YOUR_MAX_WORD_COUNT ? '3px solid red' : '';