2

TLDR: I'm trying to add a class to an <ol>, and can't seem to do it without creating a nested list. Here's what I want:

<ol class="bold-numbers">
  <li>Item 1</li>
</ol>

Here's what I seem to be getting with all of these approaches below:

<ol>
  <li>
    <ol class="bold-numbers">
      <li>Item 1</li>
    </ol>
  </li>
</ol>

Custom Styles Approach

I followed this approach first, like in this question. These are the settings I'm using for the custom style. The style formats dropdown has also been added to the menu.

function bb_mce_before_init_insert_formats( $init_array ) {  
  $style_formats = array(  
    array(  
      'title' => 'Bold Numbers',
      'block' => 'ol',
      'classes' => 'bold-numbers',
      'wrapper' => true,
    )
  );
  $init_array['style_formats'] = json_encode( $style_formats );
  return $init_array;  
} 
add_filter( 'tiny_mce_before_init', 'bb_mce_before_init_insert_formats' );  

I then:

  1. Create a numbered list.
  2. Select all the list items
  3. Select the custom style from the dropdown

This leaves me with markup like so:

<ol>
  <li style="list-style-type: none">
    <ol class="bold-numbers">
      <li>Lets try this again.</li>
      <li>With a new list, created from the first.</li>
      <li>Seems the spacing might be different between each line?</li>
    </ol>
  </li>
</ol>

So, yes, the class is being added, but how can I prevent the extra ol from being added?

Operation: Make Own Button

I then tried to just make my own button that tries to capture the selection, parse the HTML, add the class, then return it with a class added.

(function () {
  tinymce.create('tinymce.plugins.boldOL', {
    init: function (editor, url) {
      editor.addButton('boldOL', {
        title: 'Add ordered list with bold numbers',
        text: 'Bold Number List',
        icon: '',
        onclick: function () {
          var content = jQuery(editor.selection.getContent())[0];
          var wrap = document.createElement('div');
          content.classList.add('bold-numbers');
          wrap.appendChild(content);
          editor.selection.setContent( wrap.innerHTML );
        }
      });
    },
    createControl: function (n, cm) {
      return null;
    },
  });
  tinymce.PluginManager.add('boldOL', tinymce.plugins.boldOL);
})();

This was interesting because when I consoled out my selection, it was using ul instead of ol. But still just inserted it into a list item:

<ol>
  <li>
    <ul class="bold-numbers">
      <li>item here</li>
    <ul>
  </li>
</ol>

Shortcode??

As a last resort, I tried to create a button that would just add a shortcode div wrapper with the class. The 'button' ended up leaving me with the same problem, where the selection that tinymce captures is still contained within the parent ol and ul.

So for this I had:

<ol>
  [shortcode inserted here]
  <li>Items</li>
  [/shortcode]
<ol>

Any clues for how to make this happen?

  • I try your code "Make Own Button" and I have seen that this editor is not easy to custom. depending of where ends the selection, opening and ending <ul></ul> are not in the selection but they are added when we use "setSelection" ! an idee to create a pretty list is to rely only on PHP and not on JavaScript. e.g. you can create custom fields with the values of the list and you create the list in the template. – mmm Oct 31 '17 at 21:40
  • @mmm Hmm. I think though would be a little clunky for the user to figure out. How would they associate the custom fields with where it should be inserted? Even if I built some crazy shortcode where they could do it inline, it's definitely not ideal. – theaemarie Nov 1 '17 at 13:32
3

I figured this out! I ended up running across this page today searching for something else and thought, THIS IS IT.

I needed this property 'selector', because it seems like that guides what the selection should be targeting so I changed 'block' => ol to 'selector' => 'ol'.

function bb_mce_before_init_insert_formats( $init_array ) {  
  $style_formats = array(  
    array(  
      'title' => 'Bold Numbers',
      'selector' => 'ol',
      'classes' => 'bold-numbers',
      'wrapper' => true,
    )
  );
  $init_array['style_formats'] = json_encode( $style_formats );
  return $init_array;  
} 
add_filter( 'tiny_mce_before_init', 'bb_mce_before_init_insert_formats' );  
  • 1
    Had the same problem, went to same sites. Changing 'block' to 'selector'... PERFECT! – Steve C. Apr 24 '18 at 15:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.