MS Word style color picker sample

[Lasse]

Hi there,


Just thought I would like to share my color picker for the editor, similar to the one in Microsoft Word:

@(Html.Kendo().Editor()
.Name("Editor")
.Tools(tools => tools
    .Clear()
    .Bold().Italic().Underline().Strikethrough()
    .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
    .InsertUnorderedList().InsertOrderedList()
    .Outdent().Indent()
    .CreateLink().Unlink()
    .InsertImage()
    .InsertFile()
    .SubScript()
    .SuperScript()
    .TableEditing()
    .ViewHtml()
    .CleanFormatting()
    .Formatting()
    .FontName()
    .FontSize()
    .FontColor(color => color.Palette(new string[] {
        "#ffffff", "#000000", "#e7e6e6", "#44546a", "#5b9bd5", "#ed7d31", "#a5a5a5", "#ffc000", "#4472c4", "#70ad47",
        "#f2f2f2", "#7f7f7f", "#d0cece", "#d6dce4", "#deebf6", "#fbe5d5", "#ededed", "#fff2cc", "#d9e2f3", "#e2efd9",
        "#d8d8d8", "#595959", "#aeabab", "#adb9ca", "#bdd7ee", "#f7cbac", "#dbdbdb", "#fee599", "#b4c6e7", "#c5e0b3",
        "#bfbfbf", "#3f3f3f", "#757070", "#8496b0", "#9cc3e5", "#f4b183", "#c9c9c9", "#ffd965", "#8eaadb", "#a8d08d",
        "#a5a5a5", "#262626", "#3a3838", "#323f4f", "#2e75b5", "#c55a11", "#7b7b7b", "#bf9000", "#2f5496", "#538135",
        "#7f7f7f", "#0c0c0c", "#171616", "#222a35", "#1e4e79", "#833c0b", "#525252", "#7f6000", "#1f3864", "#375623",
        "#c00000", "#ff0000", "#ffc000", "#ffff00", "#92d050", "#00b050", "#00b0f0", "#0070c0", "#002060", "#375623",
  }))
    .BackColor(color => color.Palette(new string[] {
        "#ffffff", "#000000", "#e7e6e6", "#44546a", "#5b9bd5", "#ed7d31", "#a5a5a5", "#ffc000", "#4472c4", "#70ad47",
        "#f2f2f2", "#7f7f7f", "#d0cece", "#d6dce4", "#deebf6", "#fbe5d5", "#ededed", "#fff2cc", "#d9e2f3", "#e2efd9",
        "#d8d8d8", "#595959", "#aeabab", "#adb9ca", "#bdd7ee", "#f7cbac", "#dbdbdb", "#fee599", "#b4c6e7", "#c5e0b3",
        "#bfbfbf", "#3f3f3f", "#757070", "#8496b0", "#9cc3e5", "#f4b183", "#c9c9c9", "#ffd965", "#8eaadb", "#a8d08d",
        "#a5a5a5", "#262626", "#3a3838", "#323f4f", "#2e75b5", "#c55a11", "#7b7b7b", "#bf9000", "#2f5496", "#538135",
        "#7f7f7f", "#0c0c0c", "#171616", "#222a35", "#1e4e79", "#833c0b", "#525252", "#7f6000", "#1f3864", "#375623",
        "#c00000", "#ff0000", "#ffc000", "#ffff00", "#92d050", "#00b050", "#00b0f0", "#0070c0", "#002060", "#375623",
  }))
).Encode(false)
.Value(@<text>
  <p>
      Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.<br />
      In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists,
      and image handling. The widget <strong>outputs identical HTML</strong> across all major browsers, follows
      accessibility standards and provides API for content manipulation.
  </p>
  <p>Features include:</p>
  <ul>
      <li>Text formatting & alignment</li>
      <li>Bulleted and numbered lists</li>
      <li>Hyperlink and image dialogs</li>
      <li>Cross-browser support</li>
      <li>Identical HTML output across browsers</li>
      <li>Gracefully degrades to a <code>textarea</code> when JavaScript is turned off</li>
  </ul>
  <p>
      Read <a href="http://docs.telerik.com/kendo-ui">more details</a> or send us your
      <a href="http://www.telerik.com/forums">feedback</a>!
  </p>
</text>)
.ImageBrowser(imageBrowser => imageBrowser
    .Image("~/Content/UserFiles/Images/{0}")
    .Read("Read", "ImageBrowser")
    .Create("Create", "ImageBrowser")
    .Destroy("Destroy", "ImageBrowser")
    .Upload("Upload", "ImageBrowser")
    .Thumbnail("Thumbnail", "ImageBrowser"))
.FileBrowser(fileBrowser => fileBrowser
    .File("~/Content/UserFiles/Images/{0}")
    .Read("Read", "FileBrowser")
    .Create("Create", "FileBrowser")
    .Destroy("Destroy", "FileBrowser")
    .Upload("Upload", "FileBrowser"))
)

And the css styles to go along with that:

.k-colorpalette
{
    border: 1px solid gray;
    padding-right: 3px;
}

.k-palette .k-item
{
    border-style: solid;
    border-color: White;
    border-width: 0px 3px 0px 3px;
}

.k-palette tr:first-child
{
    border-top: 3px solid white;
    border-bottom: 5px solid white;
}

.k-palette tr:last-child
{
    border-top: 5px solid white;
    border-bottom: 3px solid white;
}