Как настроить Kendo UI Editor для шестнадцатеричных цветовых кодов? - PullRequest
Новая
       101

Как настроить Kendo UI Editor для шестнадцатеричных цветовых кодов?

1 голос
/ 04 августа 2020

Я работаю над приложением ASP. NET MVC, в котором используется интерфейс Kendo. В нем мы использовали редактор Kendo UI Editor для форматированного текста. Он используется следующим образом: 

@(Html.Kendo().Editor()
   .Name("textControl-Source")
   .Tools(tools => tools.Clear()
   .Bold().Italic().Underline().Strikethrough()
   .FontSize().FontColor().BackColor()                                                           
   .JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
   .InsertUnorderedList().InsertOrderedList().Indent().Outdent()
   .SubScript().SuperScript())
   .HtmlAttributes(new { style = "height:240px;width:98.5%", data_mintextlength = "1" })
          .Events(events => events
          .Change("mediaBoardEditNS.textControlChange")
          .Select("mediaBoardEditNS.textControlSelect")
        )
    )

Существует требование, если мы можем каким-то образом настроить его для отображения пользовательских цветов с помощью HEX-кодов, как мы можем сделать в палитре цветов шрифтов Microsoft Word. Я много искал на их форуме и ТАК, но ничего не нашел solid. Сообщите мне, если я что-то упустил. Спасибо

1 Ответ

0 голосов
/ 04 августа 2020

Это не будет ответ с точным кодом, поскольку я не на 100% уверен в ваших точных требованиях. Я думаю, что этого может быть достаточно, чтобы вы на правильном пути.

Если ваше требование проще и вам нужно только включить собственные цвета в инструменты backColor и foreColor, есть способ настроить палитру, которая доступен. Как показано в в этом додзё , вы можете настроить палитру следующим образом: 

<script>
$("#editor").kendoEditor({
    tools: [{
        name: "backColor",
              palette: ["#f0d0c9", "#e2a293", "#d4735e", "#65281a"],
            },
        { 
          name: "foreColor",
          palette: ["red", "green", "#d47eee", "#65281a"]
        } ]
});
</script>

Однако я не думаю, что это то, что вам нужно, точно так же, как вы упомянули, сделайте это как MS Word . Я оставлю это, если я ошибаюсь.

Итак, имея это в виду. также есть возможность создавать собственные инструменты: Пример 1 Пример 2 

    @(Html.Kendo().Editor()
          .Name("editor")

          //other settings trimmed for brevity

          .Tools(tools => tools
            .Clear()
            .CustomTemplate(ct => ct.Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label> <select id='templateTool'><option value=''>none</option><option value='\\#ff9'>yellow</option><option value='\\#dfd'>green</option></select>"))
            .CustomButton(cb => cb.Name("custom").ToolTip("Insert a horizontal rule").Exec(@<text>
                        function(e) {
                        var editor = $(this).data("kendoEditor");
                        editor.exec("inserthtml", { value: "<hr />" });
                        }
            </text>))
     )

Вы можете создать собственный инструмент для backColor и foreColor, который состоит из Kendo ColorPicker в шаблоне. Это, наряду с использованием событий средства выбора, позволит пользователю выбрать любой цвет или ввести шестнадцатеричное значение, а после нажатия кнопки «Применить» вы можете соответствующим образом установить редактор backColor / foreColor.

Что-то вроде строк это, однако вам придется адаптировать его для работы в шаблоне: 

        @(Html.Kendo().ColorPicker()
                .Name("hsv-picker")
                .Value("#22cc22")
                .Events(events => events
                    .Select("pickerSelect")
                    .Change("pickerChange")
                    .Open("pickerOpen")
                    .Close("pickerClose")
                )
        )

<script>
    function pickerChange(e) {
        console.log("Change in color palette :: " + e.value);
        //UPDATE EDITOR backcolor/forecolor with e.value here
    }
</script>

Ссылка на форум Telerik для первоначального додзё

...