是否可以为TinyMCE的textareas添加边界半径?这有点让我害怕,我在我的输入字段上有圆角,但我无法在我的textarea上工作..可能是因为TinyMCE将它变成了IFRAME?有没有办法解决?非常感谢!向TinyMCE textarea添加边界半径
9
A
回答
1
一个解决方案是使用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的参数。
0
为了向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;
}
0
另一种方式是通过编程类添加到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编辑器实例呈现之前执行的事件。
+0
它的工作原理,只需要强制样式'border:1px solid black!important' – 2016-12-10 21:43:40
相关问题
- 1. 向地图添加边界半径
- 2. CSS边界半径方向
- 3. 反向边界半径
- 4. 边界半径CSS
- 5. ems边界半径?
- 6. ie9边界半径
- 7. CSS边界半径
- 8. IE8边界半径
- 9. 边界半径Nativescript
- 10. CSS边界半径
- 11. css中的“向外”边界半径?
- 12. 边界半径在IE9反向CSS
- 13. 边界半径曲线向内?
- 14. CSS边框RADIUS,这是使用正确的样式?边界半径? -webkit-边界半径? -moz-边界半径?
- 15. 边界半径不铬
- 16. 问题与边界半径
- 17. 边界半径不工作
- 18. Safari边界半径bug
- 19. 边界半径 - 当部署
- 20. 灵活的边界半径
- 21. 图像边界半径
- 22. HTML表colgroup边界半径
- 23. IE9边界半径CSS
- 24. 火狐边界半径41.0.2
- 25. 边界半径的Android 2.3.4
- 26. 边界半径问题CSS
- 27. CSS边界半径和-webkit-边界半径不工作在iOS 5的UIWebView
- 28. 如何添加设置的边界半径?
- 29. 将div添加到具有倒圆边框半径的右边界页面
- 30. 边界半径按钮没有在Android
请给一些代码以更好地理解 – sandeep 2011-05-05 10:47:54
他想要的是完全清楚的。他希望在tinymce创建的iframe周围有一个边框,很好的问题+1 – Thariama 2011-05-05 11:17:33