TinyMCE: Cài đặt và sử dụng cơ bản - Part 1

TinyMCE được viết bằng ngôn ngữ JavaScript và phát hành dưới dạng phần mềm mã nguồn mở LGPL bởi Ephox. TinyMCE có khả năng chuyển đổi các trường HTML hoặc các thành phần HTML thành bộ biên tập văn bản. TinyMCE được thiết kế để dễ dàng tích hợp vào hệ thống quản lý nội dung bao gồm Django, Drupal, Joomla!, WordPress và SOY CMS.

Cài đặt

Sử dụng CDN: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js

Hoặc bạn download bản Community tại đây: https://www.tiny.cloud/get-tiny/

Cài đặt TinyMCE

Truy cập trang web chính thức của TinyMCE tại đây và tải xuống TinyMCE SDK như bên dưới.

Giải nén tệp đã tải xuống và sao chép thư mục tinymce bên trong dự án của bạn bên trong wwwroot->js->tinymce như bên dưới.

Như vậy là bạn đã cài đặt xong TinyMCE

Sử dụng TinyMCE

Khai báo PostModel

public class PostModel
{
	public string Content { get; set; }
}

Trong HomeController, thêm Action TinyMceExample

public IActionResult TinyMceExample()
{
	//example data
	var model = new PostModel
	{
		Content = "<p>Click on the Image Below to resize</p>\r\n        <p><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXDIVdc97CgT9jktA8404pCb6gxZuvQu6j79ehQuoWx9f8gcWUBGK3uEbK2iC2CQE_ucK0uFv4RossG7DlIuFI97Tf6S3Q4AsheT80i-opWnYytx0YC6CZYaDg58XJSv19JPI-dlbF2DU/s16000/luat+su+phim+chan+tuong.jpg\"></p>\r\n        <p>Some initial <strong>bold</strong> text</p>\r\n        <p><img src=\"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidmJ4o7LYaqf5ZS8AIfR9GzFg5BMmX_MLYP4VBL54nYNfaEt6f1KcH6B91m7xgSDLaq6XLW_VUJGpQNfGFWBM8Vz1Q6i3ykJeU9mI1C3dUO6pURtGVi9GrUQ7WpG42oOTLABJc0dqLE_Y/s16000/ho+so+cong+ly.jpg\"></p>"
	};
	return View(model);
}

Trên View, bạn thêm đoạn code như sau:

@model TinyMceExample.Models.PostModel; 

<h1>Hello World</h1>

<form id="form" asp-controller="Home" asp-action="SaveData" onsubmit="handleSubmit()">
    <textarea asp-for="@Model.Content">@Html.Raw(Model.Content)</textarea>
    <input type="submit" value="Save data" class="btn btn-primary" />
</form>

@section scripts{
    <script src="~/libs/tinymce/js/tinymce/tinymce.min.js"></script>
<script>
        tinymce.init({
            selector: 'textarea#Content'
        });
</script>

}

Hàm tinymce.init() được dùng để khởi tạo editor thông qua selector.

Định dạng TinyMCE Text Editor

Trình soạn thảo văn bản TinyMCE hiển thị cơ bản. Để làm cho Editor tương tác hơn, bạn có thể thêm nhiều plugin, thanh công cụ, menu, v.v. cũng được cung cấp bởi TinyMCE.

tinymce.init({
	selector: 'textarea#Content',
	//Height and width
	height: 670,
	plugins: [
		'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview',
		'anchor', 'pagebreak',
		'searchreplace', 'wordcount', 'visualblocks', 'visualchars', 'code',
		'fullscreen', 'insertdatetime',
		'media', 'table', 'emoticons', 'template', 'help'
	],
	toolbar: 'undo redo | styles | bold italic | alignleft aligncenter alignright alignjustify | ' +
		'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
		'forecolor backcolor emoticons | help',
	menu: {
		favs: {
			title: 'My Favorites', items: 'code visualaid | ' + 'searchreplace | emoticons' }
	},
		menubar: 'favs file edit view insert format tools table help',
	});

Ẩn menu:

tinymce.init({
    selector: "textarea",
    menubar: false
});

Tham khảo

https://www.c-sharpcorner.com/article/inserting-rich-text-editor-in-asp-net-mvc-6/