1

I'm writing a plugin to add custom formats to TinyMCE using styleselect.

I've scoured the documentation and hundreds of examples covering the inline, block, selector, classes, and wrapper arguments.

I can't find a single example of how to use "attributes" argument.

Both WordPress and TinyMCE say this:

"Name/value object with attributes to apply to the selected elements or the new inline/block element."

Part of my array deals with external links - namely to add classes that help with Google analytics.

array(  
    'title'         => 'Link Resource',
    'selector'      => 'a', 
    'classes'       => 'smart-link-external smart-link-resource',   
    'wrapper'       => false,
),

I was hoping to use the attributes argument to add things like rel="external".

I'm not sure this is even the intended use for the argument, let alone how to configure it.

Any help would be greatly appreciated.

1

I'm not sure this is even the intended use for the argument

Yes, it is. Use the attributes option to add HTML attributes (e.g. class, title, etc.) to the generated or target element (e.g. span).

So based on your example:

array(  
    'title'         => 'Link Resource',
    'selector'      => 'a', 
    'classes'       => 'smart-link-external smart-link-resource',   
    'wrapper'       => false,
),

When you select a link (i.e. an a element) in the TinyMCE editor, and then apply the Link Resource style/format to that element/text, TinyMCE will add smart-link-external smart-link-resource to the element's/link's class attribute:

<!-- Before you applied "Link Resource" -->
<a href="https://wordpress.org/">WordPress</a>

<!-- After you applied that style/format -->
<a class="smart-link-external smart-link-resource"
  href="http://google.com">WordPress</a>

I was hoping to use the attributes argument to add things like rel="external".

So if you change your code to:

array(  
    'title'         => 'Link Resource',
    'selector'      => 'a', 
    'classes'       => 'smart-link-external smart-link-resource',   
    'wrapper'       => false,
    // The change: Add the `attributes` array.
    'attributes'    => array(
        'title' => 'My Link Resource',
        'rel'   => 'external',
    ),
),

The link's markup would change to:

<a class="smart-link-external smart-link-resource"
  title="My Link Resource" href="https://wordpress.org/" rel="external">WordPress</a>

So as you can see, the link/element now has these two new attributes: title and rel.


[DEMO] Try this Pen: Select the text/link "TinyMCE" in the heading in the TinyMCE editor, then choose "Link Resource" from the "Formats" drop-down menu in the editor's second toolbar row. Then go to "View → Source code" or "Tools → Source code" via the first toolbar row.

The corresponding JS/TinyMCE code:

{
    title: 'Link Resource',
    selector: 'a',
    attributes: {
        title: 'My Link Resource',
        rel: 'external',
        'class': 'smart-link-external smart-link-resource'
    },
    wrapper: false
}
  • 1
    You're a rock star! ... Thanks for the quick reply - there are zero examples out there ... Face palm for me not thinking 'array'. – ljburton Jul 22 '18 at 18:07
  • No problem, I'm glad it helped you. =) But sorry for the typo — it's wordpress.org and not google.com.. – Sally CJ Jul 23 '18 at 1:03

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.