扩展kendo编辑器html

Question

我刚刚开始在一些项目中使用Kendo-UI框架,我发现这个问题上的文档真的很差.我正在尝试在我的下面添加一些额外的html(确切的按钮),Kendo.Editor所以每次我创建一个新的按钮都会在那里.Kendo是否可扩展,例如ExtJs,为所有组件提供此类功能(更容易或更难完成但仍然可行)？

Answer 1

我对你的文档和质量有所了解,尽管他们正在努力工作并且一直在不断改进.

我最近有一些扩展编辑器的经验,它非常简单易行.

声明编辑器时,您有一个工具属性.当您输入集成工具的名称时,它只会显示该工具,或者您也可以传入一个对象来定义新工具.下面是我创建自定义"插入视频"工具的示例.名称和工具提示属性是不言自明的.exec是一个属性,在该属性中传入一个在单击按钮时执行的函数.我的示例中的exec打开了一个自定义的kendo窗口,该窗口实现了添加视频的逻辑.它有一个界面,您可以选择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".只需在该课程中添加背景图片即可.

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