Tinymce là gì
Bạn đang xem: Tinymce là gì
TinyMCE là 1 căn nguyên chủ quyền dựa vào Javascript HTML WYSIWYG được kiến tạo do LGPL website. Nó cung cấp một trình biên soạn thảo văn phiên bản HTML, được thiết kế để dễ dàng hóa câu hỏi tạo thành văn bản website. Nó giúp bọn họ dễ dàng chỉnh sửa format gần như đoạn văn uống bản như blog, mô tả tìm kiếm... ngoài ra nó cũng trọn vẹn miễn phí
2.Sử dụng TinyMCE vào ExpressJS.TinyMCE được ứng dụng cùng thực hiện vào tương đối nhiều ngôn ngữ, việc thiết đặt bằng cách sở hữu package về hoặc cài đặt bởi dòng lệnh trên terminal.Trong nội dung bài viết này bản thân vẫn áp dụng TinyMCE trong framework ExpressJS.
2.1. Cài đặt.
Chúng bản thân đã thiết đặt TinyMCE qua Bower - mức sử dụng thống trị những mối cung cấp tài nguim cho việc lập trình sẵn font-over. Được cách tân và phát triển và Open Source vày Twitter.Nếu chúng ta nào chưa rõ lắm về phong thái thiết lập cùng thực hiện npm thì hoàn toàn có thể tìm hiểu thêm trên nội dung 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ởi câu lệnh:
bower install tinymce
2.2.Sử dụng.
Sau Lúc bọn họ đang tải hoàn thành TinyMCE bởi bower , bước tiếp sau nhằm nhúng TinyMCE vào vào project của chính mình nhằm áp dụng. Mình đang đem một quãng code thử nghiệm 1 khung chế tác 1 nội dung 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> form 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://hanic.com.vn/javascripts/admin/create_category_validator.js">script>script type="text/javascript" src="https://hanic.com.vn/javascripts/admin/create_category_validator.js">script>script src="https://hanic.com.vn/bower/tinymce/tinymce.min.js">script> script type="text/javascript"> tinymce.init( selector: "#content" ); script>Chúng ta đang nhúng đoạn script này vào để áp dụng TinyMCE.
Xem thêm: Rượu Etylic Là Gì - Công Thức Và Tính Chất Hóa Học Của Rượu Etylic
script src="https://hanic.com.vn/bower/tinymce/tinymce.min.js"> tinymce.init( selector: "#content" ); script>lúc thiết lập ngừng bower thì đã xuất hiện trong project của chúng ta file .bowerrc cùng trong số đó ta config đường truyền lúc họ bower về thì package đó sẽ ở ở đâu. Thì tại đây vào file .bowerrc mình config toàn bộ những package Lúc bower về vẫn nằm ở public/bower ..bowerrc
"directory": "public/bower"Đoạn code
tinymce.init( selector: "#content" );Dùng nhằm init TinyMCE , #nội dung là id của thẻ .Với 1 làm việc nhúng đoạn script đơn giản và dễ dàng điều này , chúng mình sẽ tiến hành đồ họa TinyMCE nhỏng sau :
plugins: thiết lập rất nhiều phần không ngừng mở rộng mang đến HTML editor:
Table: cung ứng Việc ckém bảng với thao tác cùng với bảngImage: rất có thể cyếu ảnh.còn tương đối nhiều plugin không giống, chúng ta có thể xem thêm đây: http://archive.tinymce.com/wiki.php/Plugins
toolbar: setup những luật quan trọng cho vấn đề biên soạn thảo như:
Thao tác: unvị, redoCăn lề: alignleft, aligncenter, ignjustify, alignrightĐịnh dạng font: formatselect, fontselect, fontsizeselectĐinch dạng chữ: bold, italic, underlineThứ đọng từ bỏ của những điều khoản trên đã y hệt như sản phẩm công nghệ từ bỏ được viết trong file config.
3.Ứng dụng plugins có sẵn của TinyMCE.Lúc viết một bài viết thì chúng ta thường xuyên mong mỏi chèn hình họa vào bài viết. Sau phía trên mình sẽ reviews plugin dùng làm cyếu hình ảnh lúc viết một bài viết. Mình vẫn sử dụng plugin bao gồm sẵn trong TinyMCE .script> script type="text/javascript"> tinymce.init( selector: "#content", plugins: "image", ); script>Thêm ngôi trường plugins có giá trị "image". Plugin này sinh hoạt thư mục tinymce/plugins/image/plugin.min.js.Ta áp dụng plugin bao gồm sẵn của TinyMCE thì chỉ ckém được hình họa Khi đã có được đường dẫn của hình ảnh chứ không chèn được hình họa gồm sẵn sinh sống local. Sau phía trên bản thân đang trình làng bí quyết thứ hai nhằm ckém hình ảnh vào nội dung bài viết trường đoản cú local.Chúng ta đang áp dụng đoạn code sau.
script src="https://hanic.com.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 đầu vào = document.createElement("input"); input.setAttribute("type", "file"); đầu vào.setAttribute("accept", "image/*"); input đầ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 = blobCabịt.create(id, tệp tin, base64); blobCache.add(blobInfo); cb(blobInfo.blobUri(), title: tệp tin.name); ; reader.readAsDataURL(file); ; đầu vào.click(); ); script>Sau đấy là hình hình ảnh demo.
Trên phía trên mình đã ra mắt về TinyMCE cũng như là cách thực hiện plugin trong TinyMCE. TinyMCE dễ thiết lập cùng áp dụng, có nhiều tùy lựa chọn. Mong sẽ giúp đỡ ích được mang đến chúng ta.
Xem thêm: Hậu Chia Tay Bùi Anh Tuấn Cao Mỹ Kim, Cao Mỹ Kim: Bùi Anh Tuấn Rất Điệu
https://www.tinymce.com/docs/plugins/https://www.tinymce.com/docs/demo/file-picker/
