Question

是否可以为TinyMCE的textareas添加border-radius？在我的输入字段等上有圆角但有点让我感到害怕，但是我无法让它在我的textarea上工作。可能是因为TinyMCE将它变成了IFRAME？有没有办法解决？非常感谢！

Answer 1

一种解决方案是使用editor_css setting。在加载默认的tinymce css后应用此css，从而覆盖默认值。

我创建了一个名为editor.css的文件，其中包含以下内容

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

并使用editor_css

设置tinymce参数

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

这会在编辑器周围创建一条漂亮的黑色细线。

Answer 2

为了向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;
}

Answer 3

另一种方法是在init上以编程方式将类添加到TinyMCE容器：

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编辑器实例之前将执行的事件。

将border-radius添加到TinyMCE textarea

3 个答案: