Добавление методов отключения/включения в редактор Summernote

Question

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

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

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

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

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

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

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

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

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

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

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

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

Спасибо.

Answer 1

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

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

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

Answer 2

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

$('#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']] 
         ] 
        }); 

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

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

Answer 3

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

// 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

Надеется, что это помогает кто-то :)

Answer 4

В моей ситуации я хотел создать селектор класса для 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.