Блог

Главная - Вопросы по программированию - Как применить шрифты oswald Google к редактору tinymce в виде списка в раскрывающемся списке семейства шрифтов?

Как применить шрифты oswald Google к редактору tinymce в виде списка в раскрывающемся списке семейства шрифтов?

#javascript #tinymce #google-fonts

#javascript #tinymce #google-шрифты

Вопрос:

 How to apply Oswald google fonts to TinyMCE editor as a list in the font-family dropdown in TinyMCE editor?
link of TinyMCE editor is this https://www.tiny.cloud/blog/tinymce-custom-font-family/
Also, you can find my code below, you can directly copy that code and run on your system.

<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.tiny.cloud/1/1p8sxvjggr9uwgjmg51zcebcj0a305xtr2ojec1a01ld7w2i/tinymce/5/tinymce.min.js"
        referrerpolicy="origin"></script>
    <script src="https://raw.githubusercontent.com/blowsie/Pure-JavaScript-HTML5-Parser/master/htmlparser.js"></script>
    <script src=" https://cdn.jsdelivr.net/npm/html2json-parser@0.0.1/index.min.js"></script>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700amp;display=swap"
        rel="stylesheet">
    <script>
    tinymce.init({
            selector: '.viktest',
            menubar: false,
            inline: true,
            plugins: 'code textcolor colorpicker emoticons lists',  // note the comma at the end of the line!
            toolbar: 'code fontsizeselect fontselect redo  bold italic  bullist numlist  forecolor backcolor emoticons ',
            powerpaste_word_import: 'clean',
            powerpaste_html_import: 'clean',
            placeholder: "Title goes here",
            fontsize_formats: "8pt 9pt 10pt 11pt 12pt 14pt 18pt 24pt 30pt 36pt 48pt 60pt 72pt 96pt",
            "content_style": "@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700amp;display=swap'); body { font-family: Oswald-ExtraLight;}",

            "font_formats": "Oswald ExtraLight=oswald-extraLight;Oswald Light=oswald-light;Arial Black=arial black,avant garde; Courier New=courier new,courier; Lato Black=lato; Roboto=roboto;",
        });
    </script>
</head>

<body>
    <div class="demo-inline">
        <div class="container">
            <br>
            <br>
            <div class="viktest"></div>
        </div>
       
    </div>
</body>

</html>

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

Освальд -Жирный Освальд-Светлый Освальд-Средний Освальд-Обычный Освальд-Полужирный

Ответ №1:

Вы на правильном пути для загрузки шрифта, но не в том, как вы применяете его к контенту. Я создал скрипку TinyMCE, которая показывает, как использовать это:

https://fiddle.tiny.cloud/C3haab/1

Ваш код пытается установить для основного шрифта «легкий» вариант Oswald с помощью этого:

 body { 
  font-family: Oswald-ExtraLight;
}

… но это не имя любого шрифта, который вы импортировали. Вы импортировали что-то с именем Oswald. В скрипке вы увидите, что если вы измените значение font-family на Oswald, это, по крайней мере, позволит вам использовать импортированный вами шрифт:

 body {  
  font-family: Oswald;
}

Тогда возникает второй вопрос: как использовать различные веса шрифта. Это обрабатывается с помощью CSS via font-weight . В скрипке, которую вы увидите, я style_formats предоставлял несколько разных классов, которые вы можете использовать для применения весов шрифтов к содержимому в TinyMCE (классы определены в content_style ):

 style_formats: [
    {title: 'Extra Light Text (class)', inline: 'span', classes: 'extralight'},
    {title: 'Light Text (class)', inline: 'span', classes: 'light'},
    {title: 'Medium Text (class)', inline: 'span', classes: 'medium'},
],

Скрипка показывает, что это выполняется с некоторым предварительно добавленным текстом, который показывает некоторые из различных весов шрифта в действии.

Комментарии:

1. Спасибо, но где вы нашли эту документацию?

Метки: