Share Tích hợp trình soạn thảo văn bản TinyMCE vào website

filiallion · 03/06/2018

Hiện nay có nhiều trình soạn thảo văn bản mã nguồn mở miễn phí nhưng có 2 trình soạn thảo văn bản được sử dụng nhiều nhất có lẽ là CKEditor và TinyMCE. Và hôm nay tôi sẽ hướng dẫn các bạn tích hợp trình soạn thảo văn bản TinyMCE vào website.

Hiện tại, trình soạn thảo văn bản TinyMCE đã có phiên bản 4 và tại thời điểm tôi viết bài này là phiên bản 4.7.9. Để tích hợp vào website, các bạn thực hiện như sau:

1. Tải thư viện jQuery tại địa chỉ http://jquery.com/download (Tôi sử dụng phiên bản 3.3.1).
2. Tải trình soạn thảo văn bản TinyMCE tại địa chỉ https://www.tinymce.com/download.
3. Giải nén tập tin tải về thì toàn bộ thư viện sẽ nằm trong thư mục js. Các bạn sao chép thư mục tinymce trong thư mục js này vào thư mục website của các bạn để sử dụng. Ở bài hướng dẫn này, cấu trúc thư mục chứa mã nguồn của tôi như sau:

Code:

js
-----jquery-3.3.1.min.js
-----script.js
libraries
-----tinymce
index.html

4. Mở tập tin js/script.js và nhập vào nội dung mã lệnh như sau:

JavaScript:

tinymce.init({
    selector: '#tinymce-editor'
});

5. Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:

HTML:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="libraries/tinymce/tinymce.min.js"></script>
<script src="js/script.js"></script>
<title>Integrate TinyMCE</title>
</head>
<body>
<textarea id="tinymce-editor"></textarea>
</body>
</html>

Bây giờ các bạn chạy tập tin index.html để xem kết quả.

Share Tích hợp trình soạn thảo văn bản TinyMCE vào website

filiallion

Administrator

Attachments