向TinyMCE textarea添加邊界半徑

是否可以爲TinyMCE的textareas添加邊界半徑？這有點讓我害怕，我在我的輸入字段上有圓角，但我無法在我的textarea上工作..可能是因爲TinyMCE將它變成了IFRAME？有沒有辦法解決？非常感謝！向TinyMCE textarea添加邊界半徑

來源

2011-05-05 cabaret

請給一些代碼以更好地理解 – sandeep 2011-05-05 10:47:54

他想要的是完全清楚的。他希望在tinymce創建的iframe周圍有一個邊框，很好的問題+1 – Thariama 2011-05-05 11:17:33

一個解決方案是使用editor_css setting。這個css在加載默認的tinymce css之後被應用，從而覆蓋默認的。

我創建了一個名爲editor.css包含以下

.defaultSkin table.mceLayout {border:1px solid black}

文件，並使用editor_css

editor_css : 'path_to_css'.'/editor.css',

這將創建編輯器周圍的漂亮的細黑線設置TinyMCE的參數。

來源

2011-05-05 11:45:50 Thariama

這似乎適用於1px純黑色邊框，但它在添加邊框半徑時不起任何作用。更重要的是，它弄亂了我的TinyMCE按鈕:(雖然感謝！ – cabaret 2011-05-05 14:28:16

你能解釋一下，究竟是什麼被搞砸了嗎？我確信只有editor.css中的css需要被正確設置 – Thariama 2011-05-05 14:45:23

你使用什麼瀏覽器？ IE能夠處理邊界半徑，直到版本9 – Thariama 2011-05-05 14:57:06

爲了向tinyMCE文本區域添加邊框半徑，您必須在文件底部添加以下css規則：/themes/advanced/skins/default/ui.css。注意：如果您使用的是自定義皮膚，則必須在爲該皮膚創建的css文件中添加這些規則。

#article_tbl, #article_ifr{ 
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 12px; /* FF1-3.6 */ 
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  
} 

$article_tbl{ 
    border: 1px solid silver; 
} 

#article_ifr{ 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 12px; 
    -webkit-border-bottom-left-radius: 12px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 12px; 
    -moz-border-radius-bottomleft: 12px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 12px; 
    border-bottom-left-radius: 12px;  
} 

#article_tbl{ 
    -webkit-border-radius: 12px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */ 
    -moz-border-radius: 12px; /* FF1-3.6 */ 
    border-radius: 12px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */  
} 

.mceToolbar{   
    -webkit-border-top-left-radius: 12px; 
    -webkit-border-top-right-radius: 12px; 
    -webkit-border-bottom-right-radius: 0px; 
    -webkit-border-bottom-left-radius: 0px; 
    -moz-border-radius-topleft: 12px; 
    -moz-border-radius-topright: 12px; 
    -moz-border-radius-bottomright: 0px; 
    -moz-border-radius-bottomleft: 0px; 
    border-top-left-radius: 12px; 
    border-top-right-radius: 12px; 
    border-bottom-right-radius: 0px; 
    border-bottom-left-radius: 0px; 
} 

.defaultSkin table.mceLayout tr.mceLast td { 
    border-bottom: 1px solid silver; 
    -webkit-border-top-left-radius: 0px; 
    -webkit-border-top-right-radius: 0px; 
    -webkit-border-bottom-right-radius: 12px; 
    -webkit-border-bottom-left-radius: 12px; 
    -moz-border-radius-topleft: 0px; 
    -moz-border-radius-topright: 0px; 
    -moz-border-radius-bottomright: 12px; 
    -moz-border-radius-bottomleft: 12px; 
    border-top-left-radius: 0px; 
    border-top-right-radius: 0px; 
    border-bottom-right-radius: 12px; 
    border-bottom-left-radius: 12px; 
}

來源

2012-03-16 22:42:57

另一種方式是通過編程類添加到TinyMCE的容器上的init：

textarea.tinymce({ 
    setup: function(editor) { 
     editor.on('init', function() { 
      editor.getContainer().className += ' with-border'; 
     }); 
    } 
});

CSS：

.with-border { 
    border: 1px solid black; 
}

見Integration and Setup | TinyMCE文檔

setup選項允許您指定一個將在TinyMCE編輯器實例呈現之前執行的事件。

來源

2016-01-19 11:43:10 naXa

它的工作原理，只需要強制樣式'border：1px solid black！important' – 2016-12-10 21:43:40

向TinyMCE textarea添加邊界半徑

回答

相關問題