web-dev-qa-db-ja.com

TinyMCE 4 theme_advanced_fonts


TinyMCE Editorバージョン4.0b1にカスタムフォントファミリーを追加しようとしていますが、失敗し続けます。
すべてのデフォルトフォントが表示され、「CenturyGothic」や「GillSansMT」などのカスタムフォントは表示されません。 theme_advanced_fontsはTinyMCE4で機能しませんか？これに関するTinyMCE4のドキュメントが見つかりません。

tinymce.init({
  selector: "textarea",
  plugins: [
      "advlist autolink lists link image charmap print preview anchor",
      "searchreplace visualblocks code fullscreen",
      "insertdatetime media table contextmenu paste"
  ],
  toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | link image | fontselect fontsizeselect | forecolor backcolor",
  convert_urls: false,
  content_css: 'http://www.mydomain.com/css/fonts.css',
  theme_advanced_font_sizes : "8px,10px,12px,14px,16px,18px,20px,24px,32px,36px",
  theme_advanced_fonts : "Andale Mono=andale mono,times;"+
                         "Arial=arial,helvetica,sans-serif;"+
                         "Arial Black=arial black,avant garde;"+
                         "Book Antiqua=book antiqua,palatino;"+
                         "Comic Sans MS=comic sans ms,sans-serif;"+
                         "Courier New=courier new,courier;"+
                         "Century Gothic=century_gothic;"+
                         "Georgia=georgia,palatino;"+
                         "Gill Sans MT=gill_sans_mt;"+
                         "Gill Sans MT Bold=gill_sans_mt_bold;"+
                         "Gill Sans MT BoldItalic=gill_sans_mt_bold_italic;"+
                         "Gill Sans MT Italic=gill_sans_mt_italic;"+
                         "Helvetica=helvetica;"+
                         "Impact=impact,chicago;"+
                         "Iskola Pota=iskoola_pota;"+
                         "Iskola Pota Bold=iskoola_pota_bold;"+
                         "Symbol=symbol;"+
                         "Tahoma=tahoma,arial,helvetica,sans-serif;"+
                         "Terminal=terminal,monaco;"+
                         "Times New Roman=times new roman,times;"+
                         "Trebuchet MS=trebuchet ms,geneva;"+
                         "Verdana=verdana,geneva;"+
                         "Webdings=webdings;"+
                         "Wingdings=wingdings,zapf dingbats"
});
tinymcetinymce-4
13
v1n_vampire

TinyMCE 4が更新されたようですが、カスタムフォントが機能するようになりました。

CSSフォントソースについては、次のリンクを確認してください： http://www.tinymce.com/wiki.php/Configuration:content_css

カスタムフォント設定については、次のリンクを確認してください： https://www.tinymce.com/docs/configure/content-formatting/#font_formats

奇妙なことに、一部のフォントは機能し（カスタムフォントリスト名のフォントスタイルは正しい-緑）、一部は機能しません（カスタムフォントはリストされていますが、スタイルは想定されるフォントスタイルではありません-赤）

TinyMCE 4 custom font preview

7
v1n_vampire

Theme_advanced_fontsに問題があり、まだ修正されていないようです。フォントを定義するためにstyle_formatsで代替ソリューションを使用しています

tinymce.init({
        ...
        toolbar: "styleselect",
        style_formats: [
            {title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
            {title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
            {title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
            {title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
            {title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
            {title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
            {title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
            {title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
            {title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
            {title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
            {title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
            {title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
            {title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
        ],
        ...
});

結果： using style_formats for defining fonts

6
Ali Gonabadi
 tinymce.init（{
 ... 
 font_formats：
 "Default = 'myFontFace'、Arial、Helvetica、Tahoma、Verdana、sans-serif;" + 
 "Arial = arial、helvetica、sans-serif"、
 ... 
}）;
4
Krzysio

Tinymce 4では、theme_advanced_fontsの名前がfont_formatsに変更されました。

詳細は https://www.tinymce.com/docs/configure/content-formatting/#font_formats から見つけることができます。

3
channa ly

「advanced」および「simple」テーマはtinyMCE4から削除されました。追加された新しいテーマは「modern」と呼ばれます。

http://www.tinymce.com/wiki.php/Tutorial:Migration_guide_from_3.x

2
Mokarom