将border-radius添加到TinyMCE文本区域

Question

是否可以为TinyMCE的文本区域添加border-radius？我在我的输入字段等地方使用了圆角，但无法在文本区域上使用它。可能是因为TinyMCE将其转换成了IFRAME？有没有什么解决方法？非常感谢！

- Joris Ooms

---

请提供一些代码以更好地理解。 - sandeep

他的意图非常清晰。他希望在TinyMCE创建的iframe周围有一个边框。好问题+1。 - Thariama

Answer 1

一个解决方案是使用editor_css setting。这个CSS在默认的tinymce CSS加载后被应用，因此覆盖了默认的CSS。

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

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

并使用 editor_css 设置 tinymce 参数

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

这将在编辑器周围创建一个漂亮的细黑线。

- Thariama

---

这似乎适用于1像素实心黑色边框，但是当我添加border-radius时它不起作用。更重要的是，它会搞乱我的TinyMCE按钮:( 不过还是谢谢！ - Joris Ooms

你能解释一下到底会出现什么问题吗？我相信只有 editor.css 中的 CSS 需要正确设置。 - Thariama

你用什么浏览器？IE能够处理边框半径，直到版本9。 - Thariama

Answer 2

为了给tinyMCE文本区域添加一个边框半径，您需要在文件“/themes/advanced/skins/default/ui.css”的底部添加以下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;
}

- Panos Spiliotis

Answer 3

另一种方法是在初始化时以编程方式向TinyMCE容器添加类：

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

CSS：

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

请参阅集成和设置 | TinyMCE文档

setup选项允许您指定在渲染TinyMCE编辑器实例之前执行的事件。

- naXa stands with Ukraine

---

它可以工作，只需要强制样式border: 1px solid black !important。 - Martin Staufcik