Sử dụng CKEditor vào ứng dụng ASP.NET Core

Bài viết này để hướng dẫn ta nhúng ckeditor (v4.2) vào ứng dụng ASP.NET Core 1.0.1
CKEditor được biết đến như 1 rich text editor control trên web. Ta có thể lên trang download của CKEditor tại đây http://ckeditor.com/download. Trong trang đó, ta có thể chọn package tùy theo nhu cầu từ đơn giản đến phức tạp hoặc thậm chí là customize 1 cái riêng cho mình. Ví dụ ở đây tôi down về gói basic. Sau khi giải nén thì ta sẽ được như thế này:
2016-12-31-00_56_43-ckeditor
Và sau đó copy vào folder wwwroot/lib của project ASP.NET Core sẽ được như thế này:
2016-12-31-01_00_46-webapplication7-microsoft-visual-studio
Sau đó ta sẽ include vào View

<textarea id="rtxBlogContent"></textarea>
@section scripts{
    <script src="~/lib/ckeditor/ckeditor.js"></script>
    <script src="~/lib/ckeditor/adapters/jquery.js"></script>
    <script>
        $("#rtxBlogContent").ckeditor();
    </script>
}

Các bạn lưu ý ckeditor v4.2 sẽ cần include thêm thư viện /adapters/jquery.js (vẫn còn cuồng jquery lắm :D)
Kết quả run thử các bạn sẽ thấy ckeditor xuất hiện, và vì tôi ban nãy down về gói basic nên chỉ có 1 ít công cụ trên toolbar. Nếu như ta down gói phức tạp hơn có thể có thêm nhiều tiện ích khác như là print, bullet format, styles…
ckeditor

Tiếp theo ta làm thêm 1 cái ví dụ thao tác save và load trên ckeditor với ASP.NET Core nhé:
Ta sẽ cho cập nhật qua 1 model tạm đặt tên là Blog.

public class Blog
{ 
    public string BlogContent { get; set; }
}

Ở controller, ta sẽ viết thêm phần bind data post lên và trả xuống view luôn:

        public IActionResult Index()
        {
            return View(new Blog {
                BlogContent = "Xin chào bạn đến với blog <strong>vkhangyang.wordpress.com</strong>"
            });
        }

        [HttpPost]
        public IActionResult Index(Blog model)
        {
            return View(model);
        }

Ở view, ta sẽ làm thêm 1 cái nút để lưu:

@model WebApplication7.Models.Blog

<form asp-controller="Home" asp-action="Index">
    <textarea asp-for="BlogContent" id="rtxBlogContent"></textarea>
    <input type="submit" value="Save"/>
</form>

@section scripts{
    <script src="~/lib/ckeditor/ckeditor.js"></script>
    <script src="~/lib/ckeditor/adapters/jquery.js"></script>
    <script>
        $("#rtxBlogContent").ckeditor();
    </script>
}

2016-12-31-01_40_57-home-page-webapplication7

Ta có thể edit thử và bấm nút save, web sẽ load lại và thấy được nội dung như đã cập nhật.

Nếu bạn muốn sử dụng ở ASP.NET MVC 3 xem ở đây: https://vkhangyang.wordpress.com/2012/07/14/su-dung-ckeditor-vo-ung-dung-asp-net-mvc-3/

One response to “Sử dụng CKEditor vào ứng dụng ASP.NET Core

  1. Pingback: Sử dụng CKEditor vào ứng dụng ASP .NET MVC 3 | CHUNG VĨNH KHANG'S BLOG·

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất /  Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất /  Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất /  Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất /  Thay đổi )

Connecting to %s