Giới thiệu Froala Editor

Froala Editor là trình soạn thảo văn bản định dạng hỗ trợ tốt trên cả nền tảng Android và iOS. Sản phẩm yêu cầu bản quyền thương mại nhưng có thể dùng cho mục đích học tập.

Cài đặt cơ bản

Nhúng tệp CSS

<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_editor.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/froala_style.min.css" rel="stylesheet">
<!-- Tùy chọn -->
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/colors.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/froala-editor@latest/css/plugins/char_counter.min.css" rel="stylesheet">

Hai tệp đầu bắt buộc, các plugin màu sắc và đếm ký tự tùy chọn.

Nhúng tệp JavaScript

<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/froala_editor.min.js"></script>
<!-- Plugin mở rộng -->
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/align.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/colors.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/font_size.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/plugins/char_counter.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@latest/js/languages/vi.js"></script>

Tệp chính bắt buộc, các plugin căn chỉnh, màu sắc, cỡ chữ, đếm ký tự và ngôn ngữ tùy chọn.

Cấu trúc HTML

<div class="editor-container">
  <div id="vungSoanThao"></div>
  <button id="btnLuu">Lưu nội dung</button>
</div>

Cấu hình trình soạn thảo

$(document).ready(function() {
  const noiDungMacDinh = '<p>Nội dung mẫu</p>';
  
  // Tùy chỉnh biểu tượng
  $.FroalaEditor.DefineIcon('mauChu', {
    SRC: 'icon-mau.png', 
    ALT: 'Chọn màu',
    template: 'image'
  });

  $('#vungSoanThao').froalaEditor({
    autofocus: true,
    toolbarButtonsXS: ['undo', 'redo', '|', 'bold', 'italic', 'underline', '|', 'fontSize', 'align', 'mauChu'],
    language: 'vi',
    colorsHEXInput: false,
    colorsBackground: ['#333', '#777', '#D00', '#F80', '#4A4', '#26F', '#A29', 'REMOVE'],
    colorsText: ['#333', '#777', '#D00', '#F80', '#4A4', '#26F', '#A29', 'REMOVE'],
    fontSize: ['14', '16', '18', '20'],
    fontSizeDefaultSelection: '16',
    height: 250,
    charCounterMax: 500
  }).froalaEditor('html.set', noiDungMacDinh);
  
  $("#btnLuu").click(function() {
    const htmlContent = $('#vungSoanThao').froalaEditor('html.get');
    console.log(htmlContent);
  });
});

Tùy chỉnh giao diện

Sử dụng DefineIcon để thay thế biểu tượng mặc định. Thuộc tính SRC xác định đường dẫn ảnh mới, ALT cung cấp văn bản thay thế.