Aggiunta di metodi di disabilitazione/abilitazione all'editor di Summernote

Question

Utilizzo l'editor del summernote da un po 'di tempo e funziona per la maggior parte delle cose per cui ho avuto bisogno. Tuttavia, recentemente l'ho voluto disabilitato (non distrutto) dopo un'azione dell'utente. Dopo gli sforzi senza successo, ho pensato che avrei potuto usare il metodo destroy() per ottenere ciò che volevo. Ho notato che Summernote trasformava ancora una textarea già disabilitata nel suo editor, con l'area di scrittura disabilitata. Ecco quello che ho finalmente fatto:

Per disabilitare summernote dopo averlo creato: ho distrutto, poi disattivato l'elemento di destinazione, e, infine, reinizializzata esso:

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

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

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

e per consentire di nuovo, ho prima distrutto come prima, quindi abilitato l'elemento di destinazione, ed infine ri-inizializzato:

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

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

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

questo fatto il trucco con problema minore: quando rimane nello stato 'disattivato', tutti i controlli non sono disabilitati , solo l'area di scrittura è. Quindi un utente può ancora, per esempio, trascinare un file nell'area di scrittura ma questo genera un errore.

Qualcuno ha dato un'occhiata alla fonte di Summernote e possono aggiungere due metodi (disabilitare e abilitare), oltre a distruggere(), in modo che possiamo fare qualcosa di simile:

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

Grazie.

Answer 1

È possibile disattivare o attivare redattore con API dopo v0.7.3.

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

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

Answer 2

Non so se è ancora necessario. sto facendo quanto segue: per disabili

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

Per abilitare

$('#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 è la mia area in cui ho applicato il summernote.

Ma dopo questo ho problemi con la proprietà del codice quando pubblico la pagina.

Answer 3

questo ha funzionato per me:

// The class note-editable is generated by summernote 

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

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

Fonte: https://github.com/summernote/summernote/issues/61

Spero che questo aiuti qualcuno :)

Answer 4

Nella mia situazione ho voluto creare un selettore di classe per 2 summernote ricco editor di testo. Uno sarebbe abilitato l'altro disabilitato.

per raggiungere questo obiettivo è possibile utilizzare questo approccio

// 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" }) 

L'area di testo consentirà al codice di testo RTF salvato da interpretare quando si visualizza nuovamente nella textarea in seguito.

Ora quando si crea un editor di testo RTF estivo non converte l'elemento in una summernote, ma crea un nuovo elemento sotto l'elemento definito. Si può vedere questo nel DOM se si ispezionare i vari elementi

Ora per disabilitare l'editor

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

Questo seleziona l'elemento che si è definito come il summerNote e afferra il fratello nota-redattore. All'interno di quel fratello esiste la textarea editabile per le note. Questo è l'elemento che vorresti impostare l'attributo 'contenteditable' su false.