We seem to lack any means to create deeper list levels in Trumbowyg. It's not a problem for my users who as a matter of policy don't ever use numbered lists and only single-level bulleted lists, but I imagine it's something other people might want.
Idk why contenteditable does not manage this and Idk how to do that via Trumbowyg, sorry :/
I have tested some other editor and it is not possible to do this in a small code.
Sorry :/
In case anyone looks here for a solution to the nested list levels in the future, you can do it by using the built-in outdent and indent contenteditable commands. Do this by calling execCmd on the Trumbowyg editor you define.
$('#my-editor').trumbowyg({
// trumbowyg definition here
}).on('keydown keypress', function trumbowygKeydownKeypressEvent(event){
if (event.keyCode === 9) { // tab key
event.preventDefault(); // prevent the tab key event from bubbling up
if(event.shiftKey){
$('#my-editor').trumbowyg('execCmd', {
cmd: 'outdent',
param: null,
forceCss: false,
});
}
else{
$('#my-editor').trumbowyg('execCmd', {
cmd: 'indent',
param: null,
forceCss: false,
});
}
}
});
Here's a btnsDef, maybe someone will turn it into a plugin:
jQuery.trumbowyg.defaultOptions.btnsDef = {
indent: {
fn: 'indent',
title: 'Indent',
isSupported: function () { return !!document.queryCommandSupported && !!document.queryCommandSupported('indent'); },
hasIcon: false
},
outdent: {
fn: 'outdent',
title: 'Outdent',
isSupported: function () { return !!document.queryCommandSupported && !!document.queryCommandSupported('outdent'); },
hasIcon: false
}
};
Made pull request #923 to implement the solution by @patrickRocketVisor
Most helpful comment
Here's a btnsDef, maybe someone will turn it into a plugin: