CSS class for link dialog

  • Resolved jpkeisala

    (@jpkeisala)


    9 years, 12 months ago

    I would like to be able to choose or add CSS class to the hyperlink in the link dialog when adding a link.
    In the settings of TinyMCE advanced I found “Link (replaces the Insert/Edit Link dialog)” when I tick this it changes the dialog to more advanced but does not extend with CSS class field.
    Any ideas on how I can achieve this?

    Thank you in advance!

    https://www.ads-software.com/plugins/tinymce-advanced/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author Andrew Ozz

    (@azaozz)

    What you need is the link_class_list setting described here: https://www.tinymce.com/wiki.php/Configuration:link_class_list. Unfortunately this is very much site specific, cannot add a default list to TinyMCE Advanced.

    Has to be added to the TinyMCE init configuration, something like https://www.ads-software.com/plugins/advanced-tinymce-configuration/ will work well.

    I’m also looking for this feature.
    Where do I have to place to code from the first example (tinymce.com)? For me it isn’t any problem this is site specific, just not clear how to achieve it.

    Thanks for the help.

    Plugin Author Andrew Ozz

    (@azaozz)

    Sure, here it goes:

    1. Install https://www.ads-software.com/plugins/advanced-tinymce-configuration/.
    2. Add new TinyMCE setting for link_class_list.
    3. Follow the exact syntax as described on the TinyMCE help site. It will probably work better if all of it is on the same line (no line breaks).

    This will create a drop-down in the editor that will insert the classes you specified. The actual CSS classes will need to be added in both style.css and editor-style.css in your theme (best make a child theme).

    In the settings for TinyMCE config, I entered the following:

    Option name: link_class
Value: tinymce.init({plugins: "link",link_class_list: [{title: 'Activate', value: 'activate'}]});

    However, now, the menu or the typed content doesn’t even show up in the editor. It’s all blank. Did I do something wrong?

    I’ll have the exact same problem as described above.

    Plugin Author Andrew Ozz

    (@azaozz)

    Ah, you need to add only the actual setting, not the whole init ??
    On the left:

    link_class_list

    on the right:

    [{title: 'Activate', value: 'activate'}]

    I hope that will help.

    The documentation didn’t make my clear the Init wasn’t part of the value.
    I’ve got it working now, thanks for the help

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘CSS class for link dialog’ is closed to new replies.