没有工具栏,无法配置应用于div元素的kendo编辑器

时间:2019-10-18 06:35:07

标签: kendo-ui kendo-editor

我将kendo编辑器应用于div元素,而不是使用textarea,因为它在iPad中带来了一些问题。现在,我不希望编辑器具有工具栏来设置文本格式。

我尝试将样式设置为空并且将工具设置为一个空数组,但工具栏仍然显示为带有可拖动按钮。

<div id="targetdiv" contenteditable="true" style = "resize: none;width: 
  100% 
!important; height:150px; max-height:150px;max-width: 100% !important;">
</div>

<script>
$("#targetdiv").kendoEditor({
    tools: []});
</script>

工具栏通过未使用工具初始化的编辑器出现,如下图所示。

empty toolbar with draggable icon

方法1:(不起作用)

<style>
.k-editor-toolbar
{
   display:none;
}
</style>

方法2:(不起作用)

$('.k-editor-toolbar').hide();

方法3:(部分有效)

添加了一个选择事件,但工具栏仍然会立即出现,然后消失。

 $("#targetdiv").kendoEditor({
    tools: [],
    //Fires when the Editor selection has changed.
    select: function (e) {
        let editor = $("#targetdiv").data("kendoEditor");
        editor.toolbar.hide();
    });

2 个答案:

答案 0 :(得分:0)

如果不想显示工具栏,请在KendoUI编辑器初始化中定义一个空工具:

$("#editor").kendoEditor({
// Empty tools so do not display toolbar
tools: [ ]
});

如果要禁用该版本,则应使用:

$(editor.body).attr('contenteditable',false);

您也可以尝试这个

.k-editor-toolbar
{display:none !important;}

答案 1 :(得分:0)

最后,

我必须订阅编辑器工具栏的打开事件,并阻止其执行。这解决了我的问题。

let editor = $("#targetdiv").getKendoEditor();
editor.toolbar.window.bind("open", function (e) {
    e.preventDefault();
});