jquery - 在 Redactor 所见即所得中创建字体系列下拉列表

Question

我正在尝试在 Redactor 中创建一个下拉菜单编辑。最大的问题是使用选定的字体系列围绕选定的文本创建一个容器。

到目前为止，我已经完成了自定义下拉列表的基本设置:

$("#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
}

事实上，所需的方法与内置的 fontcolor 函数非常相似，它也将选定的文本包装在容器中，并为其分配正确的颜色样式属性。

Answer 1

改进之前的响应，这里是 JQuery 中的一个实现，它将在下拉列表中很好地列出所有可能的网络安全字体:

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
        }
    }
});