Summer Note - khung soạn thảo văn bản - web text editor cho Blogger

Web text editor for Blogger

Summer Note - mang trình soạn thảo văn bản khi viết bài của Blogger vào ngay trên website của bạn. Đặc biệt có thêm tính năng chuyển đổi sang code HTML rất thuận tiện khi bạn soạn thảo để dán vào khung bình luận hay 1 trường trong Google Form.

CSS

1Vào Mẫu >> Chỉnh sửa HMTL và dán đoạn CSS vào trước thẻ ]]></b:skin>

.note-editor .note-editable{
border-top: 1px solid rgba(0,0,0,0.2) !important;
margin:10px 0px  !important;
}
.note-toolbar{
text-align:center  !important;
}
.note-editor{
border:none  !important;
margin:25px 0px  !important;
}
.note-editor .note-toolbar{
border:none  !important;
background-color:white  !important;
}
.btn-default{
background:rgb(245,170,86)  !important;
border:none  !important;
font-size:1.3em  !important;
}
.btn-toolbar .btn-group{
float:none  !important;
}

.btn {
  border-radius:0px !important;
}
.btn-container {
  text-align:center !important;
}

jQuery

2Tiếp tục dán đoạn code bên dưới vào trước thẻ </body>

<script type='text/javascript'>
$(document).ready(function() {
$('.defaultsummernote').summernote( {
height: 300,    
focus: true,
toolbar: [
['prestyled', ['style']], 
['font-name', ['fontname']], 
['font-group', ['color','bold','italic','underline','clear']], 
['list-alignment-group', ['ul','ol','paragraph']],
['insert', ['link','picture','hr','table']],
['extra', ['undo','redo','fullscreen','codeview','help']]
],
onChange: function(contents, $editable) {
    console.log('onChange:', contents, $editable);
    $('.save-btn').removeClass('btn-success').addClass('btn-danger');
  }
});

$('.note-prestyled .btn .fa-magic').removeClass('fa-magic').addClass('fa-pencil');  
$('.note-extra .btn .fa-question').removeClass('fa-question').addClass('fa-question-circle'); 
});
</script>

HTML

3Dán đoạn code sau đây vào vị trí mà bạn muốn đặt Khung soạn thảo văn bản

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.2/united/bootstrap.min.css"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/>
<script src="https://code.jquery.com/jquery-2.0.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.2/summernote.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.6.2/summernote.min.js"></script>
<textarea class="defaultsummernote"> Dummy Text </textarea>
<div class="btn-container">
<button class="btn btn-success save-btn">Save Your Work!</button>
</div>

• DEMO

See the Pen yYKMoY by Iris Tips (@IrisTips) on CodePen.

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm