Summernote：启用 Air-mode 以及默认工具栏

Question

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

例如，我需要用户首先使用默认工具栏编辑文本区域，当他只想编辑一个单词时，他可以 select 然后弹出空中模式工具栏。 （例如 Microsoft word）

谢谢

Answer 1

我通过编辑 summernote 的源代码并重新加载它来完成这件事ui(requires npm)。
这很简单，您只需要编辑两个文件并制作一个 build。

Download/Clone summernote-develop源码.
https://github.com/summernote/summernote

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

你会找到一行

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

此代码实际检查 airMode 如果为真则不会初始化工具栏，现在将代码更改为

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

并保存。

3.Open 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，我们需要加载传统的 UI 无论 airMode 说什么。将其更改为

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

这将加载传统的 summernote ui。

4. 现在我们必须 rebuild 整个项目 generate the required js file, on终端执行这些命令

summernote-develop username $ npm install

summernote-develop username $ npm run build

导航到 dist 文件夹中的 summernote-develop，required js 文件将在那里生成.

note: 不要忘记在初始化 summernote 时启用 airMode 即 airMode: true

Summernote：启用 Air-mode 以及默认工具栏

Summernote: Enable Air-mode along with the default toolbar

javascript

jquery

summernote