Кастомизация summernote

Добавить js

Widget::add()->type('script')->content('js/customize_summernote.js');

После загрузки страницы можно настраивать summernote

document.addEventListener('DOMContentLoaded', function() {
    $('.summernote').summernote({
        toolbar: [
              ['code', ['codeview','emoji']],
              ['link', ['link',]],
          ]
      });
});

Примечание: надо использовать document.addEventListener, а не функцию ready jquery.

Для обращения к summernote в backpack использовать class summernote.

Пример предотвращения вставки <p> по нажатию enter

    $(".summernote").on("summernote.enter", function(we, e) {
        let node = document.createElement('br');
        $(this).summernote("insertNode", node);

        e.preventDefault();
    });

Здесь документация https://summernote.org/deep-dive/

Есть различные плагины, прежде чем писать свой можно поискать готовый здесь https://github.com/summernote/awesome-summernote

Плагины написаны давно, есть трабл. При наведении на кнопку в toolpar в консоль спамит ошибка и не высвечивается title.

Решение: надо добавить в container: $(".note-editor.note-frame")[0],

            context.memo('button.emoji', function () {
                return ui.buttonGroup({
                    className: 'note-ext-emoji',
                    children: [
                        ui.button({
                            className: 'dropdown-toggle',
                            contents: '<i class="note-icon-emoji"/>',
                            container: $(".note-editor.note-frame")[0],

ну или если несколько summernote, то поразбираться как лучше это сделать. Есть плагины, где нет этой проблемы там сделано так:

      $.extend($.summernote.plugins, {
        'cleaner': function (context) {
          var ui = $.summernote.ui,
            $note = context.layoutInfo.note,
            $editor = context.layoutInfo.editor,
            options = context.options,
            lang = options.langInfo;

container: options.container

Еще трабл - не отображается иконка у кнопки. Решение добавить css

.note-icon-emoji:before {
    content: "\1F60A"
}

Теперь можно добавить кнопке эту иконку contents: '<i class="note-icon-emoji"/>',

Вот ссылка, где можно коды иконок для этой цели посмотреть https://utf8-icons.com/smiling-face-with-smiling-eyes-128522

sdf