Styling các WYSIWYG / TinyMCE Editor

[PVS]

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:

/* Á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à:

​

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

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

Và các nút:

/* 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ả:

​

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.

/* 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;
}

/* 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;
}

/* WYSIWYG Editor menu soạn thảo */
 
.xenForoSkin table {
background: @primaryLightest !important;
}

/* WYSIWYG editor pop up */
 
.editorInlinePopup .popupContent {
border-color: @primaryLight !important;
}

/* 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;
}

/* 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;
}

/* WYSIWYG Editor bảng màu hiện ra */
 
#colorpicker .pickerTabs li a:link, #colorpicker .pickerTabs li a:visited  {
color: @textCtrlBackground;
}

/* WYSIWYG Editor cửa sổ smile */
 
.xenForoSkin .mceSmiliesMenu div {
background: none repeat scroll 0 0 @textCtrlBackground !important;
border-color: @primaryLighter !important;
width: 398px !important;
}

/* 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;
}

/* 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.

 

[sdfsdfosdmk]

danh dau

 

[hoangvy958]

cho mình hỏi skin trong hình làm sao dc vậy