Kendo UI Editor - 更改字体颜色选择器和背景颜色选择器的默认颜色

时间:2016-12-28 12:01:35

标签: javascript kendo-ui telerik kendo-editor telerik-editor

我正在使用Kendo UI Editor,我想选择哪种颜色会出现在字体和背景颜色调色板中。 或者另一种方法是让用户从自定义颜色选择器中进行选择。

我在论坛上找到了示例,但他们都使用了旧版本的Kendo 2012.最新版本的2016 R3并不知道这样的定义:kendo.ui.editor.ColorPicker.fn.options.colors它说它未定义:

  

未捕获的TypeError:无法读取未定义的属性“fn”

有办法做到这一点吗? 我查看了论坛并看到了这个答案,但这不起作用。

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

1 个答案:

答案 0 :(得分:4)

更新:解决方案在修改用户问题后使用最新版本的kendo UI
我在这个博客上讨论了使用最新版本的kendo的解决方案。请点击下面的链接导航到解决方案。

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

简而言之,链接中的灵魂就是这段代码:

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

旧:此解决方案有效但仅适用于kendo 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"
  ]
});

enter image description here