Not working with TinyMCE 5

[palpalani]

Recently updated to a new version of TinyMCE 5, after updating to the new version this plugin not working.

Is anyone have a working sample for the new version?

[itajackass]

Any news?

[palpalani]

@itajackass Right now this plugin updated to support the new version.

Before that I changed to support a new version and here is a working copy of my own version.

(function (tinymce) {
    tinymce.PluginManager.add('lineheight', function (editor, url, $) {

        editor.on('init', function () {
            editor.formatter.register({
                lineheight: {
                    block: 'div',
                    styles: {
                        'line-height': '%value'
                    }
                }
            });
        });

        editor.ui.registry.addMenuButton('lineheightselect', {
                text: 'Line Height',
                tooltip: 'Paragraph Line Height',
                fetch: function (callback) {
                    var items = [], defaultLineHeightFormats = '8pt 10pt 12pt 14pt 18pt 24pt 36pt';
                    var lineheight_formats = editor.settings.lineheight_formats || defaultLineHeightFormats;
                    lineheight_formats.split(' ').forEach(function(item) {
                        //var text = item, value = item;
                        var value = item;
                        // Allow text=value for line-height formats
                        var values = item.split('=');
                        if (values.length > 1) {
                            //text = values[0];
                            value = values[1];
                        }
                        items.push({
                            type: 'menuitem',
                            text: value,
                            onAction: function (_) {
                                tinymce.activeEditor.formatter.apply('lineheight', {
                                    value : value
                                });

                                var j = editor.getWin().parent.jQuery;
                                j('#' + j('#path').val()).find(j('#selector').val()).html(tinymce.activeEditor.getContent());
                            }
                        });
                    });
                    callback(items);
                }
            }
        );
    });

    tinymce.PluginManager.requireLangPack('lineheight', 'de');
})(tinymce);

[itajackass]

@palpalani hi thank you for your update. I tried it on the latest version of tinymce 5.1.1 but I get this error in console:

Error: Errors: 
Failed path: (toolbarbutton)
Could not find valid *strict* value for "onAction" in {
  "type": "button"
}

Input object: {
  "type": "button"
}

on the file: theme.min.js:9:575

[palpalani]

@itajackass Earlier I pasted the wrong version, Sorry about that. Now I updated the code with last comment itself.

[itajackass]

@palpalani Thank you. It works! This is a really plugin needed! You should ask for a merge or create a new fork to share it for all users that are looking for a line height plugin.

one suggest if you can enhance it: during a select text, and clicking LINE HEIGHT selectbox, default selected is always the first one (it will be good if plugin read the lineheight of selected text and autoselect the correct one if present in the list...). Another good enhance will be a button to RESET TO DEFAULT / REMOVE LINE HEIGHT because default tinymce REMOVE FORMATTING doesn't remove lineheight prop.

But for now...THANKS!!!

[itajackass]

I tried edit your code without success:

Added "default" to list, then edit in:

 if ( value == "default" ) {
	tinymce.activeEditor.formatter.remove('lineheight');
 } else {
	tinymce.activeEditor.formatter.apply('lineheight', {
		value : value
	});
 }

But formatting doesn't remove