bootstrap wysiwyg: cách lấy văn bản được định dạng ở phía máy chủ?

Question

Tôi đang học Bootstrap và muốn có một trình soạn thảo wysiwyg. Tôi đã tìm thấy bootstrap-wysiwyg và muốn sử dụng nó.

http://mindmup.github.io/bootstrap-wysiwyg/

Tuy nhiên, tôi không thể tìm ra cách để có được văn bản định dạng trên server-side khi một mẫu được gửi.

Answer 1

tôi phát hiện ra làm thế nào để làm điều này. Đây là cách làm.

Trường nhập văn bản hoặc vùng văn bản bị ẩn là cần thiết. Trường này có thể có thuộc tính name được đặt thành tên của trường của đối tượng. Tên của nó phải là thứ mà phía máy chủ mong đợi.

Sử dụng JQuery để đính kèm biểu mẫu gửi trình xử lý sự kiện vào biểu mẫu chứa trình chỉnh sửa wysiwyg. Trình xử lý lấy văn bản từ trình soạn thảo wysiwyg và đặt nó làm giá trị của trường ẩn.

Hy vọng điều này sẽ giúp người khác.

Answer 2

<textarea class="textarea" name="mytext" placeholder="Enter text ..." style="width: 810px; height: 200px"></textarea> 

sử dụng val()

$('.textarea').wysihtml5(); 

$('.textarea').val(); 

http://jsfiddle.net/suhailvs/vNPAJ/3/

bạn có thể nhận nó như bài

request.POST['mytext'] 

Answer 3

Đây là một chủ đề cũ, nhưng có thể mẹo này sẽ giúp người khác.

Theo đề cập của courious1, chúng ta cần tạo một vùng văn bản ẩn (ví dụ: id = hidden-editor) trên biểu mẫu của chúng tôi. và chuyển giá trị trong #editor tới # trình chỉnh sửa ẩn của chúng tôi bằng javascript bên dưới:

//-- submit button clicked 
$('#submit-btn').click(function(){ 
    $('#hidden-editor').html(
     $("#editor").html() 
    ); 
}); 

Answer 4

Cuối cùng tôi đã đưa ra giải pháp này. Đã không quản lý để thực hiện công việc onclick ... nhưng việc sửa đổi thời gian thực là tiện dụng. Cảm ơn những ý tưởng.

$('#editor').bind("DOMSubtreeModified",function(){ 
       $('#you_hidden_textarea').html(
         $("#editor").html() 
       ); 
      }); 

Answer 5

Tiếp theo là làm thế nào để có được nội dung biên tập viên của bootstrap-wysiwyg

Set id để div sau đây tôi đã sử dụng biên tập như id và tôi cũng thiết lập một nút lưu.

<div id="editor"> 
     Go ahead&hellip; 
    </div> 

<a class="btn" data-edit="bold" id="saveBtn" title="Save"><i class="icon-save"></i></a> 

Sau đó

$('#editor').wysiwyg(); 

$('#saveBtn').on('click',function(){   

     console.log($('#editor').html()); 

     }) 

Hy vọng điều này sẽ giúp người khác trong tương lai