Как добавить еще один шрифт?

[Nektov 59]

Доброго времени суток

Возникла необходимость добавить еще один шрифт, не заменить существующий, а именно добавить еще...

Как добавить в шаблон, для вывода на сайте кажется разобрался, а вот как добавить в редактор новостей - негде не написано.

 

И так, первая часть темы (интеграция шрифта в шаблон), если я правильно "курил", решается так:

Залить нужный шрифт в папку, допустим, fonts

Затем в файл стилей добавляем следующее

 

@font-face {
 font-family: CyrillicOld;
 src: url(fonts/CyrillicOld.ttf);
 font-weight: normal;
 }

Или правильнее будет так

@font-face {
    font-family: CyrillicOld;
    src: url(fonts/CyrillicOld.eot);
    src: url(fonts/CyrillicOld.eot?#iefix) format('embedded-opentype'),
    src: url(fonts/CyrillicOld.woff) format('woff'),
    src: url(fonts/CyrillicOld.ttf) format('truetype'),
    src: url(fonts/CyrillicOld.svg#bankgothicregular) format('svg');
    font-weight: normal;
    font-style: normal;
 
}

То есть достаточно ли файла .ttf или нужны .eot, .woff, .svg и соответственно .ttf ?

 

Или лучше конвертировать шрифт (файл шрифта) в Base64 и вписывать сразу в шаблон по типу 

<style>@font-face {
	font-family: "CyrillicOld";
	src: url(data:font/truetype;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_КОДОМ_BASE64) format("truetype"),
	     url(data:font/woff;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_КОДОМ_BASE64) format("woff"),
	     url("myfont-webfont.svg#svgFontName") format("svg")
      и т.д.;
	}

И самый банальный вопрос, в случаи редактирования файла стилей, нужно ли отдельно вызывать шрифт в шаблоне или достаточно изменений в файле существующего стиля (styles.css)?

 

И вторая часть темы

Как добавить шрифт для того чтобы работал при добавлении новостей через админпанель, то есть чтобы шрифт воспринимался и отображался встроенным редактором?

 

Да, адрес сайта ThePrayerBook.info

 

За помощь заранее большое спасибо 

[alex32 942]

12 минут назад, Nektov сказал:

То есть достаточно ли файла .ttf или нужны .eot, .woff, .svg и соответственно .ttf ?

 

Желательно. Иначе не все браузеры схавают и отобразят как надо.  Как минимум стоит подключить ttf и woff/

 

15 минут назад, Nektov сказал:

И самый банальный вопрос, в случаи редактирования файла стилей, нужно ли отдельно вызывать шрифт в шаблоне или достаточно изменений в файле существующего стиля (styles.css)?

Достаточно в самом начале style.css подключить c помощью @font-face

 

15 минут назад, Nektov сказал:

Как добавить шрифт для того чтобы работал при добавлении новостей через админпанель, то есть чтобы шрифт воспринимался и отображался встроенным редактором?

Если скрипт более менне свежей версии, то в папку с шаблоном можно положить файл adminpanel.css, подключить там шрифт и указать стили для текстового поля редактора. Но я так понимаю, этого мало, я полагаю, тебе надо сделать этот шрифт в выпадающем списке, что бы он отображался, как остальные шрифты?

[Nektov 59]

11 минут назад, alex32 сказал:

Если скрипт более менне свежей версии, то в папку с шаблоном можно положить файл adminpanel.css, подключить там шрифт и указать стили для текстового поля редактора.

DataLife Engine актуальной версии

12 минут назад, alex32 сказал:

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

В каком выпадающем списке?

[alex32 942]

2 минуты назад, Nektov сказал:

В каком выпадающем списке?

Ну в визуальном редакторе есть выпадающий список с выбором шрифта. 

[Nektov 59]

5 минут назад, alex32 сказал:

Ну в визуальном редакторе есть выпадающий список с выбором шрифта. 

У меня такого нет 

Использую FroalaEditor (WYSIWYG)

 

А как быть с 

41 минуту назад, Nektov сказал:

Или лучше конвертировать шрифт (файл шрифта) в Base64 и вписывать сразу в шаблон по типу 

<style>@font-face {
	font-family: "CyrillicOld";
	src: url(data:font/truetype;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_КОДОМ_BASE64) format("truetype"),
	     url(data:font/woff;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_КОДОМ_BASE64) format("woff"),
	     url("myfont-webfont.svg#svgFontName") format("svg")
      и т.д.;
	}

Есть смысл, или лучше не париться?

 

Еще один вопрос.

Можно как то прописать вывод дополнительных стилей только для определенного раздела? Для ускорения загрузки сайта. То есть, если новость относится к определенному разделу - дополнительные шрифты подключаются, если нет - не подключаются?

[Captain 623]

6 минут назад, Nektov сказал:

У меня такого нет 

Использую FroalaEditor (WYSIWYG)

[Nektov 59]

1 минуту назад, Captain сказал:

О точно, недоглядел

 

На сколько я понял, редактор вставляет то, что дают. То есть сам не проверяет и не меняет шрифт. Меню нужно если есть необходимость сменить один шрифт на другой?

[alex32 942]

24 минуты назад, Nektov сказал:

Меню нужно если есть необходимость сменить один шрифт на другой?

Да, например выделить абзац другим шрифтов, или заголовок. Просто я как-то с трудом могу себе представить целый текст, написанный КириликОлд  

 

35 минут назад, Nektov сказал:

Есть смысл, или лучше не париться?

нет смысла

 

35 минут назад, Nektov сказал:

Можно как то прописать вывод дополнительных стилей только для определенного раздела? Для ускорения загрузки сайта. То есть, если новость относится к определенному разделу - дополнительные шрифты подключаются, если нет - не подключаются?

Ну подключи их в отдельный css-файл и выводи на сайте внутри тегов [category=X]тут подключение файла css[/category]. Хотя это экономия на спичках

[Nektov 59]

Инструкция по добавлению шрифтов в FroalaEditor (WYSIWYG) предоставлено разработчиками указанного редактора.

Кому интересно инструкция

[Nektov 59]

Вопрос к разработчикам  DataLife Engine, celsoft

На сколько я понял FroalaEditor (WYSIWYG)  в DLE встроен обрезанный и модернизированный?

То есть совет со страницы разработчика FroalaEditor (WYSIWYG) о возможности интеграции дополнительных шрифтов к версии интегрированной в DLE не подходит?

Посему просьба к разработчикам DLE включится в тему и подсказать как интегрировать дополнительный шрифт в FroalaEditor (WYSIWYG)  используемый в DLE

 

Да, опять таки вопрос в разработчикам DLE можно ли ка кто получить файлики

editor.css, который в engine/editor/jscripts/froala/css

и editor.js, который в engine/editor/jscripts/froala

в читабельном виде?

А то как то с однострочной вставкой работать не совсем удобно

Изменено 15 июля 2018 пользователем Nektov

[Nektov 59]

Частично с интеграцией в FroalaEditor (WYSIWYG)  разобрался

И так,

Для начала нужно добавить нужный шрифт в папку engine/editor/jscripts/froala/fonts (какие расширения шрифтов нужны можно посмотреть там же)

Потом открываем engine/editor/jscripts/froala/editor.js, там ищем код

*!
 * font_family Plugin
 */

!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(e,t){return t===undefined&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t)}:n(window.jQuery)}(function(l){l.extend(l.FE.DEFAULTS,{fontFamily:{"Arial,Helvetica,sans-serif":"Arial","Georgia,serif":"Georgia","Impact,Charcoal,sans-serif":"Impact","Tahoma,Geneva,sans-serif":"Tahoma","Times New Roman,Times,serif,-webkit-standard":"Times New Roman","Verdana,Geneva,sans-serif":"Verdana"},fontFamilySelection:!1,fontFamilyDefaultSelection:"Font Family"}),l.FE.PLUGINS.fontFamily=function(o){function i(e){var t=e.replace(/(sans-serif|serif|monospace|cursive|fantasy)/gi,"").replace(/"|'| /g,"").split(",");return l.grep(t,function(e){return 0<e.length})}function r(e,t){for(var n=0;n<e.length;n++)for(var a=0;a<t.length;a++)if(e[n].toLowerCase()==t[a].toLowerCase())return[n,a];return null}function f(){var e=i(l(o.selection.element()).css("font-family")),t=[];for(var n in o.opts.fontFamily)if(o.opts.fontFamily.hasOwnProperty(n)){var a=r(e,i(n));a&&t.push([n,a])}return 0===t.length?null:(t.sort(function(e,t){var n=e[1][0]-t[1][0];return 0===n?e[1][1]-t[1][1]:n}),t[0][0])}return{apply:function(e){o.format.applyStyle("font-family",e)},refreshOnShow:function(e,t){t.find(".fr-command.fr-active").removeClass("fr-active").attr("aria-selected",!1),t.find('.fr-command[data-param1="'+f()+'"]').addClass("fr-active").attr("aria-selected",!0);var n=t.find(".fr-dropdown-list"),a=t.find(".fr-active").parent();a.length?n.parent().scrollTop(a.offset().top-n.offset().top-(n.parent().outerHeight()/2-a.outerHeight()/2)):n.parent().scrollTop(0)},refresh:function(e){if(o.opts.fontFamilySelection){var t=l(o.selection.element()).css("font-family").replace(/(sans-serif|serif|monospace|cursive|fantasy)/gi,"").replace(/"|'|/g,"").split(",");e.find("> span").text(o.opts.fontFamily[f()]||t[0]||o.language.translate(o.opts.fontFamilyDefaultSelection))}}}},l.FE.RegisterCommand("fontFamily",{type:"dropdown",displaySelection:function(e){return e.opts.fontFamilySelection},defaultSelection:function(e){return e.opts.fontFamilyDefaultSelection},displaySelectionWidth:120,html:function(){var e='<ul class="fr-dropdown-list" role="presentation">',t=this.opts.fontFamily;for(var n in t)t.hasOwnProperty(n)&&(e+='<li role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="fontFamily" data-param1="'+n+'" style="font-family: '+n+'" title="'+t[n]+'">'+t[n]+"</a></li>");return e+="</ul>"},title:"Font Family",callback:function(e,t){this.fontFamily.apply(t)},refresh:function(e){this.fontFamily.refresh(e)},refreshOnShow:function(e,t){this.fontFamily.refreshOnShow(e,t)},plugin:"fontFamily"}),l.FE.DefineIcon("fontFamily",{NAME:"font"})});

Нам интересно

fontFamily:{"Arial,Helvetica,sans-serif":"Arial","Georgia,serif":"Georgia","Impact,Charcoal,sans-serif":"Impact","Tahoma,Geneva,sans-serif":"Tahoma","Times New Roman,Times,serif,-webkit-standard":"Times New Roman","Verdana,Geneva,sans-serif":"Verdana"}

Это и есть вывод выбора шрифтов в редакторе

добавляем  (не забывая о ",")

"Irmologion":"Irmologion-ieUcs"

Соответственно

Irmologion - выводимое название шрифта, для выбора в редакторе

Irmologion-ieUcs - название файлов со шрифтом

 

А вот куда крутить @font-face { ... } я так и не нашел. CSS редактора (editor.css) собран из нескольких "заводских" и походу ничего подобного не содержит

Опять таки, был бы совсем не против помощи от разработчиков DLE

 

[germanydletest 455]

1 час назад, Nektov сказал:

А вот куда крутить @font-face { ... } я так и не нашел.

В любой из подключенных CSS файлов

[Nektov 59]

26 минут назад, germanydletest сказал:

В любой из подключенных CSS файлов

По секрету, в движке не один и не два подключаемых CSS файла

+

1 час назад, Nektov сказал:

CSS редактора (editor.css) собран из нескольких "заводских" и походу ничего подобного не содержит

И подтягивает ли редактор все имеющиеся в движке CSS - большой вопрос...

Конечно можно натыкать везде куда только руки долезут, но зачем?

[celsoft 6 076]

15 часов назад, Nektov сказал:

То есть совет со страницы разработчика FroalaEditor (WYSIWYG) о возможности интеграции дополнительных шрифтов к версии интегрированной в DLE не подходит?

Все подходит

 

14 часов назад, Nektov сказал:

Частично с интеграцией в FroalaEditor (WYSIWYG)  разобрался

И так,

Для начала нужно добавить нужный шрифт в папку engine/editor/jscripts/froala/fonts (какие расширения шрифтов нужны можно посмотреть там же)

Потом открываем engine/editor/jscripts/froala/editor.js, там ищем код

Неправильные советы даете, если вы неверно меняли настройки редактора и не работало, это не значит что нужно править код непосредственно редактора.

12 часов назад, Nektov сказал:

По секрету, в движке не один и не два подключаемых CSS файла

В CSS вашего шаблона. А для админпанели в создается adminpanel.css в папке основного шаблона.

[Nektov 59]

4 часа назад, celsoft сказал:

неверно меняли настройки редактора

Извините, о каких настройках идет речь?

4 часа назад, celsoft сказал:

не значит что нужно править код непосредственно редактора

<!-- Include the plugin file. -->
<script src="../js/plugins/font_family.min.js"></script>
  
<script>
  $(function() {
    $('div#froala-editor').froalaEditor({
      fontFamily: {
        "Roboto,sans-serif": 'Roboto',
        "Oswald,sans-serif": 'Oswald',
        "Montserrat,sans-serif": 'Montserrat',
        "'Open Sans Condensed',sans-serif": 'Open Sans Condensed'
      },
      fontFamilySelection: true
    })
  });
</script>

Инструкция с сайта разработчика FroalaEditor (WYSIWYG)

 

4 часа назад, celsoft сказал:

создается adminpanel.css в папке основного шаблона

То есть нужно создать новый файл adminpanel.css в папке шаблона сайта (не в engine/skins) и туда добавить @font-face { ... }?

[Nektov 59]

20 часов назад, Nektov сказал:

"Irmologion":"Irmologion-ieUcs"

Уточнение, нужно наоборот писать

Вначале Irmologion-ieUcs - название файлов со шрифтом, потом Irmologion - выводимое название шрифта, для выбора в редакторе, то есть

"Irmologion-ieUcs":"Irmologion"

 

[celsoft 6 076]

2 часа назад, Nektov сказал:

Извините, о каких настройках идет речь?

О тех что указано в описании редактора https://www.froala.com/wysiwyg-editor/examples/font-family вместо того чтобы менять настройки редактора, которые находятся в PHP файлах в папке /engine/editor/, вы направились править исходники JS.

 

2 часа назад, Nektov сказал:

То есть нужно создать новый файл adminpanel.css в папке шаблона сайта

Да. Прочитайте о возможностях изменения стилей админпанели https://dle-news.ru/release/1657-datalife-engine-v106-final-release.html пункт номер 31.

[Nektov 59]

59 минут назад, celsoft сказал:

которые находятся в PHP файлах в папке /engine/editor/

А можно подсказать детальнее что и где править?

[Nektov 59]

И так, через

4 часа назад, celsoft сказал:

PHP файлах в папке /engine/editor/

можно переставить местами/удалить кнопки визуального редактора. Вывод шрифтов, в плане добавления или удаления шрифта при выборе в визуальном редакторе FroalaEditor через правку PHP файлов в папке /engine/editor/ не предусмотрен.

 

По информации с сайта разработчика FroalaEditor (WYSIWYG) добавить в меню стилей свой стиль можно при условии установки скрипта  inline_style, который я так понимаю разработчики DLE просто не добавили в состав редактора FroalaEditor (https://www.froala.com/wysiwyg-editor/examples/inline-styles)

А не добавили поскольку нужно было бы править существующие файлы отвечающие за вывод кнопок в панели редактора. В облом так сказать...

celsoft может я ошибаюсь?

 

 

 

[celsoft 6 076]

11 часов назад, Nektov сказал:

можно переставить местами/удалить кнопки визуального редактора. Вывод шрифтов, в плане добавления или удаления шрифта при выборе в визуальном редакторе FroalaEditor через правку PHP файлов в папке /engine/editor/ не предусмотрен.

Отсутствие настройки по шрифтам, означает использование значений по умолчанию, а не не то что не предусмотрено менять. Настройку нужно добавлять, а не искать чтобы менять. А вы начали менять значения по умолчанию в самом коде редактора. В этом ваша ошибка.

 

11 часов назад, Nektov сказал:

По информации с сайта разработчика FroalaEditor (WYSIWYG) добавить в меню стилей свой стиль можно при условии установки скрипта  inline_style, который я так понимаю разработчики DLE просто не добавили в состав редактора FroalaEditor (https://www.froala.com/wysiwyg-editor/examples/inline-styles)

А не добавили поскольку нужно было бы править существующие файлы отвечающие за вывод кнопок в панели редактора. В облом так сказать...

celsoft может я ошибаюсь?

Ошибаетесь в корне. Это совершенно другой плагин, и для другого. И если бы нужного вам не было бы в редакторе что в DLE, вы бы это не нашли в engine/editor/jscripts/froala/editor.js

[Nektov 59]

15 часов назад, celsoft сказал:

Настройку нужно добавлять

Так может разработчики помогут, а потом добавят эту возможность в новую версию DLE?

Большой + для новой версии, а также + в пользу разработчиков.

Только не пишите что это вопросы платного support-а

16 часов назад, celsoft сказал:

И если бы нужного вам не было бы в редакторе что в DLE, вы бы это не нашли в engine/editor/jscripts/froala/editor.js

Честно - 

 

P&s. А где ваша подпись "Мыши плакали, кололись, но продолжали грызть кактус" хозяева DLE изменились?

[celsoft 6 076]

10 часов назад, Nektov сказал:

Так может разработчики помогут, а потом добавят эту возможность в новую версию DLE?

Какую возможность? Возможность ставить свои настройки в редактор у вас уже есть, и не требует никакой поддержки со стороны DLE. Я вам выше указал в какие файлы вносить свои настройки.

 

10 часов назад, Nektov сказал:

P&s. А где ваша подпись "Мыши плакали, кололись, но продолжали грызть кактус" хозяева DLE изменились?

Жизнь изменилась. Мышки больше не плачут и не колются 

[alex32 942]

1 час назад, celsoft сказал:

Жизнь изменилась. Мышки больше не плачут и не колются 

но продолжают есть кактус...