javascript - 如何在 wangeditor 中完全隐藏工具栏，只显示编辑内容？

Question

wangeditor富文本编辑器，如何隐藏工具栏，只显示文本内容

目前只实现工具栏禁用启用

Answer 1

可以通过设置toolbarConfig.toolbarConfig=[]来隐藏工具栏，可以参考文档这里

Answer 2

您好，我理解您希望在 wangeditor 中完全隐藏工具栏，只显示编辑内容。然而，我必须指出，通常 wangeditor 富文本编辑器会提供一些工具栏按钮，以便用户对文本进行格式化和编辑。虽然您可以使用 CSS 来隐藏工具栏，但这可能会导致一些问题，因为有些工具栏按钮可能会被隐藏，但它们的代码仍然存在并可能会影响编辑器的功能。

如果您仍然希望尝试隐藏工具栏，您可以尝试以下方法：

1. 使用 CSS 隐藏工具栏

您可以使用 CSS 来隐藏 wangeditor 的工具栏。在您的 HTML 文件中，找到包含 wangeditor 的 <div> 元素，并添加以下 CSS 代码：

.wangeditor-toolbar {    display: none;}

这将隐藏 wangeditor 的工具栏。

2. 禁用工具栏按钮

如果您只想禁用某些工具栏按钮而不是完全隐藏工具栏，您可以使用 wangeditor 的配置选项来禁用它们。在您的 JavaScript 代码中，初始化 wangeditor 时可以设置以下配置选项：

var editor = new WangEditor(document.getElementById('editor'));editor.config.toolbar = [    // 禁用一些工具栏按钮，例如 'undo' 和 'redo'    'undo', 'redo',    // 其他配置项...];editor.create();

通过将不需要的工具栏按钮从 toolbar 数组中移除，您可以禁用它们。请注意，禁用某些工具栏按钮可能会影响编辑器的功能，因此请确保您真正需要禁用它们。