Пользовательский шрифт в ckeditor

Question

Я пытаюсь добавить собственный шрифт, но не могу. Я получаю сообщение об ошибке с кодом ниже, имя шрифта добавляется в раскрывающемся списке, но оно не меняется ...

мой код

config.js:

CKEDITOR.editorConfig = function( config )
{
config.contentsCss = 'fonts.css';
config.font_names = 'Dekers/dekers_true' + config.font_names;
}

fonts.css:

@font-face {  
font-family: "dekers_true", serif;
src: url(fonts/Dekers_light.eot ); /* IE */  
src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}

Answer 1

Ваш пользовательский файл CSS должен содержать основные стили для тела CKEditor. CKEditor загружается в iframe только с этим файлом CSS.

@font-face {  
    font-family: "dekers_true"; /* font name for the feature use*/
    src: url(fonts/Dekers_light.eot ); /* IE */  
    src: local("Dekers"), url("fonts/Dekers_light.ttf") format("truetype"); /*non-IE*/  
}
body {
    font: normal 13px/1.2em dekers_true, serif;
    color: #333;
}
p {
    font: normal 13px/1.2em dekers_true, serif;
    margin-top: 0;
    margin-bottom: 0.5em
}
...

И затем добавьте объявление шрифта в CSS-файл вашего основного сайта.

Upd: Альтернативный вариант. Вы можете объявить свои собственные стили, например,

config.stylesSet = [
    { name : 'Pretty font face', element : 'span', attributes : { 'class' : 'pretty_face' } },
    ... 
];

Так будет применяться класс .pretty_face, и тогда вы сможете стилизовать его, как пожелаете. Если вы хотите немедленный предварительный просмотр в rte, вам нужно также стилизовать этот класс в файле contentsCSS.

Answer 2

ИЛИ в config.js

config.font_names = 'Arial/Arial, Helvetica, sans-serif;' +
    'Comic Sans MS/Comic Sans MS, cursive;' +
    'Courier New/Courier New, Courier, monospace;' +
    'Georgia/Georgia, serif;' +
    'Lucida Sans Unicode/Lucida Sans Unicode, Lucida Grande, sans-serif;' +
    'Tahoma/Tahoma, Geneva, sans-serif;' +
    'Times New Roman/Times New Roman, Times, serif;' +
    'Trebuchet MS/Trebuchet MS, Helvetica, sans-serif;' +
    'Verdana/Verdana, Geneva, sans-serif;' + 
    **'Dekers/dekers_true';**

А потом твой CSS. Выше помещает его в выпадающий список Стили, а не в Шрифты.

Answer 3

Если вы используете размещенные шрифты и имеете относительно простой вариант использования, вы можете просто добавить таблицы стилей непосредственно в config.contentCss:

config.contentsCss = [ '/css/mysitestyles.css', 'https://fonts.googleapis.com/css?family=Roboto' ]

Если первый файл определяет ваши стили (например, .title { font-family: 'Roboto', sans-serif;), а второй - это удаленная таблица стилей, содержащая определения шрифтов.

Пользовательские шрифты теперь должны появиться в раскрывающемся меню и редакторе, если вы определили выбираемые стили в config.styleSet:

config.styleSet = [ { 'name': 'Title', 'element': 'h1', 'attributes': { 'class': 'title' } ]

Я протестировал это с помощью плагина CKEditor Django, где синтаксис немного отличается от приведенного выше, но я не вижу причин, по которым он не будет переводиться.