TinyMCE富文本更改默认文字颜色、字号、字体

一、content_style(直接为编辑区编写css)

在此选项内编写的css将直接注入到编辑器创建的iframe内部(在head内创建style),其创建的样式不会与内容一起被提交,可以放心使用。

tinymce.init({
    selector: '#textarea1',
    content_style: "div {font-size:24px; color: #843FA1; font-famliy: impact,chicago;}"
});

效果图如下:
TinyMCE富文本更改默认文字颜色、字号、字体_第1张图片
注意事项:此样式权重较高,会覆盖富文本编辑器初始化时的所有内容,即使给签名单独添加了行内样式也不生效。

二、content_css(为编辑区指定css文件)

如果你希望在经典模式中,编辑区也可以有与周围相同的样式,此选项可以帮你实现。
引入一个css文件,实现编辑区css自定义。
通常配合body_class&body_id使用。

tinymce.init({
    selector: '#textarea1',
    content_css : 'myLayout.css'
});

效果图及注意事项同上。

三、通过getBody()来更改默认样式

直接贴代码:

tinymce.init({
    selector: '#textarea1',
    content_style: "div {}",
    setup: function(editor) {
           editor.on('init', function(e) {
              this.getBody().style.fontSize = '24px';
              this.getBody().style.color = '#843FA1';
              this.getBody().style.fontFamily = 'impact,chicago;';
        });                       
    }
});

效果图如下:
TinyMCE富文本更改默认文字颜色、字号、字体_第2张图片
注意事项:用第二种方法可以保证签名的样式不受影响,根据实际开发需求,我选择了第二种方法。

但是这两种方法都有一个问题,就是文字颜色A下面的横杠颜色都无法变化,仍然是黑色,没有找到解决方案,希望大佬们多多指教!
TinyMCE富文本更改默认文字颜色、字号、字体_第3张图片
最后附上tinyMCE官方文档:http://tinymce.ax-z.cn/

你可能感兴趣的:(TinyMCE富文本更改默认文字颜色、字号、字体)