如何自定义wysihtml5编辑器的背景颜色,字体等?

时间:2013-12-11 17:57:21

标签: jquery twitter-bootstrap wysihtml5 bootstrap-wysihtml5

我在网站上使用bootstrap-wysihtml5,需要自定义编辑器以匹配我网站的外观。例如,bootstrap-wysihtml5编辑器有一个黑色文本的白色背景,但我需要将其更改为,例如,带有白色文本的红色背景。我也想使用不同的字体。

如果我使用Fiddler检查bootstrap-wysihtml5创建的<iframe>,我发现<body>中的<iframe>元素具有以下style定义:

background-color: rgb(255, 255, 255); 
color: rgb(44, 62, 80); 
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif; 
font-size: 15px; 
...

此处使用的font-family设置已在我的bootstrap.css文件中定义,因此我认为style中的<iframe>定义来自哪里,但我不知道看看我如何根据不同的东西来定制这些东西。

我尝试在bootstrap-wysihtml5 <iframe>事件中通过jQuery修改<body> load样式,这样可行,但是一旦我点击编辑器就会自定义样式被默认样式覆盖。

如何在此编辑器中实现自己的自定义样式?

由于

1 个答案:

答案 0 :(得分:2)

您可以在创建wysihtml5区域时通过设置选项将自己的样式表添加到iframe:

$('#textarea-id').wysihtml5({
    stylesheets: ['/url/of/stylesheet/to/put/in/iframe']
});