javascript - 扩展kendo编辑器html

标签 javascript jquery kendo-ui

我刚刚开始在一些项目上使用 Kendo-UI 框架,我发现文档在这方面非常糟糕。我正在尝试在我的 Kendo.Editor 下添加一些额外的 html(确切地说是按钮),因此每次我创建一个新编辑器时,按钮都会在那里。 Kendo 是否像 ExtJs 一样可扩展,为所有组件提供此类功能(更容易或更难,但仍然可能)?

最佳答案

我对文档和质量感到满意,尽管他们正在努力工作并且一直在改进。

我最近在扩展编辑器方面有一些经验,它非常简单且可能。

声明编辑器时,您有一个工具属性。当您输入集成工具的名称时,它只会显示该工具,或者您也可以传入一个对象来定义新工具。下面是我创建自定义“插入视频”工具的示例。名称和工具提示属性是不言自明的。 exec 是一个属性,您可以在其中传递一个函数,该函数在单击按钮时执行。我的示例中的 exec 打开一个自定义剑道窗口,该窗口实现添加视频的逻辑。它有一个界面,您可以在其中选择 Vimeo 或 Youtube,粘贴常规链接,然后将嵌入的视频粘贴到编辑器中。基本上,当您在我的窗口中单击“确定”时,会触发一个事件,处理嵌入视频的标记并将其粘贴到编辑器中。在编辑器中粘贴标记的方法是: $("#editor").data("kendoEditor").paste(someString);其中 someString 当然是您要粘贴的内容。它会粘贴到光标当前所在的位置。

当然,如果您想要更强大的功能,您可以在 exec 函数中添加更复杂的代码。就像在这种情况下会为视频窗口创建所有所需的标记,并在关闭后销毁它或类似的东西一样。

        $("#editor").kendoEditor({
            tools: [ {
                name: "insertVideo",
                tooltip: "Insert video",
                exec: function(){
                   var window = $("#windasd").data("kendoWindow");
            window.center().open();
                   }

            },'formatBlock', 'bold', 'italic', 'underline', 'createLink', 'unlink', 'insertImage', 'insertUnorderedList', 'insertOrderedList', "justifyLeft",
            "justifyCenter",
            "justifyRight",
            "justifyFull", ],

        });

此外,如果您想要自定义图标,则必须添加一些 css。您的按钮将根据您传入的名称自动获取 CSS 类。它只是在名称中添加“k-”前缀,因此我的按钮将是“k-insertVideo”。只需向该类添加背景图像即可。

祝你好运,希望我的帖子能有所帮助,并且不是以复杂的方式写的!

关于javascript - 扩展kendo编辑器html,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14741858/

相关文章:

javascript - 通过 JavaScript 或 JQuery 操作 SVG 文件(对象)中的元素

javascript - 如何使用 jQuery 将两个 select 元素附加到表行?

当 "http://www.google.com/jsapi"脚本也被链接时,jquery ui 将无法工作

c# - Kendo MVC Core - 网格 - 无法通过路线获取数据 - 400 错误请求

javascript - 使用 mocha 返回 promise 的测试方法调用

javascript - 从javascript中的字符串中提取访问 token

javascript - 无法将 bootstrap-select 与 Jquery 附加一起用于动态下拉列表

jquery - 结合 Knockout.js + KendoUI - 你有什么经验?

javascript - Kendo UI AngularJs 网格指令,未定义

javascript - 带条件声明变量