CODEWITHSUNDEEP
jquerydrop-down-menuwysiwygtext-editorrich-text-editor
Gijs
Gijs

Reputation: 196

Creating font-family drop-down in Redactor WYSIWYG

I'm trying to create a dropdown in the Redactor editor. The biggest problem is to create a container around the selected text with the selected font-family.

So far, I have the basic setup for a custom drop-down:

$("#text_edit").redactor({
    buttons: ['html', '|', 'bold', 'italic', 'deleted', '|', 'table', 'link', '|', 'fontcolor', 'backcolor', '|', 'fontfamily'],
    buttonsCustom: {
        fontfamily: {
            title: "Select Font",
            dropdown: {
                Arial: {
                    title: 'Arial',
                    callback: insertFont
                },
                Georgia: {
                    title: 'Georgia',
                    callback: insertFont
                }
            }
        }
    }
});

function insertFont(obj, e, key)
{
    // wrap selected text in <span> container with style attribute and selected font
}

In fact the desired method is very similar to the built-in fontcolor function, which also wraps up the selected text in a container and assigns the right color style attribute to it.

Upvotes: 3

Views: 4211

Answers (3)

benske
benske

Reputation: 4050

Redactor released new plugins for that purpose:

fontcolor.js, fontsize.js and fontfamily.js

When included, you can use them like this:

elem.redactor({
      plugins: ['fontcolor', 'fontsize', 'fontfamily']
});

See this repository: https://github.com/johnsardine/redactor-plugins

Upvotes: 0

Sebastien Marion
Sebastien Marion

Reputation: 270

Improving upon the previous response, here is an implementaion in JQuery which will list all possible web-safe fonts nicely in a dropdown:

var oFontMap: {
arial: ["Arial", "Arial, Helvetica, sans-serif"],
arialblack: ["Arial Black", '"Arial Black", Gadget, sans-serif'],
comicsans: ["Courier New", '"Courier New", Courier, monospace'],
courier: ["Comic Sans", '"Comic Sans MS", cursive, sans-serif'],
impact: ["Impact", 'Impact, Charcoal, sans-serif'],
lucida: ["Lucida", '"Lucida Sans Unicode", "Lucida Grande", sans-serif'],
lucidaconsole: ["Lucida Console", '"Lucida Console", Monaco, monospace'],
georgia: ["Georgia", "Georgia, serif"],
palatino: ["Palatino Linotype", '"Palatino Linotype", "Book Antiqua", Palatino, serif'],
tahoma: ["Tahoma", "Tahoma, Geneva, sans-serif"],
times: ["Times New Roman", "Times, serif"],
trebuchet: ["Trebuchet", '"Trebuchet MS", Helvetica, sans-serif'],
verdana: ["Verdana", "Verdana, Geneva, sans-serif"] };

//Create the font dropdown
var oFontDropdown = {}
$.each(oFontMap, function(iIndex, oFont){
    var sFontName = oFont[0];
    var sFontFace = oFont[1];
    oFontDropdown[iIndex] = {
        title: "<font face='"+sFontFace+"'>"+sFontName+"</font>",
        callback: function(obj, e, sFont){
            obj.execCommand("fontname", sFontFace);
        }
    }
});

return $(".redactor").redactor({
    focus: true,
    buttonsAdd: ["|", "font"],
    buttonsCustom: {
        font: {
            title: "Advanced Font List",
            dropdown: oFontDropdown
        }
    }
});

Upvotes: 6

Txarli
Txarli

Reputation: 21

You could try this, I've solved the same requirement, it in this way, and is running fine here.

var setFontFamily;

setFontFamily = function(obj, e, key) {
  if (key === "serif") {
    obj.execCommand("fontname", "Times New Roman");
  }
  if (key === "sans") {
    return obj.execCommand("fontname", "Helvetica");
  }
};

$(document).ready(function() {
  return $(".redactor").redactor({
    focus: true,
    buttonsAdd: ["|", "font"],
    buttonsCustom: {
      font: {
        title: "Advanced List",
        dropdown: {
          serif: {
            title: "Times",
            callback: setFontFamily
          },
          sans: {
            title: "Helvetica",
            callback: setFontFamily
          }
        }
      }
    }
  });
});

The setFontFamily function isn't the most beautiful in the world, but it is a proof of concept, then you can see how it define font families.

I'm a rails coder, so I'll leave here the same code, but coffescript version (in case anyone needs it)

setFontFamily = (obj, e, key) ->
  obj.execCommand "fontname", "Times New Roman"  if key is "serif"
  obj.execCommand "fontname", "Helvetica"  if key is "sans"

$(document).ready ->
  $(".redactor").redactor
    focus: true
    buttonsAdd: ["|", "font"]
    buttonsCustom:
      font:
        title: "Advanced List"
        dropdown:
          serif:
            title: "Times"
            callback: setFontFamily
          sans:
            title: "Helvetica"
            callback: setFontFamily

Upvotes: 2

Related Questions