1

TinyMCE を使用しており、デフォルトの font-size を 12 に設定したいと考えています。

ここで、アクティブな TinyMCE エディターに変数を割り当てましたが、機能しません...

HTML コンテンツ:

<textarea id="text_message"></textarea>

JavaScript:

$("#text_message").tinymce({        
    // Location of TinyMCE script
    script_url: '/static/app/a/scripts/tinymce/jscripts/tiny_mce/tiny_mce.js'
});

var fontSize = 12;
tinyMCE.activeEditor.formatter.apply('fontSize', 
{
    value: fontSize
});
4

1 に答える 1

2

待機する必要があるイベント ステージがいくつかあります。

  1. ページは何らかの状態で準備ができています。（tinyMCE.init()場合によっては併用も可能です。）
  2. エディターが初期化され、作業する準備が整いました。

1 つ目は、次のいずれかを使用して実行できます。

$(document).ready()

または：

$(window).load()

どちらも、ページの準備に関連するイベントを処理します。$.ready()DOM が使用可能になったときにトリガーされます。ページ コンテンツが読み込まれたとき$.load()にトリガーされる場合( inline 、、およびソースなど)。どちらか一方よりも少し前に起動しますが、多くの場合、どちらでも機能します。windowimgscriptlink.ready()

以下に、グローバルに使用する他のフレームワークjQuery(function($){...});へのショートカットで$(document).ready();あり、競合を管理するのに役立つものを示します。$

第 2 段階では、次のような初期化イベント ハンドラーをエディター作成要求に追加する必要があります。

$.tinymce({ init_instance_callback: function(){ ... } });

略さずに：

$tiny.tinymce({
    // ... other stuff here, comma-delineated
    init_instance_callback: function(){
        ac = tinyMCE.activeEditor;

        ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
    }
    // ... other stuff here, comma-delineated
});

ここで、 の表示値を設定できますfont-size( の Javascript プロパティを使用します。Javascript はなどのラベルでfontSizeは許可されないため)。これは、追加するエディターが初期化されて「やあ、私は今ここにいます」と言うのを待ちます。ベント発火の通知を受け取ったら、エディター(返されるもの) を に設定できます。-font-sizebodyac.getBody()font-size: 18px

これが意味することはfont-size、エディターのコンテンツを保存することを選択すると、 は返されないということです。ほとんどの場合（初期化オプションを選択しない限り）、エディターの「本体」（文字通り、iframeの要素）の上にあります。したがって、これは「デフォルト」ですが、コンテンツ自体の中で明示的に設定されることはありません。bodyplugins : "fullpage"

Firebug アドオンがインストールされた Chrome または Firefox をお持ちの場合は、console次のフィドルをご覧ください。

http://jsfiddle.net/userdude/9PuUx/1/

これは、動作するコードのデモとフィドルのデモへのリンクです (18px変更を簡単に確認するために使用します)。

jQuery(function a($){
    var $tiny = $("#text_message"),
        fontSize = '18px',
        ac;

    $tiny.tinymce({
        mode : "textareas",
        theme : "advanced",
        theme_advanced_buttons1 : "fontsizeselect,bold,underline,italic",
        init_instance_callback: function(){
            ac = tinyMCE.activeEditor;

            ac.dom.setStyle(ac.getBody(), 'fontSize', fontSize);
        }
    });
});​

http://jsfiddle.net/userdude/9PuUx/

tinyMCE のドキュメントと API は少しわかりにくく、不足している可能性があります。また、私もそれを使用する専門家ではないため、何が起こっているのか、どのようにこれを行うのかを解釈する方法が他に 4 つまたは 5 つあることを知っています。あなたのマイレージは異なる場合があります。私がこれを行った方法に問題がある場合、または希望または期待どおりに動作しないように思われる場合は、コメントを残してお知らせください.

于 2012-09-23T20:31:22.950 に答える