Редактор Kendo UI - изменение цветов по умолчанию для выбора цвета и выбора цвета фона

Я использую редактор пользовательских интерфейсов Kendo, и я хочу выбрать, какой цвет будет отображаться в цветовых палитрах шрифта и фона. Или другая альтернатива позволяет пользователю выбирать из пользовательского набора цветов.Редактор Kendo UI - изменение цветов по умолчанию для выбора цвета и выбора цвета фона

Я нашел примеры на форумах, но все они используют старую версию кендо 2012. Последняя версия 2016 R3 не знает, такое определение: там

Uncaught TypeError: Cannot read property 'fn' of undefined

способ: kendo.ui.editor.ColorPicker.fn.options.colors Он говорит, что не определено сделать это? Я смотрел на форумах и видел этот ответ, но это не работает.

kendo.ui.editor.ColorPicker.fn.options.colors = ["c3c3c3", "b97a57", "ffaec9", "ffc90e", "efe4b0", "b5e61d", "99d9ea", "7092be", "c8bfe7"];

источник

2016-12-28 Asaf Epelbaum

Update: Рабочий раствор с последней версией кендо UI после пользовательского вопроса был изменен
Я обсуждал решение, используя последнюю версию кендо на этом блоге. Чтобы перейти к решению, нажмите на ссылку ниже.

Kendo UI Editor - Change default colors of font color picker and background color picker

Коротко о soultion в ссылке этот код:

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

Старый: Это решение работает, но только с кендо 2012 версии.

Здесь работает демо ссылка - Editor color picker

HTML

<!DOCTYPE html> 
<html> 
<head> 
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> 
<link href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" /> 
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> 
<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script> 
<meta charset=utf-8 /> 
<title>JS Bin</title> 
</head> 
<body> 
    <textarea id="textarea" rows="10" cols="30" style="width:100%;height:400px"> 
      &lt;p&gt;&lt;img src=&quot;http://www.kendoui.com/Image/kendo-logo.png&quot; alt=&quot;Editor for ASP.NET MVC logo&quot; style=&quot;display:block;margin-left:auto;margin-right:auto;&quot; /&gt;&lt;/p&gt; 
      &lt;p&gt; 
       Kendo UI Editor allows your users to edit HTML in a familiar, user-friendly way.&lt;br /&gt; 
       In this version, the Editor provides the core HTML editing engine, which includes basic text formatting, hyperlinks, lists, 
       and image handling. The widget &lt;strong&gt;outputs identical HTML&lt;/strong&gt; across all major browsers, follows 
       accessibility standards and provides API for content manipulation. 
      &lt;/p&gt; 
      &lt;p&gt;Features include:&lt;/p&gt; 
      &lt;ul&gt; 
       &lt;li&gt;Text formatting &amp; alignment&lt;/li&gt; 
       &lt;li&gt;Bulleted and numbered lists&lt;/li&gt; 
       &lt;li&gt;Hyperlink and image dialogs&lt;/li&gt; 
       &lt;li&gt;Cross-browser support&lt;/li&gt; 
       &lt;li&gt;Identical HTML output across browsers&lt;/li&gt; 
       &lt;li&gt;Gracefully degrades to a &lt;code&gt;textarea&lt;/code&gt; when JavaScript is turned off&lt;/li&gt; 
      &lt;/ul&gt; 
      &lt;p&gt; 
       Read &lt;a href=&quot;http://docs.kendoui.com&quot;&gt;more details&lt;/a&gt; or send us your 
       &lt;a href=&quot;http://www.kendoui.com/forums.aspx&quot;&gt;feedback&lt;/a&gt;! 
      &lt;/p&gt; 
    </textarea> 

</body> 
</html>

JavaScript Файл

kendo.ui.editor.ColorPicker.fn.options.colors = ["c3c3c3"];  
$("textarea#editor").kendoEditor(); 

$('textarea').kendoEditor({ 
    encoded: false, 
    tools: [ 
    "bold", 
    "italic", 
    "underline", 
    "strikethrough", 
    "fontName", 
    "fontSize", 
    "foreColor", 
    "backColor", 
    "justifyLeft", 
    "justifyCenter", 
    "justifyRight", 
    "justifyFull", 
    "insertUnorderedList", 
    "insertOrderedList", 
    "indent", 
    "outdent", 
    "formatBlock", 
    "createLink", 
    "unlink", 
    "insertImage", 
    "viewHtml" 
    ] 
});

источник

2016-12-28 18:36:00

Привет, Спасибо за ответ, но я думаю, что ваш пример основан на более старой версии Kendo. (Я делаю это с 2012 года). Последняя версия 2016 R3 не знает, что такое определение: kendo.ui.editor.ColorPicker.fn.options.colors Он говорит, что это не определено: «неперехваченным TypeError: Не удается прочитать свойство„Fn“неопределенных» –

@AsafEpelbaum - Вы должны отредактировать свой вопрос. И спросите правильно в первый раз, потому что это требует больших усилий и исследований. –

Прошу прощения. Я не думал об этом. Извините и благодарю вас за ваши усилия! Продвинутый –

Редактор Kendo UI - изменение цветов по умолчанию для выбора цвета и выбора цвета фона

ответ

Смежные вопросы