Trumbowyg: No apparent way to create multi-level lists

Created on 29 Jun 2016  路  5Comments  路  Source: Alex-D/Trumbowyg

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.

  • Like

    • This

  • And

    • Like

    • This

enhancement request need contributor

Most helpful comment

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
  }
};

All 5 comments

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

Was this page helpful?
0 / 5 - 0 ratings