Summernote Air Mode with Bootstrap 5 and Vanilla JS
This Bootstrap 5 example ports the legacy air mode demo to the vanilla summernote.create() API.
Select text inside the editor to open the floating inline toolbar. Switching to fullscreen temporarily uses
the regular toolbar and restores air mode when you leave fullscreen.
There is no fixed toolbar. Highlight text to open the contextual air popover directly next to the selection.
Select a word, apply formatting, add a link, or insert a table without leaving the writing surface.
In computer science, functional programming is a programming paradigm, a style of building the structure and elements of computer programs, that treats computation as the evaluation of mathematical functions and avoids state and mutable data.
Functional programming emphasizes functions that produce results that depend only on their inputs and not on the program state—i.e. pure mathematical functions. It is a declarative programming paradigm, which means programming is done with expressions.
In functional code, the output value of a function depends only on the arguments that are input to the function, so calling a function f twice with the same value for an argument x will produce the same result f(x) both times. Eliminating side effects, i.e. changes in state that do not depend on the function inputs, can make it much easier to understand and predict the behavior of a program.
summernote.create('#airmode-editor', {
airMode: true,
airModeFullscreen: true,
dialogsInBody: true,
focus: true,
toolbar: [
['font', ['bold', 'italic', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['codeview', 'fullscreen']],
],
popover: {
air: [
['font', ['bold', 'italic', 'underline', 'clear']],
['color', ['color']],
['para', ['ul', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture']],
['view', ['codeview', 'fullscreen']],
],
},
});