首页 > 解决方案 > 无法配置在没有工具栏的 div 元素上应用的剑道编辑器

问题描述

我在 div 元素上应用了剑道编辑器,而不是使用 textarea,因为它在 iPad 中会出现一些问题。现在,我不希望编辑器有工具栏来格式化文本。

我尝试将样式应用为 none & set tools 到一个空数组,但工具栏仍然出现,其中有一个可拖动的按钮。

<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>

工具栏在没有工具的情况下通过它初始化的编辑器出现,如下图所示。

带有可拖动图标的空工具栏

方法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();
    });

标签: kendo-uikendo-editor

解决方案


最后,

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

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

推荐阅读