将@ font-face添加到CKEditor

niv*_*ner 20 css3 font-face ckeditor

我想在CKEditor字体组合框中添加一个字体.这本身很容易.但是,我想添加的字体是我使用@ font-face CSS3属性的自定义字体.我设法做到了,但编辑器本身并没有显示自定义字体.如果我只是使用CKEditor创建的html并在页面上的div中显示它,那么自定义字体就会显示出来.我还想以某种方式将@ font-face属性添加到CKEditor的文本区域,以便我的用户可以在键入时看到自定义字体.

这可能吗?

niv*_*ner 38

将以下行添加到ckeditor/config.js

config.contentsCss = 'fonts.css';
//the next line add the new font to the combobox in CKEditor
config.font_names = 'fontnametodisplay/yourfontname;' + config.font_names;
Run Code Online (Sandbox Code Playgroud)

fonts.css具有@ font-face属性:

@font-face {  
    font-family: "yourfontname";  
    src: url( ../fonts/font.eot ); /* IE */  
    src: local("realfontname"), url("../fonts/font.TTF") format("truetype"); /*non-IE*/  
}
Run Code Online (Sandbox Code Playgroud)

  • 任何使用"框架编辑器"的人都要注意:content.css包含一些非常有用的编辑区默认样式,所以你可能更愿意保留它:`config.contentsCss = [CKEDITOR.getUrl('contents.css') ),'/ path/to/fonts.css'];` (7认同)