向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添加边界半径

回答

相关问题