CMS DataLife Engine - Система управления сайтами

Авторизация  
Nektov

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

Рекомендуемые сообщения

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

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

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

 

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

Залить нужный шрифт в папку, допустим, 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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 минут назад, Nektov сказал:

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

 

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

 

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

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

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

 

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

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

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

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
11 минут назад, alex32 сказал:

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

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
2 минуты назад, Nektov сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, alex32 сказал:

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

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

Использую 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")
      и т.д.;
	}

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

 

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
6 минут назад, Nektov сказал:

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

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

WXGYrqVE.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 минуту назад, Captain сказал:

WXGYrqVE.png

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

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
24 минуты назад, Nektov сказал:

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

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

 

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

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

нет смысла

 

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

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

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

  • Спасибо 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Вопрос к разработчикам  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

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

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

Изменено пользователем Nektov

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Частично с интеграцией в 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

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, Nektov сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
26 минут назад, germanydletest сказал:

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

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

+

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

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 в папке основного шаблона.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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 { ... }?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
20 часов назад, Nektov сказал:

"Irmologion":"Irmologion-ieUcs"

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

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

"Irmologion-ieUcs":"Irmologion"

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
59 минут назад, celsoft сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

И так, через

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 может я ошибаюсь?

 

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
15 часов назад, celsoft сказал:

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

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

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

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

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

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

Честно - :o

 

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
10 часов назад, Nektov сказал:

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

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

 

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

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, celsoft сказал:

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

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

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти
Авторизация