Question

我正在使用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"];

Answer 1

更新：解决方案在修改用户问题后使用最新版本的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"
  ]
});

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

1 个答案: