Giới thiệu về tinymce là gì
Bạn đang xem: Giới thiệu về tinymce là gì
TinyMCE là một trong những nền tảng độc lập dựa trên Javascript HTML WYSIWYG được tạo ra bởi vì LGPL website. Nó cung ứng một trình soạn thảo vnạp năng lượng bạn dạng HTML, được thiết kế với nhằm đơn giản dễ dàng hóa bài toán tạo ra nội dung web. Nó giúp chúng ta dễ dãi sửa đổi định hình đa số đoạn văn uống bản như blog, mô tả tìm kiếm... Nhiều hơn nó cũng trọn vẹn miễn phí
2.Sử dụng TinyMCE trong ExpressJS.TinyMCE được ứng dụng và sử dụng trong tương đối nhiều ngôn ngữ, việc setup bằng phương pháp mua package về hoặc setup bởi chiếc lệnh bên trên terminal.Trong bài viết này mình đã áp dụng TinyMCE vào framework ExpressJS.
2.1. Cài đặt.
Chúng mình đã thiết đặt TinyMCE qua Bower - lý lẽ làm chủ các nguồn tài nguyên ổn cho Việc lập trình sẵn font-kết thúc. Được cách tân và phát triển và Open Source vì chưng Twitter.Nếu các bạn làm sao chưa rõ lắm về phong thái thiết đặt với thực hiện npm thì rất có thể tham khảo trên bài viết :https://trungquandev.com/toi-da-su-dung-bower-de-quan-ly-cac-thu-vien-code-nhu-the-nao/
Thêm TinyMCE vào project của mình bằng câu lệnh:
bower install tinymce
2.2.Sử dụng.
Sau khi họ vẫn download xong TinyMCE bằng bower , bước tiếp theo sau để nhúng TinyMCE vào vào project của chính mình nhằm thực hiện. Mình đang lấy một đoạn code chạy thử 1 khung sinh sản 1 bài viết.section class="content-header"> h1>h1>section>section class="content"> div class="row"> div class="col-10 offset-1"> div class="box box-primary"> div class="box-header with-border"> h3 class="box-title">h3> div> khung method="POST" action="/admin/posts/store" role="form" class="form-element" id="create-post"> div class="box-body"> div class="form-group"> label for="name">label> input đầu vào class="form-control" type="text" name="title" id="title" placeholder=""> div> div class="form-group"> label for="name">label> textarea class="form-control" name="content" id="content" placeholder="">textarea> div> div> div class="box-footer text-right"> button type="submit" class="btn btn-lg btn-warning">button> div> form> div> div> div>section>script type="text/javascript" src="https://cdspninhthuan.edu.vn/javascripts/admin/create_category_validator.js">script>script type="text/javascript" src="https://cdspninhthuan.edu.vn/javascripts/admin/create_category_validator.js">script>script src="https://cdspninhthuan.edu.vn/bower/tinymce/tinymce.min.js">script> script type="text/javascript"> tinymce.init( selector: "#content" ); script>Chúng ta sẽ nhúng đoạn script này vào để sử dụng TinyMCE.
Xem thêm: Dâu Của Vua Gọi Là Gì - Ts Lê Thẩm Dương: Con
script src="https://cdspninhthuan.edu.vn/bower/tinymce/tinymce.min.js"> tinymce.init( selector: "#content" ); script>lúc thiết đặt ngừng bower thì sẽ ra đời vào project của họ tệp tin .bowerrc và trong những số ấy ta config đường dẫn Lúc bọn họ bower về thì package này sẽ ở nơi đâu. Thì ở chỗ này vào tệp tin .bowerrc mình config tất cả những package Lúc bower về sẽ nằm tại public/bower ..bowerrc
"directory": "public/bower"Đoạn code
tinymce.init( selector: "#content" );Dùng để init TinyMCE , #content là id của thẻ .Với 1 thao tác nhúng đoạn script dễ dàng điều đó , bọn chúng mình sẽ tiến hành giao diện TinyMCE nhỏng sau :
plugins: thiết đặt những phần không ngừng mở rộng cho HTML editor:
Table: hỗ trợ Việc ckém bảng cùng thao tác làm việc cùng với bảngImage: hoàn toàn có thể ckém hình ảnh.còn tương đối nhiều plugin không giống, chúng ta cũng có thể tìm hiểu thêm đây: http://archive.tinymce.com/wiki.php/Plugins
toolbar: setup những luật pháp quan trọng cho Việc biên soạn thảo như:
Thao tác: unvày, redoCnạp năng lượng lề: alignleft, aligncenter, ignjustify, alignrightĐịnh dạng font: formatselect, fontselect, fontsizeselectĐinc dạng chữ: bold, italic, underlineThứ đọng từ của các phương pháp bên trên đã giống hệt như đồ vật từ được viết vào tệp tin config.
3.Ứng dụng plugins tất cả sẵn của TinyMCE.Lúc viết một nội dung bài viết thì bọn họ thường muốn cyếu hình họa vào nội dung bài viết. Sau đây bản thân vẫn ra mắt plugin dùng để ckém hình họa Khi viết một bài viết. Mình sẽ sử dụng plugin có sẵn vào TinyMCE .script> script type="text/javascript"> tinymce.init( selector: "#content", plugins: "image", ); script>Thêm ngôi trường plugins có mức giá trị "image". Plugin này sống thư mục tinymce/plugins/image/plugin.min.js.Ta sử dụng plugin tất cả sẵn của TinyMCE thì chỉ ckém được ảnh khi có được đường dẫn của hình ảnh chứ không cần ckém được ảnh bao gồm sẵn ngơi nghỉ local. Sau trên đây bản thân đã trình làng bí quyết thứ hai nhằm cnhát hình ảnh vào bài viết trường đoản cú local.Chúng ta đã thực hiện đoạn code sau.
script src="https://cdspninhthuan.edu.vn/bower/tinymce/tinymce.min.js">script> script type="text/javascript"> tinymce.init( selector: "#content", plugins: "image code", image_title: true, automatic_uploads: true, file_picker_types: "image", file_picker_callback: function(cb, value, meta) var input đầu vào = document.createElement("input"); đầu vào.setAttribute("type", "file"); input đầu vào.setAttribute("accept", "image/*"); đầu vào.onchange = function () var tệp tin = this.files<0>; var reader = new FileReader(); reader.onload = function () var id = "blobid" + (new Date()).getTime(); var blobCache = tinymce.activeEditor.editorUpload.blobCache; var base64 = reader.result.split(",")<1>; var blobInfo = blobCache.create(id, file, base64); blobCađậy.add(blobInfo); cb(blobInfo.blobUri(), title: file.name); ; reader.readAsDataURL(file); ; đầu vào.click(); ); script>Sau đó là hình ảnh test.
Trên đây mình đã trình làng về TinyMCE tương tự như là biện pháp sử dụng plugin trong TinyMCE. TinyMCE dễ dàng thiết đặt và thực hiện, có không ít tùy chọn. Mong sẽ giúp ích được mang đến các bạn.
5.Tham khảo.https://www.tinymce.com/docs/plugins/https://www.tinymce.com/docs/demo/file-picker/
Chuyên mục:
