MS Word style color picker sample

1 posts, 0 answers
  1. Mikkel
    Mikkel avatar
    58 posts
    Member since:
    Aug 2012

    Posted 15 Oct 2014 Link to this post

    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;
    }
Back to Top