Styling các WYSIWYG / TinyMCE Editor

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 28/02/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    11,779
    Đã được thích:
    7,039
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    Vnxf.vn - Rất nhiều người đã nhận xét về sự xuất hiện của WYSIWYG / Tiny MCE Editor.

    Đây là một chỉnh sửa rất đơn giản mà lại tốt hơn so với kiểu mẫu mặc định, phù hợp với các thiết lập phạm vi giới hạn của các yếu tố khác.
    Ngay cả các mục trình đơn phạm vi.

    Đơn giản chỉ cần thêm điều này vào EXTRA.css:

    Mã:
    /* Áp dụng rounded corners để soạn thảo */
    
    .xenForoSkin table.mceLayout {
    border-radius: 4px;
    }
    
    .xenForoSkin table, .xenForoSkin tbody, .xenForoSkin a, .xenForoSkin img, .xenForoSkin tr, .xenForoSkin div, .xenForoSkin td, .xenForoSkin iframe, .xenForoSkin span, .xenForoSkin *, .xenForoSkin .mceText {
    border-radius: 4px;
    }
    Kết quả là:

    editor.png
    Dưới đây là một vài điều chỉnh để thay đổi màu nền menu:

    Mã:
    /* Thay đổi văn bản màu nền menu editor */
    
    .xenForoSkin table {
    background: @primaryLightest !important;
    }
    Và các nút:

    Mã:
    /* Nút thay đổi màu sắc soạn thảo văn bản*/
    
    .xenForoSkin .mceButton {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin .mceSplitButton a.mceAction {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin .mceSplitButton a.mceOpen {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin a.mceButtonEnabled:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin a.mceButtonActive, .xenForoSkin a.mceButtonSelected {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceOpen, .xenForoSkin .mceSplitButtonHover a.mceOpen, .xenForoSkin .mceSplitButtonSelected a.mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceAction, .xenForoSkin .mceSplitButtonHover a.mceAction, .xenForoSkin .mceSplitButtonSelected a.mceAction {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin .mceMenu .mceMenuItemEnabled a:hover, .xenForoSkin .mceMenu .mceMenuItemActive {
    background-color: @primaryLighter !important;
    }
    Và kết quả:

    editor-colours.png
    Các mã sau đây hy vọng bao gồm tất cả các khía cạnh của các Editor.

    Mã:
    /* WYSIWYG Editor phạm vi soạn thảo */
    
    .xenForoSkin table.mceLayout {
    border-radius: 4px;
    }
    
    .xenForoSkin table, .xenForoSkin tbody, .xenForoSkin a, .xenForoSkin img, .xenForoSkin tr, .xenForoSkin div, .xenForoSkin td, .xenForoSkin iframe, .xenForoSkin span, .xenForoSkin *, .xenForoSkin .mceText {
    border-radius: 4px;
    }
    Mã:
    /* WYSIWYG Editor soạn thảo */
    
    .xenForoSkin table.mceLayout {
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin table.mceLayout tr.mceFirst td {
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin table.mceLayout tr.mceLast td {
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin .mceIframeContainer {
    border-color: @primaryLighter !important;
    }
    Mã:
    /* WYSIWYG Editor menu soạn thảo */
    
    .xenForoSkin table {
    background: @primaryLightest !important;
    }
    Mã:
    /* WYSIWYG editor pop up */
    
    .editorInlinePopup .popupContent {
    border-color: @primaryLight !important;
    }
    Mã:
    /* WYSIWYG Editor font chữ soạn thảo kéo xuống*/
    
    .xenForoSkin .mceMenu {
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin .mceMenuItemTitle a {
    background: none repeat scroll 0 0 @primaryLighterStill !important;
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin .mceListBox .mceOpen {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin .mceListBox .mceText {
    border: 1px solid @primaryLighter !important;
    }
    
    .xenForoSkin table.mceListBoxEnabled:hover .mceOpen, .xenForoSkin .mceListBoxHover .mceOpen, .xenForoSkin .mceListBoxSelected .mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin table.mceListBoxEnabled:hover .mceText, .xenForoSkin .mceListBoxHover .mceText, .xenForoSkin .mceListBoxSelected .mceText {
    background-color: @inlineMod !important;
    border-color: @primaryLight !important;
    }
    Mã:
    /* WYSIWYG Editor bảng màu soạn thảo kéo xuống */
    
    .xenForoSkin div.mceColorSplitMenu table {
    border-color: @primaryLighter !important;
    }
    
    .xenForoSkin a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin .mceMenu .mceMenuItemEnabled a:hover, .xenForoSkin .mceMenu .mceMenuItemActive {
    background-color: @primaryLighter !important;
    }
    Mã:
    /* WYSIWYG Editor bảng màu hiện ra */
    
    #colorpicker .pickerTabs li a:link, #colorpicker .pickerTabs li a:visited  {
    color: @textCtrlBackground;
    }
    Mã:
    /* WYSIWYG Editor cửa sổ smile */
    
    .xenForoSkin .mceSmiliesMenu div {
    background: none repeat scroll 0 0 @textCtrlBackground !important;
    border-color: @primaryLighter !important;
    width: 398px !important;
    }
    Mã:
    /* WYSIWYG Editor buttons split */
    
    .xenForoSkin .mceSplitButton a.mceAction {
    border: 1px solid @primaryLightest !important;
    }
    
    .xenForoSkin .mceSplitButton a.mceOpen {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceOpen, .xenForoSkin .mceSplitButtonHover a.mceOpen, .xenForoSkin .mceSplitButtonSelected a.mceOpen {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin table.mceSplitButtonEnabled:hover a.mceAction, .xenForoSkin .mceSplitButtonHover a.mceAction, .xenForoSkin .mceSplitButtonSelected a.mceAction {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin .mceColorSplitMenu a.mceMoreColors:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    Mã:
    /* WYSIWYG Editor buttons */
    
    .xenForoSkin .mceButton {
    border-color: @primaryLightest !important;
    }
    
    .xenForoSkin a.mceButtonEnabled:hover {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    
    .xenForoSkin a.mceButtonActive, .xenForoSkin a.mceButtonSelected {
    background-color: @primaryLighter !important;
    border-color: @primaryLight !important;
    }
    Và đó là tất cả mọi thứ liên quan.
     
    Last edited by a moderator: 01/03/2015
    nghienvt, MacKen and THB like this.
  2. sdfsdfosdmk

    sdfsdfosdmk Thượng Đế

    Tham gia:
    28/08/2015
    Bài viết:
    33
    Đã được thích:
    7
    Điểm thành tích:
    8
    Giới tính:
    Nữ
    danh dau
     
  3. hoangvy958

    hoangvy958 Thượng Đế

    Tham gia:
    04/11/2017
    Bài viết:
    37
    Đã được thích:
    12
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    HCM
    Web:
    cho mình hỏi skin trong hình làm sao dc vậy
     

Chia sẻ trang này