Get TinyRedactor - Nhận được TinyRedactor 1.0

[PVS]

Get TinyRedactor - Nhận được TinyRedactor 1.0

Đây là một hướng dẫn, sửa đổi template tuy nhiên bạn muốn gọi nó là styles Redactor để trông giống như XenForo phiên bản của TinyMCE 3.

1.) Tải về TinyMCE spritesheet
- Tải về spritesheet sửa đổi và di chuyển nó đến styles/yourstyle/xenforo/editor/mce3icons.png. Trong spritesheet này tôi đã thêm các biểu tượng XenForo.

2.) Thay đổi màu nền và border

- Vào Appearance → Style Properties → Rich Text Editor → Editor Toolbar
- Loại bỏ đường dẫn hình ảnh, lặp lại và vị trí các giá trị và chọn background color: #F0F0EE
- Thay đổi màu border phía dưới thành #CCCCCC
- Thay đổi giá trị padding-left thành 0
- Lưu lại.

- Vào Appearance → Style Properties → Rich Text Editor → Editor Container
- Thay đổi màu border phía dưới thành #CCCCCC
- Lưu lại.

- Vào Appearance → Style Properties → Rich Text Editor → Editor Toolbar Group
- Loại bỏ đường dẫn hình ảnh, lặp lại và vị trí giá trị và xóa giá trị của background color (làm cho nó transparent)
- Xóa tất cả các giá trị của border
- Loại bỏ giá trị box-shadow từ additonal CSS box
- Lưu lại.

- Vào Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Hover)
- Thay đổi background color thành #b2bbd0
- Thay đổi màu border thành #0a246a
- Xóa giá trị radius
- Lưu lại.

- Vào Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button (Active)
- Thay đổi background color thành #b2bbd0
- Thay đổi màu border thành #0a246a và xóa giá trị border Style, Width và Radius
- Lưu lại.

3.) Loại bỏ các hiệu ứng opacity

- Vào Appearance → Style Properties → Rich Text Editor → Settings
- Bỏ chọn mục "Allow the rich text editor to be faded out"
- Lưu lại.

4.) Thay thế nút Redactor bằng nút TinyMCE

- Vào Appearance → Style Properties → Rich Text Editor → Editor Toolbar Button
- Thay thế các đường dẫn hình ảnh của background với:

@imagePath/xenforo/editor/mce3icons.png

- Thay đổi Width và Height thành 22px
- Lưu lại.

Lưu ý: Spritesheet redactor mặc định sẽ không bao giờ được load. Thay vào đó là spritesheet TinyMCE sửa đổi sẽ được load.

- Vào templates EXTRA.css thêm đoạn code sau:

.redactor_box .redactor_toolbar li a.redactor_btn_removeformat
{
    background-position: -580px 0;
    margin-right: 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_bold
{
    background-position: 0 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_italic
{
    background-position: -60px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_underline
{
    background-position: -140px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_deleted
{
    background-position: -120px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontcolor
{
    background-position: -961px -19px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontsize
{
    background-position: -87px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_fontfamily
{
    background-position: -106px -39px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_createlink
{
    background-position: -500px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unlink
{
    background-position: -640px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_alignment
{
    background-position: -460px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_unorderedlist
{
    background-position: -20px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_orderedlist
{
    background-position: -80px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_outdent
{
    background-position: -540px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_indent
{
    background-position: -400px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_smilies
{
    background-position: -22px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_image
{
    background-position: -380px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_media
{
    background-position: -320px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_code
{
    background-position: -65px -40px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_quote
{
    background-position: -220px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_draft
{
    background-position: -480px -20px;
}
.redactor_box .redactor_toolbar li a.redactor_btn_undo
{
    background-position: -159px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_redo
{
    background-position: -100px 0;
}
.redactor_box .redactor_toolbar li a.redactor_btn_switchmode
{
    background-position: -42px -39px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group
{
    margin-top: 0px;
    margin-bottom: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(1)
{
    margin-right: 0px;
}
.redactor_box .redactor_toolbar li.redactor_btn_group:nth-child(2)
{
    margin-left: 0px;
    margin-right: 0px;
}
.redactor_smilies .secondaryContent
{
    background: #F0F0EE;
}

Lưu lại.

Chúc các bạn thành công.

Nguồn: xenforo.com​