web-dev-qa-db-ja.com

TinyMCEでのデフォルトのフォントファミリーの変更

ドキュメント here を使用してエディター内のデフォルトフォントを正常に変更しましたが、問題が残ります。元のデフォルトフォントは、フォントドロップダウンリストで機能しなくなりました。

元のデフォルト：Verdana
新しいデフォルト：MyCustomFont

エディターに入力すると、デフォルトでMyCustomFontフォントが表示されます。それをVerdana（元のデフォルト）に変更しようとしても、何も起こりません。 Verdana以外のフォントファミリーに変更できます。また、ドロップダウンリストでMyCustomFontを選択すると、コンテンツがインラインスタイルのスパンで囲まれていることにも気付きました。これは、元のデフォルトフォントでは発生しません（そのため、何も起こりません）。

ドキュメントの重要な部分が欠落しているように思えます。CSSでデフォルトで定義したフォントがデフォルトフォントであることをエディター（特にフォント機能）に伝える方法です。

私はかなりググってみましたが結果はありませんでした。他の誰もが、上記のドキュメントを受け入れているようです。この問題を抱えているのは私だけですか？そうでない場合は、助けてください！ :)

this 質問への回答が私の質問に回答しないことに注意してください。

javascriptcssfontstinymcefont-face
15
Paul Fleming

多分遅すぎるけど...

$('.tinymce').tinymce({
    setup : function(ed) {
        ed.onInit.add(function(ed) {
            ed.execCommand("fontName", false, "Arial");
            ed.execCommand("fontSize", false, "2");
        });
    }
});

[〜＃〜]編集[〜＃〜]

TinyMCE 4の場合、@ jason-tolliverと@georgが示すように、構文は次のとおりです。

ed.on('init', function (ed) {
    ed.target.editorCommands.execCommand("fontName", false, "Arial");
});
30
geedelur
// Init TinyMCE
$('#content').tinymce({
    setup : function(ed)
    {
        ed.on('init', function() 
        {
            this.getDoc().body.style.fontSize = '12px';
            this.getDoc().body.style.fontFamily = 'serif';
        });
    }
});
21
Radius Kuntoro

ティムスをtinymce.init({で初期化し、Radius Kuntoroを実装できない場合は、直接回答してください。

私のinitは次のようになります

tinymce.init({
            selector: '#editor',
            menubar: false,
            plugins: ['bbcode'],
            toolbar: 'undo redo | bold italic underline',    
            setup : function(ed)
            {
                ed.on('init', function() 
                {
                    this.getDoc().body.style.fontSize = '12';
                    this.getDoc().body.style.fontFamily = 'Arial';
                });
            },
        });
10
Nikolay Prokopyev

TinyMceのWebサイトを参照すると、スタイルシートを次のようにinit関数内に埋め込むことができます。

tinymce.init({
    content_css : 'path/to/style/sheet',
    body_class: 'define-class-name-without-dot-at-the-first'
});

動作し、何もセットアップする必要はありません。 tinyMCE Webページで確認してください

2
Hamed

TinyMCE 4.6.3の場合、これが適切な方法です。

tinymce.init({
    setup: function (ed) {
        ed.on('init', function (e) {
            ed.execCommand("fontName", false, "Verdana");
        });
    }
});
2
Kenneth Saey

あなたの何人かは、2つのイベントEditorManagerとAddEditorを提供するTinyMCE RemoveEditorの範囲内で作業します。 TinyMCEの新しいインスタンスが生成され、AddEditorが起動されると、エディターは実際には初期化されないため、getDoc()を呼び出すとnullが返されます。

あなたがする必要があるのは、その中にinitリスナーを作成することです。

tinyMCE.EditorManager.on('AddEditor', function (event) {
    ... other code ...

    event.editor.on('init', function() {
      this.activeEditor.getDoc().body.style.fontSize = '12px';
      this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman';
    });

    ... other code ...
  }
});

これは、少なくともバージョン4.3.8以降に当てはまります。

1
jared

ここでtinymce 4.xのすべてのソリューションに問題があり、フォントサイズもフォント名も変更できませんでした。たくさん試してみて、解決策を見つけました。まず、Jaredsの回答を確認できます。ありがとうございます。これらの2つのコマンドは、デフォルトの設定では機能しません。

tinymce.EditorManager.execCommand("fontName", false, "12px");
tinymce.EditorManager.execCommand("fonSize", false, "Arial");

デフォルトのフォントサイズは「pt」であり、「px」ではありません。したがって、表示されたfontSizeを[fontsize_formats] [1]で「px」として定義するか、「pt」で希望のサイズをそのまま渡します。 tinymce.EditorManager.execCommandでは、tinymceも満足できません。 'arial、helvetica、sans-serif'のようなfont-family全体を引き渡す必要があります。これらのコマンドは私のサイトで機能しました：

tinymce.EditorManager.execCommand("fontName", false, "12pt");
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif");
0
Jonny

Tinymce 5の場合、プラグイン配列にfullpageプラグインを追加してから、fullpage_default_font_familyという新しいキーを追加できますが、機能するかどうかはわかりません古いバージョンでも同じです。

enter image description here

0
Mohammed Ramadan

これは答えです、私にとってはうまくいきます：

ステップ1：

/ wp-content/themes/yourtheme /内のテーマディレクトリのルートでfunctions.phpを探して開き、phpタグの後に1行追加します。

add_editor_style（ 'custom-editor-style.css'）;

ステップ2：

同じディレクトリで、以下の行を含むcustom-editor-style.cssというファイルを作成します

@import url（ https://fonts.googleapis.com/css?family=Open+Sans:400,7 ）; * {font-family： 'Open Sans'、sans-serif、Arial、Helvetica;}先に進み、ブラウザーのキャッシュをクリアすると、次のようになります。

参照リンク： https://blog.phi9.com/wordpress-editor-and-its-font/

トニーンゴ

0
Tony Ngo