TinyMCE Table of Contents plugin seems disabled

Question

What I'm trying to do is, add a Table of contents plugin to my TinyMce 5 edior. I'm using react and also my TinyMCE is in an reactstrap modal. When i try to add other plugins, they work without problem. When i try to add Table of contents plugin to the editor, everything looks fine except the table of contents. It is unclickable, i think it is disabled. I checked the html code, there is aria-diasabled: true on that item. I'm new in react by the way.

Here is the screenshot of the problem:

https://i.stack.imgur.com/iRFwq.png

Here is my code:

<Editor
                    initialValue="<p>This is the initial content of the editor</p>"
                    init={{
                      height: 500,
                      menubar: "insert file",
                      plugins: [
                        "advlist autolink lists link image charmap print preview anchor",
                        "searchreplace visualblocks code fullscreen",
                        "insertdatetime media table paste code help wordcount",
                        "toc fullpage",
                      ],
                      toolbar:
                        // eslint-disable-next-line no-multi-str
                        "undo redo | formatselect | bold italic backcolor | \
                        alignleft aligncenter alignright alignjustify | \
                        bullist numlist outdent indent | removeformat | help\
                        toc fullpage",
                    }}
                    onEditorChange={this.handleEditorChange}
                  />

Any solutions there?

score 0 · Accepted Answer · answered Jan 13 '21 at 23:32

I believe you misunderstand what that plugin does. Per the documentation page:

The toc plugin will generate a basic Table of Contents and insert it into the editor at the current cursor position. Items for the table will be taken from the headers found in the content.

If your content has no headings (h1 --> h6) there is no data from which to create the TOC. If your content has such heading tags the menu option will be available and a TOC will be created based on the content in the editor.

TinyMCE Table of Contents plugin seems disabled

1 Answers1