Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Froala Editor line-height plugin
/*!
* froala_editor v2.4.0 (https://www.froala.com/wysiwyg-editor)
* License https://froala.com/wysiwyg-editor/terms/
* Copyright 2014-2016 Froala Labs
*/
!function (a) {
"function" == typeof define && define.amd ? define(["jquery"], a) : "object" == typeof module && module.exports ? module.exports = function (b, c) {
return void 0 === c && (c = "undefined" != typeof window ? require("jquery") : require("jquery")(b)), a(c), c
} : a(jQuery)
}(function (a) {
a.extend(a.FE.DEFAULTS, {
lineHeight: ["inherit", "10px", "20px", "30px", "40px", "50px", "60px", "70px", "80px", "90px", "100px", "110px", "120px", "130px", "140px", "150px"],
lineHeightSelection: !1,
lineHeightDefaultSelection: "1.4"
}), a.FE.PLUGINS.lineHeight = function (b) {
function c(c) {
b.selection.save(), b.html.wrap(!0, !0, !0, !0), b.selection.restore();
for (var d = b.selection.blocks(), e = 0; e < d.length; e++) {
a(d[e]).css("line-height", c).removeClass("fr-temp-div");
}
b.selection.save(), b.html.unwrap(), b.selection.restore()
}
function d(c, d) {
var e = a(b.selection.element()).css("line-height");
d.find(".fr-command.fr-active").removeClass("fr-active").attr("aria-selected", !1), d.find('.fr-command[data-param1="' + e + '"]').addClass("fr-active").attr("aria-selected", !0);
var f = d.find(".fr-dropdown-list"), g = d.find(".fr-active").parent();
g.length ? f.parent().scrollTop(g.offset().top - f.offset().top - (f.parent().outerHeight() / 2 - g.outerHeight() / 2)) : f.parent().scrollTop(0)
}
function e(c) {
if (b.opts.lineHeightSelection) {
var d = a(b.selection.element()).css("line-height");
c.find("> span").text(d)
}
}
return {apply: c, refreshOnShow: d, refresh: e}
}, a.FE.RegisterCommand("lineHeight", {
type: "dropdown", title: "Межстрочный интервал", displaySelection: function (a) {
return a.opts.lineHeightSelection
}, displaySelectionWidth: 30, defaultSelection: function (a) {
return a.opts.lineHeightDefaultSelection
}, html: function () {
for (var a = '<ul class="fr-dropdown-list" role="presentation">', b = this.opts.lineHeight, c = 0; c < b.length; c++) {
var d = b[c];
a += '<li role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="lineHeight" data-param1="' + d + '" title="' + d + '">' + d + "</a></li>"
}
return a += "</ul>"
}, callback: function (a, b) {
this.lineHeight.apply(b)
}, refresh: function (a) {
this.lineHeight.refresh(a)
}, refreshOnShow: function (a, b) {
this.lineHeight.refreshOnShow(a, b)
}, plugin: "lineHeight"
}), a.FE.DefineIcon("lineHeight", {NAME: "arrows-v"})
});
@cronoklee

This comment has been minimized.

Copy link

@cronoklee cronoklee commented Jul 1, 2018

I made an icon for this if anyone wants it:
$.FroalaEditor.DefineIcon('lineHeight', {PATH: "<path d='M7,15.5v6h4.9L5.9,28L0,21.5h5v-6v-9H0L5.9,0l5.9,6.5H7V15.5z M14,27.5h18v-4H14V27.5z M14,17.5h18v-4H14V17.5z M14,4.5v4h18v-4H14z'/>", ALT: 'Line Spacing', template: 'svg'});

@MauriceW2

This comment has been minimized.

Copy link

@MauriceW2 MauriceW2 commented Jul 31, 2019

How to implement this? I added the file in the plugins directory, but nothing appears. Do I need to edit another file to tell Froala that it must use this plugin? (My froala version is 2.4.2)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.