Cách đưa icon Fontawesome vào trình soạn thảo TinyMce

2021-06-27 03:45:52 Admin

Fontawesome là một thư viện Icon rất quen thuộc với các bạn lập trình viên. Nó cung cấp rất nhiều icon miễn phí cho các bạn để tạo nên các giao diện UX, UI đẹp. Tuy nhiên vẫn còn rất nhiều bạn vẫn chưa biết cách đưa thư viện Fontawesome vào trong trình soạn thảo admin. 

 Vì vậy hôm nay mình sẽ hướng dẫn các bạn cách đưa Fontawesome vào trình soạn thảo

 Ở đây mình dùng TinyMCE - plugin miễn phí cùng rất nhiều công cụ tiện tích toolbar.

1. Tải Fontawesome để cài đặt trong TinyMce.

- Link Tải Fontawesome TẠI ĐÂY

2. Giải nén và copy đưa vào mục TinyMCE dự án của các bạn nhé.

- Giải nén file Fontawesome vừa tải và copy vào đường dẫn thư mục TinyMce.

- Link đường dẫn thư mục của mình:

tinymce\src\plugins\

3. Cài đặt vào TinyMCE

- Các bạn mở function tinyMCE để thêm vào toolbar, css : Ở đây trong admin mình đang dùng Font Awesome bản v5.12.0 nhé

tinymce.init({tinymce.init({ 
content_css: 'https://pro.fontawesome.com/releases/v5.12.0/css/all.css', 
plugins: ["noneditable"], 
external_plugins : {"fontawesome":"/template-admin/tinymce/src/plugins/fontawesome/plugin.min.js"},
noneditable_noneditable_class: 'fa',    
extended_valid_elements: 'span[*]',    
toolbar: "fontawesome",
});

- Đến đây là trong admin bạn đã Cài xong Fontawesome vào trình soạn thảo TinyMce. Tuy nhiên phía bên ngòa giao diện bạn có thể sử dụng rất nhiều Version Fontawesome khác nhau, nên các Icon sẽ không hiển thị theo bạn mong muốn. Hãy thực hiện bước sau nữa nhé nếu Version Fontawesome bạn đang sử dụng không trùng với bản Fontswesome bạn đã cài trong TinyMCe.

4. Điều chỉnh Fontswesome Trong trình soạn thảo phù hợp với bản Fontswesome bên ngoài giao diện

Truy cập theo đường dẫn bạn đã copy file Fontswesome vào TinyMcebước 2.

Mở file Plugin.js ở trong folder Fontswesome bạn sẽ thấy phiên bản Fontswesome bạn cài vào TinyMCE ở đây:

- Tiếp đến là chỉnh sửa một tý để đúng với bản Version Fontswesome bên ngoài. Thường bản v5.0 trở lên sẽ là : fas, fab, far,... Các bản thấp hơn như V4.7~ sẽ là fa nên mình chỉ cần đổi ở đây là xong

Chức các bạn thành công. Nếu gặp vấn đề gì hãy để lại Comment giải đáp nhé.

Bài viết nổi bật

Hãy thiết kế website chuyên nghiệp vì 9 lý do này!
2021-06-27 03:10:00 Tin tổng hợp

Bạn đã bao giờ thử nghĩ khi khách hàng muốn tìm hiểu thông tin về doanh nghiệp, thương hiệu của ...

Bài viết mới nhất

Lộ trình 15 bước trở thành Web Developer 2022 với những công nghệ tiên tiến nhất
2021-12-11 17:16:27 Kiến thức Website

Ngắn gọn và đẩy đủ là mục đích của bài viết này. Trong bài viết này, một lập trình viên giàu kinh ...

Các Font chữ Tiếng Việt cho thiết kế website
2021-08-17 16:19:25 Kiến thức Website

Bạn là người thiết kế website, bạn cần biết nhiều loại font chữ dành cho website để phục vụ khách ...

Phần mềm thiết kế website chuyên nghiệp miễn phí cho người không chuyên
2021-07-23 12:05:09 Tin tổng hợp

Với các bạn biết sử dụng Photoshop, Ai, Pr thiết kế website trở lên quá dễ dàng không gặp khó khă ...

Cách cài đặt thư viện Font Awesome miễn phí vào website
2021-07-15 11:16:32 Kiến thức Website

Font Awesome là một thư viện Icon rất phổ biến với nhiều lập trình viên Front-End do: bạn được ...

Những lưu ý quan trọng cho khách hàng trước khi làm Website
2021-07-03 19:24:50 Tin tổng hợp

Khi bắt đầu làm website phục vụ cho mục đích của mình, các bạn cần chú ý các vấn đề sau, để tránh ...