[Question] How to add "Ordered/Unordered List" option in rte/custom block

Question

I'm trying to create an ordered list with grapesjs. I tried adding the following to the rte:

editor.RichTextEditor.add('orderedList',
{
  icon: '1.',
  attributes: {title: 'Ordered List'},
  result: rte => rte.exec('insertOrderedList')
});

And this works if my page is pre-filled with html when the editor is initialized, like below:

Prefilled Editor:

Create Ordered List:

If, however, I drop a new block into the canvas, and then press the ordered list button, I get a NS_ERROR_ILLEGAL_VALUE message, like below:

Create new Paragraph Block:

Create Ordered List:

How can I fix this so that:

we can insert lists in newly created blocks? (Side Note: My example shows me doing this through the rte toolbar, but I am open to making lists into a new block type, if that helps and someone can tell me how to make them work.)
we can indent lists to create multilevel bullets (currently the indent command via the rte also does not work on new blocks, possibly for the same reasons above)
(Optionally) we can use the tab key to indent the lists?

Answers (3)

thomas1204• October 31, 20192 reactions

From the above comments, I can now add ordered and unordered list. Is there any way to update existing ordered and unordered List ?

@artf @rahuloftheramaneffect

artf• August 13, 20190 reactions

Can you create a reproducible demo, please? That error without a stack trace is useless

(Optionally) we can use the tab key to indent the lists?

You should definitely do it by yourself or rely on something like CKEditor for more advanced text usage

rahuloftheramaneffect• August 13, 20190 reactions

Hey! Thanks for responding so quickly.

Can you create a reproducible demo, please? That error without a stack trace is useless

Here is a zip file containing a stripped down version of my editor page. Demo.zip

It includes a bunch of css and js files. The rte functions listed above are in editor_rte.js.

Steps to reproduce:

Open index.html (includes an initialized editor, some pre-existing text and a few blocks).
Double click on the pre-existing text to see the RTE toolbar. Use the list buttons on the right to verify that create list and indent content functionality works on pre-existing text.
Drag a paragraph block into the page.
Try to edit the text inside the new block, like previously, to create a list.
The error should have occurred.

(Optionally) we can use the tab key to indent the lists?

You should definitely do it by yourself or rely on something like CKEditor for more advanced text usage

Ah, alright. Thank you.

Edit: I use Firefox 68.0.1

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.

Presets Plugins Components Blocks Assets Commands I18n Layers Styles Storages RTE Newsletters Web pages Site builders

[Question] How to add "Ordered/Unordered List" option in rte/custom block

Question

Answers (3)

Related Questions and Answers

[Question] How to allow special characters in class name or data attribute?

FEAT: Add support for promises to custom RTE API

rich text editor issue

[Question] How to add toolbar functionality to the layers panel.

Paid Plugins That Match This Issue

Browse Plugin Categories