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

Question

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

javascriptkendo-uitelerikkendo-editortelerik-editor

3

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

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

Uncaught TypeError: Cannot read property 'fn' of undefined

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

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

- Asaf Epelbaum

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sean Ch · Accepted Answer

更新：在用户修改问题后，该解决方案与最新版本的kendo UI兼容
我已经在这篇博客中讨论了如何使用最新版本的kendo来解决问题。请点击下面的链接以查看解决方案。

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

简而言之，链接中的解决方案是这段代码：

<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"
  ]
});