剑道编辑器 - 删除工具栏答案

【问题标题】：Kendo Editor - Remove toolbar剑道编辑器 - 删除工具栏
【发布时间】：2014-03-31 11:09:00
【问题描述】：

我正在使用剑道编辑器，虽然...我想禁用编辑工具栏。事实上，我想要的只是有可能格式化我的 textarea（粗体、斜体......）而不允许用户与我的 textarea 交互，也没有工具栏，这会让用户感到非常困惑。我希望它像普通的只读文本区域一样显示，仅此而已。我试过这个：

$("#output").kendoEditor();
$($('#output').data().kendoEditor.body).attr('contenteditable', false);

但它不起作用。有什么想法吗？

编辑

我只想有一个简单的文本区域，我想隐藏工具栏并以编程方式操作文本区域的内容，因为它是只读的。

【问题讨论】：

在这里工作正常：jsfiddle.net/IrvinDominin/sR4En
你检查过你的inspector是否有错误吗？
@IrvinDomininakaEdward 但我想要的不是我在小提琴中看到的，我不想再有一个工具栏，我不想它被禁用，我不想存在于我的文本区域中。实际上，我只需要使用我以编程方式在禁用的文本区域中插入的值来格式化输出的粗体或斜体。你看到了吗？
@TheLittlePig 我没有任何错误

【解决方案1】：

这在使用 HTML 包装器的 MVC 中效果很好

 @(Html.Kendo().EditorFor(m => m.Body).Tools(t => t.Clear()))

【讨论】：

【解决方案2】：

如果您不想显示工具栏，请在 KendoUI 编辑器初始化中定义一个空的tools：

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

如果你想禁用该版本，你应该使用：

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

以下代码选择所有文本并将其转换为粗体，然后取消选择它。

var range = editor.createRange();
range.selectNodeContents(editor.body);
editor.selectRange(range);
editor.exec("bold");
editor.selectRange();

【讨论】：

【解决方案3】：

用 css 隐藏工具栏：

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

这对我有用（Asp.Net Core 3.0）...

【讨论】：

【解决方案4】：

如果您希望您的 kendoEditor textarea 只读，请使用以下代码，

$('iframe').contents().find("body").attr('contenteditable',false);

如果您想禁用工具栏，请使用此代码，

$('.k-editor-toolbar').find('li a').click(function(){return false;})

隐藏工具栏

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

【讨论】：