javascript - Summernote:启用空中模式以及默认工具栏

Question

有没有办法在summernote编辑器中同时启用默认工具栏和空气模式工具栏？

例如，我需要用户首先使用默认工具栏编辑文本区域，当他只想编辑一个单词时，他可以选择它，然后弹出空中模式工具栏。 (就像 Microsoft Word 一样)

谢谢

Answer 1

我通过编辑 Summernote 的源代码并重建它来完成这件事(需要 npm)。
这非常简单，您只需要编辑两个文件并进行构建即可。

下载/克隆 Summernote-develop 源代码。
https://github.com/summernote/summernote

按照以下步骤操作
1.打开文件夹summernote-develop
2.打开src/js/bs3/module/Toolbar.js

您会发现该行为

this.shouldInitialize = function () {
          return !options.airMode;
        };

这段代码实际上检查了airMode，如果它为true，那么它不会初始化工具栏，现在将代码更改为

this.shouldInitialize = function () {
      return true;
    };

并保存。

3.打开src/js/bs3/ui.js

您通常会在第 176 行找到此代码。

var $editor = (options.airMode ? ui.airEditor([
    ui.editingArea([
        ui.airEditable()
    ])
    ]) : ui.editor([
             ui.toolbar(),
             ui.editingArea([
                 ui.codable(),
                 ui.editable()
          ]),
          ui.statusbar()
     ])).render();

这段代码通常会检查airMode并相应地加载UI，无论airMode说什么，我们都需要加载传统的UI。将其更改为

var $editor = (ui.editor([
        ui.toolbar(),
        ui.editingArea([
          ui.codable(),
          ui.editable()
        ]),
        ui.statusbar()
      ])).render();

这将加载传统的 Summernote ui。

4. 现在我们要重建整个项目来生成所需的js文件，在终端执行这些命令

summernote-develop 用户名 $ npm install

summernote-develop username $ npm run build

导航至 summernote-develop 中的 dist 文件夹，将在此处生成所需的 js 文件。

注意:初始化 Summernote 时不要忘记启用 AirMode，即 airMode: true