web-dev-qa-db-ja.com

tinymceエディターで新しいフォントを追加する方法

add new fontに表示されるtinymce editorのfont dropdownを編集者のテキストに適用したい。

アドバンステーマスキンフォルダーのfontsフォルダーにttfフォントを追加し、editor_template.jsに追加し、@ font-faceのcontect.cssにcssを追加します。

フォントドロップダウンにフォント名が表示されました。しかし、私が任意のテキストに適用すると、そのテキストにフォント効果はありません。

私が見つけられない実際の問題は何ですか？これがパスの問題か他のものであることを願っています...

fontstinymcefont-face
18
harsh4u

私は問題を解決しました、

以下の考えられるすべての問題を確認し、修正してTinyMCEエディターでフォントを追加してください。

  • フォントフォルダを作成します：tinymce/themes/advanced/-存在しない場合。

    1. フォントをフォントに入れる"tinymce/themes/advanced/fonts/aphrodite_pro.ttf.

    2. editor_template.js & editor_template_src.jsにフォントを追加"theme_advanced_fonts"に含める

      Ex: theme_advanced_fonts: "Aphrodite Pro=aphrodite pro"、

  • 両方のjsファイルの上で"theme_advanced_fonts"フォント名シーケンスを維持します。

最も重要な部分："Aphrodite Pro"の名前は私たちが定義します。ここで、"aphrodite pro"はフォントの名前です。

注これはTinyMCEバージョン4以降では機能しない可能性があります。新しいドキュメントを確認してください： https://www.tinymce.com/docs/configure/content-formatting/#font_formats

7
harsh4u

Google Fontsを使用して、この問題を（TinyMCEの初期化で）2行で達成しました。

content_css: ['https://fonts.googleapis.com/css?family=Gugi'],
font_formats: 'Arial Black=arial black,avant garde;Gugi=Gugi, cursive;Times New Roman=times new roman,times;',

新しいフォントはGugiと呼ばれ、Arial BlackとTimes New Romanの間に表示されます。

4
Ignacio Ara

私はPapyrusフォントをインストールしてこのソリューションを調査しましたが、（cssファイルに@ font-faceがなくても）うまく機能しますが、Mac（Lionを実行）のいくつかのブラウザーで調査したところ、SafariとFirefox、PapyrusオプションはChromeのテキストエディターのフォントドロップダウンに表示されません。他の人がChrome=関連する領域で問題を抱えていたので、これがChrome=で修正できるかどうかわかりません。

2つの.jsファイルにPapyrus = Papyrusを同じ相対位置順で追加し、フォントファイルPapyrus.TTF（図のように大文字と小文字）を使用して、説明どおりにfontsフォルダーを追加しました。

SafariとFirefoxでは、これにより、ドロップダウンにPapyrusが、エディターのテキストとWebサイトのページにPapyrusフォントが、必要に応じて正確に表示されます。

ただし、フォントは選択できないため、Chromeにはありません。

0
Brian

theme_advanced_fonts 構成パラメーターを必要に応じて設定する必要があります。フォントをエディターのiframeヘッドに追加する必要がある場合contect.cssと@font-faceが正しい方法です。

0
Thariama