To Validate the data inside the TinyEditor, I put the flow like this, very clear: Validation Failed => Add redborder, If not, remove the existed one
The JS inside is nothing complex too, just add and remove class:
However now it soon hit the weakpoint, that is this only can implement on a screen that have 1 TinyEditor, now the app has expanded to 2 TinyEditor so the above JS can only works on THE FIRST Widget
How can I improve to set Red border to the specific TinyEditor that I want? Or any way to workaroung is okay too.
Hi Huy,
The issue is that document.querySelector(".tox.tox-tinymce") always returns the first match on the page. To target a specific editor, scope the selector to the container you passed in InputWidgetId.
If you click on each TinyEditor in your widget tree, the first property you'll see is InputWidgetId -- that's the Id of the container where TinyMCE renders. You need to pass that same Id to your JS node so it knows which editor to target.
Add a WidgetId (Text) input parameter to your AddErrorBorder and RemoveErrorBorder client actions. When you call them in your validation flow, pass the InputWidgetId of the specific TinyEditor you're validating. Then change the JS to:
AddErrorBorder:
var container = document.getElementById($parameters.WidgetId);
if (container) {
var editor = container.querySelector(".tox.tox-tinymce");
if (editor) editor.classList.add("tiny-error");
}
RemoveErrorBorder:
if (editor) editor.classList.remove("tiny-error");
This way each validation branch targets only the editor it's checking, regardless of how many you have on the screen.
Hope this helps!
Hey Huy,
Good Day!
I am trying to understand your problem.
1. You said you are using 2 tiny editors, is that fixed or dynamic like inside a list ?
2. Are those inside a form ?
3. When you click on a button like submit you are triggering this validations ?
4. Can you share the OML if possible ?
Thanks
1. 2 editor and it is fixed
2. No
3. When I click the button, it will trigger the validation, if validation fail will trigger client action add Error Border 2. The thing is this action use JS like in the image above, it using the document.querySelector(), and will auto pick the first editor to red border it.
4. Sorry, its production
Can you try this JS?
// Loop through all active TinyMCE instances directly
tinymce.editors.forEach((editor) => {
let content = editor.getContent({ format: 'text' }).trim();
let container = editor.getContainer(); // This gets the .tox-tinymce div
if (content === "") {
container.classList.add("tiny-error");
} else {
container.classList.remove("tiny-error");
});