3

jQuery を使用して、TinyMCE 4 を CDN からオンデマンドでロードしようとしていますが、役に立ちません。TinyMCE は (比較的) かさばるスクリプト セットであるため、ページの読み込み時に TinyMCE を読み込むのは避けたいと思います。代わりに、ユーザーがボタンをクリックしたときに読み込みをトリガーする予定です。ここに私が持っているものがあります:

HTML:

...
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script>
...

jQuery:

...
if (typeof TinyMCE == 'undefined') {
  $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function() {
    alert('Loaded!');

    tinymce.init({
      selector: 'textarea',
      plugins: [
        'autolink contextmenu image link table'
      ],
      menubar: false,
      statusbar: false,
      toolbar: false
    });
  });
}
...

インスペクタでネットワーク アクティビティを確認できるので、jQuery が実際にスクリプトを取得していることがわかります。ダイアログが表示されるので、コールバック メソッドが呼び出されますLoaded!が、TinyMCE は初期化されません。JavaScript コンソールにエラーは表示されません。

TinyMCE を初期化する方法について何か考えはありますか?

お時間をいただきありがとうございます。

4

3 に答える 3

4

Tinymce は、動的にロードするときに baseURL を解決できないため、ハードコーディングする必要があります。
以下を追加します。

if (typeof tinymce == 'undefined') {
    $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
        window.tinymce.dom.Event.domLoaded = true;
        tinymce.baseURL = "//tinymce.cachefly.net/4";
        tinymce.suffix = ".min";
        tinymce.init({
            selector: 'textarea',
            plugins: ['autolink contextmenu image link table'],
            menubar: false,
            statusbar: false,
            toolbar: false
        });
    });
}
于 2015-11-12T13:04:25.870 に答える
0

コードを次のように変更します。

if (typeof tinymce == 'undefined') {
        $.getScript('//tinymce.cachefly.net/4/tinymce.min.js', function () {
            window.tinymce.dom.Event.domLoaded = true;
            tinymce.init({
                selector: 'textarea',
                plugins: ['autolink contextmenu image link table'],
                menubar: false,
                statusbar: false,
                toolbar: false
            });
        });
    }

それは私のために働いています。詳細https://stackoverflow.com/a/13361509/392526

于 2013-07-17T11:31:38.050 に答える
0

元の質問からの引用:

TinyMCE を初期化する方法について何か考えはありますか?

JQuery.getScriptとtinyMCEに問題があり、それが問題を引き起こしていると思います。それを理解するのに1日かかったので、ここで言及する必要があると思いました.

  1. $.getScriptは、読み込んでいるスクリプトを追加および削除し、その内容をプロセスで実行します。そのため、success 関数が tinymce.init を実行するまでに、script タグはドキュメント内に存在しなくなります。
  2. 一方、 tinymce.initは、すべてのファイルへのベース URL を学習するために、その特定のスクリプト タグのドキュメントを調べます。見つからない場合は、代わりに document.location から取得します。

この小さな問題を解決するための最良の方法は何だとは言えません。私は次のトリックを見つけました（tinymce 4.2.7）：

tinymce.min.jsを開き、コメント行を検索して ...

            // Get base where the tinymce script is located

ステートメントが見つかる数行下を見てください...

            src = scripts[i].src;

... に変更する必要があります ...

            src = "http://yourdomain.com/path/to/tinymce/tinymce.min.js";

原因を特定しました。しかし、私は自分の解決策にあまり満足していません。たぶん、他の誰かがより良いものを思い付くでしょう。

于 2016-02-13T20:09:47.633 に答える