Quill: Tích hợp Quill vào ASP.NET Core - Part 1

Nhắc đến trình soạn thảo WYSIWYG, hẳn nhiều người sẽ nghĩ tới 2 công cụ phổ biến là CKEditor và TinyMCE. Nhưng mình thấy QuillJs có nhiều tính năng hay và khả năng tùy biến cao.

Quill sử dụng Deltas format, một định dạng đơn giản để mô tả những nội dung và thay đổi trong Quills.

Cài đặt

Trang chủ: https://quilljs.com/

Include 2 file css và js vào đầu và cuối trên trang web

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  // First matching element will be used
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

Để cập nhật Quill lên phiên bản mới nhất, bạn tham khảo ở: https://cdnjs.com/libraries/quill

Quill cần 1 thẻ HTML để thêm Editor vào. Cụ thể trong ví dụ trên là thẻ div với id= “editor”.

var quill = new Quill('#editor', {
    theme: 'snow'
  });

Customize Toolbar

Toolbar cho phép thêm nhiều control vào Editor. Toolbar có thể được chỉ ra bằng 1 mảng Array có object hay bằng HTML container

var toolbarOptions = [
	['bold', 'italic', 'underline', 'strike'],        // toggled buttons
	[{ 'align': [] }],
	['blockquote', 'code-block'],

	[{ 'header': 1 }, { 'header': 2 }],               // custom button values
	[{ 'list': 'ordered' }, { 'list': 'bullet' }],
	[{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
	[{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
	[{ 'direction': 'rtl' }],                         // text direction

	[{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
	[{ 'header': [1, 2, 3, 4, 5, 6, false] }],

	[{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
	[{ 'font': [] }],
	['video'],
	['image'],

	['clean']                                         // remove formatting button
];
var jdQuill = new Quill('#editor', {
	modules: {
		toolbar: toolbarOptions
	},
	theme: 'snow'
});

Sử dụng container:

var toolbar = {
	// Selector for toolbar container
    container: [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        [{ 'align': [] }],
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        ['video'],
        ['image'],

        ['clean']
    ]
}

var jdQuill = new Quill('#editor', {
    modules: {
        toolbar: toolbar
    },
    theme: 'snow'
});

Trường hợp sử dụng HTML container, bạn cần đặt toolbar trước thẻ editor chứa nội dung cần hiển thị. Việc hiển thị sẽ được sắp xếp từ trên xuống dưới. Form HTML:

<form id="form" asp-controller="Home" asp-action="SaveData" onsubmit="handleSubmit()">
    <input type="hidden" id="jdr" asp-for="@Model.Content" />
    <!-- Create toolbar container -->
    <div id="toolbar">
        <!-- Add font size dropdown -->
        <select class="ql-size">
            <option value="small"></option>
            <!-- Note a missing, thus falsy value, is used to reset to default -->
            <option selected></option>
            <option value="large"></option>
            <option value="huge"></option>
        </select>
        <!-- Add a bold button -->
        <button class="ql-bold"></button>
        <!-- Add subscript and superscript buttons -->
        <button class="ql-script" value="sub"></button>
        <button class="ql-script" value="super"></button>
    </div>
    <div id="editor">
        @Html.Raw(Model.Content)
    </div>
    <input type="submit" value="Save data" />
</form>

Javavascript tương ứng:

var jdQuill = new Quill('#editor', {
    modules: {
        toolbar: '#toolbar'//toolbar//toolbarOptions
    },
    theme: 'snow'
});

Theme

Theme cho phép bạn chỉnh sửa editor trông đẹp mắt mà ít tốn công sức nhất. Có 2 theme được hỗ trợ chính trong Quill

• snow: hiển thị Editor với toolbar
• bubble: hiện thị Editor động khi click vào text trên web.

VD

<!-- Add the theme's stylesheet -->
<link rel="stylesheet" href="//cdn.quilljs.com/1.3.6/quill.bubble.css">

<script src="//cdn.quilljs.com/1.3.6/quill.js"></script>
<script>
var quill = new Quill('#editor', {
  theme: 'bubble'   // Specify theme in configuration
});
</script>

Tích hợp vào ASP.NET Core

Đầu tiên, chúng ta xây dựng Model để get data và post data

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

Ở HomeController, bạn thêm 2 hàm mới, mục đích là để gởi nhận data

public IActionResult QuillJs()
{
	//example data
	var model = new PostModel
	{
		Content = "  <p>Hello World!</p>\r\n  <p>Some initial <strong>bold</strong> text</p>\r\n  <p><br></p>"
	};
	return View(model);
}

[HttpPost]
public IActionResult SaveData(PostModel model)
{
	return View(model);
}

Ở trang view của QuillJs, chúng ta sẽ cho hiển thị Editor kèm form để post data

@model QuillTutorial.Models.PostModel;
<h1>Hello World</h1>

<form id="form" asp-controller="Home" asp-action="SaveData" onsubmit="handleSubmit()">
    <input type="hidden" id="jdr" asp-for="@Model.Content" />
    <div id="editor">
        @Html.Raw(Model.Content)
    </div>
    <input type="submit" value="Save data" />
</form>

@section styles{
    <!-- Include stylesheet -->
    <link href="https://cdn.quilljs.com/1.3.7/quill.snow.css" rel="stylesheet">
    <link href="https://cdn.quilljs.com/1.3.7/quill.bubble.css" rel="stylesheet">
}

@section scripts{
    <!-- Include the Quill library -->
    <script src="https://cdn.quilljs.com/1.3.7/quill.js"></script>

    <!-- Initialize Quill editor -->
    <script>
        var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            [{ 'align': [] }],
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            ['video'],
            ['image'],

            ['clean']                                         // remove formatting button
        ];
        var jdQuill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },
            theme: 'snow'
        });
        function handleSubmit() {
            console.info('handleSubmit called');
            document.getElementById('jdr').value = jdQuill.root.innerHTML;
        };
    </script>
}

Ở trang SaveData.cshtml, chúng ta cho hiển thị data vừa được submit lên:

@model QuillTutorial.Models.PostModel;
<div>
    @Html.Raw(Model.Content)
</div>

Download source code: https://www.mediafire.com/file/u9kcpfe5t5tu0p3/QuillTutorial.zip/file

Tham khảo

https://themesbrand.com/velzon/docs/asp/quilljs.html

https://kags.me.ke/post/quilljs-on-asp-net-core/

https://endpointsystems.com/blog/asp-net-core-rich-text-editor