how can i configure tinymce to insert spans into list tags

1 Views

I am using the tinyMCE in wordpress and I would like to alter the numbered list html so that when the editors create the lists using the button in between each li, a span is also added.

Current

<ol>
<li>this</li>
<li>is</li>
<li>current</li>
</ol>

Required

<ol>
<li><span class="test">this</span></li>
<li><span class="test">is </span></li>
<li><span class="test">what i want </span></li>
</ol>

my preference is to make the span the default when clicking on numlist button, but if it is easy to make a custom button to achieve this that advice would be very welcome too.

Read More

Many thanks in advance.

Post Views: 1

Related posts

Leave a Reply

2 comments

  2. In case anyone else is interested I did achieve the end out come but not through modifying the tinymce editor as the tinymce custom button route is not one i have time to pursue.

    So instead I manipulated the ‘content’ on its way out of the db and did some simple regex preg__replace and str_replace work to end up with what i what i needed.

    so the content manager now just creates an unordered list and adds numbers themselves at the start. we then loop through and adds in the span and p tags around the content and number. which then means the content can be styled beautifully! not an ideal solution but it works for now.

    example $content = “1.Help me do this”

        $content = str_replace("<li>","<li><p>",$content);
    $content = str_replace("</li>","</p></li>",$content);
    $pattern = "/(<p>?)+([0-9]{1,}.?)/";
    echo preg_replace($pattern,"<span>$2</span> $1",$content);