1. An Nguyen

    An Nguyen bụi Ban quản trị

    6/1/16
    #1
    nopCommerce sử dụng bộ editor của TinyMCE để đăng bài sản phẩm, trong bài viết này mình tổng hợp ra một số thủ thuật và mẹo để làm cho TinyMCE mạnh hơn và dễ sử dụng hơn.

    1. Nâng cấp TinyMCE
    - Trong bản nopCommerce 3.7 mới nhất đang sử dụng phiên bản cũ TinyMCE 4.0.18 (2014-02-27) nên mình sẽ nâng cấp lên phiên bản mới nhất TinyMCE 4.3.2 (2015-12-14) để tận hưởng những tính năng và sửa lỗi mới nhất.
    shortdecription.png
    - Download bản TinyMCE Community 4.3.2 về và giải nén mục tinymce\js\tinymce vào thư mục Content\tinymce (nhớ xóa cái cũ đi nhé)

    2. Chuyển mục Short description từ khung Text sang RichEditor giống Full description
    - Tìm và mở file Administration\Views\Product\_CreateOrUpdate.Info.cshtml
    Tìm dòng
    PHP:
    1. @Html.TextAreaFor(model => model.Locales[item].ShortDescription, new { style = "Width: 250px; Height: 150px;" })
    Thay thế bằng
    PHP:
    1. @Html.EditorFor(model => model.Locales[item].ShortDescription, "RichEditor")
    Tìm dòng
    PHP:
    1. @Html.TextAreaFor(x => x.ShortDescription, new { style = "Width: 250px; Height: 150px;" })
    Thay bằng
    PHP:
    1. @Html.EditorFor(x => x.ShortDescription, "RichEditor")
    3. Tùy chỉnh plugin TinyMCE
    - Tùy chỉnh plugin giúp paste nội dung giữ nguyên định dạng (từ word, website)
    Tìm và mở Administration\Views\Shared\EditorTemplates\RichEditor.cshtml
    Tìm đoạn
    PHP:
    1.         var defaultEditorSettings@(random) = {
    2.             selector: "#@ViewData.TemplateInfo.GetFullHtmlFieldId(string.Empty)",
    3.             fontsize_formats: "8pt 9pt 10pt 11pt 12pt 26pt 36pt",
    4.             height: 350,
    5.             width: 790,
    Thêm vào bên dưới 2 dòng, trong đó dòng đầu áp dụng cho firefox và IE, dòng 2 áp dụng cho trình duyệt webkit.
    PHP:
    1. paste_retain_style_properties: "all",
    2. paste_webkit_styles: "all",
    - Thêm plugin tô màu nền và màu chữ
    Vào Admin > Configuration > Settings > All Settings (Advanced)
    Thiết lập adminareasettings.richeditoradditionalsettings = settings.plugins.push('textcolor'); settings.toolbar += ' | forecolor backcolor';
    richeditor.png

    Xong, chúc các bạn thành công:D
     
    Sửa lần cuối: 5/10/17
    1
    KenMT thích bài này.
    KenMT thích bài này
    Đang tải...
Đã lưu nháp Draft deleted
Đang tải...