Recent Topics

Table Of Content Plugin

Started by on Jun 17, 2017 – Contents updated: Sep 12, 2017

Jun 17, 2017 04:35    

Please see the screenshot at second floor.
BUT I met a problem, this plugin can't use the [ teaserbreak ] tag, because this tag would cut the content also make the table of content incompletly display.How to deal with it ???

Jun 17, 2017 11:54

Hi @haharen,

The problem is that your javascript code depends on a wrapper that you create in your RenderItemAsHtml function, here:

$params['data'] = "<div id='" . $content_id . "'>" . $params['data'] . "</div>" . $script;

However, there is a built-in function that splits up the content of the post into different parts and also make a tags balance on each of those parts here: So, the closing </div> of your custom wrapper ends up right before of the "more" link, which is what b2evolution is considering as the first part of the post (teaser).

I think this behaviour is correct. So, you can make your code to depend on core ids and classes instead of depend on a custom generated id. I mean, if you replace the line:

$content_id = $this->random_str(5);

with this other:

$content_id = 'item_'.(isset($Item->ID)?$Item->ID:'').' .evo_post__full_text';

the plugin will work correctly (well, at least in the couple of quick tests I made :D)

That will make the first line of code I copied above useless, so you can replace it with:

$params['data'] .= $script;


Jun 17, 2017 13:22

Hi @mgsolipa ,
It's really cool and perfect solution to my problem, I have re-upload the code zip.Thanks a lot.

Jun 17, 2017 19:44

@haharen Good!

Do you have a Github account? You can share the code using it. If so, I can upload the code and give you full control of the repository. However, it's better if you upload it on your own, because it's your code ;)

Do you want for us to include the plugin here: ?

Jun 18, 2017 09:52

I am very glad to share this plugin in for anyone who wants to use. The code has made a lot of changes, also replace the previous JS file, so use the new one.
Also I create a github , but not much clearly how to use it at the moment, I will study.
Now a new problem, I try to add a selection of order list or unordered list for user choose, but it is only in effect at first setting, then unless reinstall it won't go into effect. Is there a way to make it work every time?

Jun 18, 2017 15:04

@haharen your list style setting works as expected. Maybe you can't see changes being applied because of the pre-render items cache. Almost all the render plugins output (depending on their rendering mode[1]) is generated and saved into a cache each time we save the post. This way, there is no need to re-generate the content of the post each time it's displayed.

This is the case with your plugin, so after a settings change in your plugin, you have two options: 1) go the posts and save them again. 2) Force this massively by going to System > Maintenance > Clear pre-rendered item cache (DB)

[1] You could dig deeper into the rendering mode of the plugins explained here:

Jun 18, 2017 15:41

Now I am clear. Thanks for the complete explanat, also I will continue to improve this plugin.

Jul 25, 2017 11:59

@haharen Thanks for the plugin, it is really useful.
But one thing is not working for me, using german language. All Umlauts (ä, ü,) don't show up. Maybe the plugin is not running UTF-8.
Would you please have a look at it an fix it? Would be great.
Thanks and Regards

Here is a screenshot

Aug 14, 2017 07:10

@saunders wrote earlier:

@haharen Thanks for the plugin, it is really useful.
But one thing is not working for me, using german language. All Umlauts (ä, ü,) don't show up. Maybe the plugin is not running UTF-8.
Would you please have a look at it an fix it? Would be great.
Thanks and Regards

Here is a screenshot

Hi @saunders
I have fix it . Please replace the js file.

Sep 03, 2017 19:32

@haharen sorry for the delayed reply. I did not get or did not register your answer. The fix did not work for me. The TOC did not show up after fixing it that way.

Although I am not Regex approved I tried to fix it this way (by trial and error ;-) and it works.
I replaced line 107 in toc.js with:
tit = txt.replace(/[^a-zA-Z0-9_\-\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u00FF\s\u4e00-\u9fa5]+/g, '');

The TOC shows up and shows the Umlaute.


Sep 07, 2017 14:40

continuing… but other characters like "" ? ! used in headings remain blocked. I tried to figure out the Regex expression. But the plugin disappears (as it did, following your fix).

Hope for a fix. It is an awesome and useful plugin and it would be great to see it working with all that characters.


Sep 08, 2017 15:24

continuing… using a skin with sticky header (or fix header) the anchor link places the target beneath the header.
I tried to solve this by the following CSS

a:before {
    margin:-150px 0 0;

This worked on one hand but it also set a mess to pages view.
What code would work to solve this?

Regards, Will

Sep 11, 2017 07:31

@saunders this person has a similar problem:

We can do something like the suggested solution there, just add the following css code to the collection (quick mode:

   height:150px; /* this is the height of your header */
   margin-top:-150px; /* this is again negative value of the height of your header */

and apply this little change to your plugin's code:

That did the trick for me, but you will need to test on your own skin.

@haharen I sent you a pull request in case you want to permanently add this modification to the plugin.


Sep 12, 2017 17:48

@mgsolipa great, that also works for me!

May I add an ask? Could you help me to get special characters like " , ; ? ! „ ” - ) to work within TOC? I managed that german Umlaute show up. But adding those special characters to regex in line 107 (see my post the plugin does not show the TOC in the post. Would be great, if you will get a fix.


Form is loading...

free blog software – This forum is powered by b2evolution CMS, a complete engine for your website.