I need to make it so TinyMCE doesn't create a new list element from scratch when in a <li> element and i press the enter key.
I'm trying to customize Tiny so that i can enter <li> elements with the following structure:
<ul is="class1">
<li>
<span is="spanNumber">X</span> <div>content</div>
</li>
</ul>
What i need is to change enter behaviour so that all following <li> elements, when the caret is inside my list, follow that structure, including the class but allowing me to change spanNumber
.
My first instinct was just to change the keyDown
event so that i check which element i'm in, and use editor.preventDefault()
to programmatically change the keydown event, but i'm stuck there.
I create the first element using a toolbar button calling this function:
function creaArticolo(e) {
const numeroarticolo = 0;
e.execCommand('mceInsertTemplate',false,'<li><span is="lh-number" data-value='+numeroarticolo+')> ('+numeroarticolo+') </span> <div is="lh-recital">replace with text </div></li>');
return;
};
And i was planning on using a registered event on('keydown')
to get the element and change enter key behaviour.
At this point i'm unable to go forward since i'm not very familiar with TypeScript and i'm struggling with the underlying code for Enter key and list
behaviour. Can anybody suggest a JavaScript solution to the problem?
Another possible solution is making it so that i create the <ul> element and make adding <li> elements possible with another JS function, but it seems pretty rough, since pressing Enter while in the <li>
element would result in creating a new <li>
not following my template.
I should mention i'm not using Jquery and don't intend to (if that's relevant) and my backend is a Node.js + Express server.