3

我正在使用 Kendo UI 编辑器，我想选择字体和背景调色板中出现的颜色。或者另一种选择是让用户从自定义颜色选择器中进行选择。

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

未捕获的类型错误：无法读取未定义的属性“fn”

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

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

1 回答 1

6

更新：修改用户问题后，该解决方案适用于最新版本的剑道 UI
我已经在此博客上讨论了使用最新版本的剑道的解决方案。请单击下面的链接以导航到解决方案。

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

简而言之，链接中的灵魂是以下代码：

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

旧：此解决方案有效，但仅适用于 kendo 2012 版本。

这是工作现场演示链接 -编辑器颜色选择器

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-28T18:36:00.433 回答