Thêm các phương pháp vô hiệu hóa/bật cho trình soạn thảo Summernote

Question

Tôi đã sử dụng trình soạn thảo ghi chú trong một thời gian và nó hoạt động cho hầu hết những thứ tôi cần. Tuy nhiên, gần đây tôi muốn nó bị vô hiệu hóa (không bị phá hủy) sau một hành động của người dùng. Sau những nỗ lực không thành công, tôi đã có thể sử dụng phương thức destroy() để đạt được những gì tôi muốn. Tôi nhận thấy rằng Summernote vẫn chuyển một vùng văn bản đã bị vô hiệu hóa sang trình soạn thảo của nó, với khu vực viết bị tắt. Đây là những gì cuối cùng tôi đã làm:

Để vô hiệu hóa summernote sau khi tạo nó: đầu tiên tôi phá hủy nó, sau đó vô hiệu hóa các yếu tố mục tiêu, và cuối cùng là tái khởi tạo nó:

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

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

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

Và để cho phép nó một lần nữa, tôi đầu tiên phá hủy nó như trước, sau đó kích hoạt các yếu tố mục tiêu, và cuối cùng tái khởi tạo nó:

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

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

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

này đã làm các trick với vấn đề nhỏ: khi nó vẫn còn trong 'disabled' nhà nước, tất cả các điều khiển không bị khuyết tật , chỉ có vùng viết thôi. Vì vậy, người dùng vẫn có thể nói, kéo một tệp vào khu vực viết nhưng điều này sẽ gây ra lỗi.

Có ai lấy một cái nhìn tại nguồn của Summernote và có thể thêm hai phương pháp (vô hiệu hóa và kích hoạt) ngoài để tiêu diệt(), vì vậy chúng tôi có thể làm điều gì đó như:

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

Cảm ơn.

Answer 1

Bạn có thể vô hiệu hóa hoặc kích hoạt trình soạn với API sau v0.7.3.

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

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

Answer 2

Tôi không biết nếu bạn vẫn cần điều này. Tôi đang làm như sau: Đối với disable

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

Đối với phép

$('#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 là khu vực của tôi, nơi tôi đã áp dụng summernote.

Nhưng sau này tôi gặp sự cố với thuộc tính mã khi tôi đăng trang.

Answer 3

này đã làm việc cho tôi:

// The class note-editable is generated by summernote 

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

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

Nguồn: https://github.com/summernote/summernote/issues/61

Hy vọng điều này sẽ giúp người :)

Answer 4

Trong trường hợp của tôi, tôi muốn tạo ra một bộ chọn lớp cho 2 soạn thảo văn bản summernote phong phú. Một sẽ được kích hoạt khác bị vô hiệu hóa.

Để đạt được điều này, bạn có thể sử dụng phương pháp này

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

Khu vực văn bản sẽ cho phép mã rich text lưu vào được giải thích khi bạn hiển thị nó trở lại trong textarea sau.

Bây giờ, khi bạn tạo một mùa hè, trình soạn thảo văn bản phong phú sẽ không chuyển đổi phần tử của bạn thành phần ghi chú mùa hè, thay vào đó nó tạo phần tử mới bên dưới phần tử được xác định. Bạn có thể thấy điều này trong DOM nếu bạn kiểm tra các yếu tố khác nhau

Bây giờ để vô hiệu hóa các biên tập viên

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

này sẽ chọn các yếu tố mà bạn định nghĩa là summerNote và lấy các anh chị em lưu ý-editor. Trong thời gian đó anh chị em tồn tại văn bản có thể chỉnh sửa ghi chú. Đây là phần tử mà bạn muốn đặt thuộc tính 'contenteditable' thành false.