CODEWITHSUNDEEP
javascriptjquerysummernote
Ahmad Yousef
Ahmad Yousef

Reputation: 659

Summernote: Enable Air-mode along with the default toolbar

Is there a way to enable both the default toolbar and the air-mode toolbar in summernote editor ?

For example I need the user to edit the textarea with the default toolbar at first, and when he wants to edit just one word he can select it and the air-mode toolbar pops up. (just like Microsoft word for example)

Thank you

Upvotes: 0

Views: 1619

Answers (1)

Amol Dhekane
Amol Dhekane

Reputation: 36

I did this thing by going and editing the source code of summernote and rebuilding it (requires npm).
It was quite easy you just need to edit only two files and make a build.

Download/Clone the summernote-develop source code.
https://github.com/summernote/summernote

Follow these steps
1. Open folder summernote-develop
2. Open src/js/bs3/module/Toolbar.js

You will find line as 

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



this code actually checks for airMode if its true then it doesn't initialize the toolbar, now change the code to 

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


and save it.

3.Open src/js/bs3/ui.js

You will find this code typically at line number 176.

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


this code typically checks for airMode and load the UI accordingly, we need to load the traditional UI whatever airMode says. Change this to

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



this will load traditional summernote ui.

4. Now we have to rebuild the whole project to generate the required js file, on the terminal execute these commands

summernote-develop username $ npm install

summernote-develop username $ npm run build
  1. Navigate to dist folder in the summernote-develop, required js file will be generated there.

note: dont forget to enable airMode while initializing summernote i.e. airMode: true

Upvotes: 2

Related Questions