如何在此有用的编辑器中添加新按钮以突出显示文本

Question

This is an example that I found http://jsbin.com/awituc/25/edit

the question is how to create a new button to add specific color maybe red to the selected text ?

Answer 1

Solution: http://jsbin.com/awituc/230/edit

Added code to plugin:
Settings:

colors: [{ key: "Red", value: "#ff0000" },
         { key: "Green", value: "00ff00" },
         { key: "Blue", value: "#0000ff" }]

can be overridden when initiating plugin:

$("textarea").myTextEditor({ colors: [{ key: "yellow", value: "#ffff00" }] });

Dropdown:

var selectColor = $("<select/>", {
        data: {
            commandName: "ForeColor"
        },
        change: execCommand
    }).appendTo(buttonPane);

Code that sets color:

$.each(settings.colors, function (i, v) {
        $("<option/>", {
            value: v.value,
            text: v.key,
            style: "color:" + v.value
        }).appendTo(selectColor);

    });

execCommand reference:
http://www.developphp.com/view_lesson.php?v=879

jQuery plugins tutorial:
http://bit.ly/14dXuXL