Добавление методов disable/enable в Редактор Summernote

Я уже некоторое время использую редактор summernote, и он работает для большинства вещей, для которых он мне нужен. Однако недавно я хотел, чтобы он был отключен (не уничтожен ) после действия пользователя. После безуспешных усилий мне пришло в голову, что я могу использовать метод destroy() для достижения желаемого. Я заметил, что Summernote все еще превратил уже отключенный textarea в свой редактор, с отключенной областью записи. Вот что я, наконец, сделал:

чтобы отключить summernote после создание: я сначала уничтожил его, затем отключил целевой элемент и, наконец, повторно инициализировал его:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', true );

    $(".summernoteTarget").summernote();

и чтобы включить его снова, я сначала уничтожил его, как и раньше, затем включил целевой элемент и, наконец, повторно инициализировал его:

    $(".summernoteTarget").destroy();

    $(".summernoteTarget").prop('disabled', false );

    $(".summernoteTarget").summernote();

это сделало трюк с незначительной проблемой:когда он остается в состоянии "отключен", все элементы управления не отключены, только область записи. Таким образом, пользователь все еще может, скажем, перетащить файл в область записи, но это вызывает ошибка.

кто-нибудь взглянул на источник Summernote и может добавить два метода (отключить и включить ) в дополнение к destroy (), так что мы можем сделать что-то вроде:

     $(".summernoteTargetElement").disable();
     $(".summernoteTargetElement").enable();

спасибо.

8
javascript jquery summernote textarea

4 ответов

вы можете отключить или включить редактор с API после v0.7.3.

// To disable
$('.summernote').summernote('disable');
// To enable
$('.summernote').summernote('enable');

http://summernote.org/deep-dive/#disable-enable

2

это сработало для меня:

// The class note-editable is generated by summernote

// To enable
$('.note-editable').attr('contenteditable', true);

// To disable
$('.note-editable').attr('contenteditable', false);

источник:https://github.com/summernote/summernote/issues/61

надеюсь, это поможет кому-то:)

3

Я не знаю, нужно ли вам это. Я делаю следующее: Для отключения

$('#textarea').destroy();
                    $('#textarea').prop('disabled', true);
                    $('#textarea').summernote({
                        minHeight: null,
                        maxHeight: null,
                        focus: true,
                        styleWithSpan: false,
                        toolbar: [
                        ]                         
                    });

включить

$('#textarea').destroy();
                    $('#textarea').prop('disabled', false);
                    $('#textarea').summernote({
                        minHeight: null,
                        maxHeight: null,
                        focus: true,
                        styleWithSpan: false,
                        toolbar: [
                            ['style', ['bold', 'italic', 'underline', 'clear']],
                            ['para', ['ul', 'ol']]
                        ]
                    });

textarea-моя область, где я применил summernote.

но после этого у меня возникли проблемы с свойством кода, когда я публикую страницу.

1

в моей ситуации я хотел создать селектор классов для 2-х текстовых редакторов summernote. Одно будет включен, другой отключен.

для достижения этого вы можете использовать этот подход

// This is in a razor view using MVC

// Enabled
@Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote" })


// Disabled
@Html.TextAreaFor(i => i.Explanation, new {@class = "summerNote-disabled" })

текстовая область позволит интерпретировать сохраненный текстовый код при его отображении в текстовом поле позже.

теперь, когда вы создаете текстовый редактор summernote, он не преобразует ваш элемент в summernote, а создает новый элемент под определенным элементом. Вы можете увидеть это в DOM, если вы проверите различные элементы

теперь, чтобы отключить редактор

// In javascript
$('.summerNote-disabled+.note-editor .note-editable').attr('contenteditable', false)

это выбирает элемент, который вы определили как summerNote и захватывает брата редактора заметок. Внутри этого брата существует текстовая область, редактируемая примечаниями. Это элемент, который вы хотели бы установить его атрибут contenteditable 'в false.

0