web-dev-qa-db-ja.com

angular-ui / ui-tinymceからtinymceOptionsを設定する方法

私のブログではui-tinymce（tinymceの角度バージョン）を使用することにしました。しかし、同じドキュメントは見つかりません。 tinymceOptionsの設定に関するリソースや提案を高く評価します。

これはgitリンクです- https://github.com/angular-ui/ui-tinymce

angularjstinymceangular-uitinymce-4
15
Abhishek Prakash

angularアプリが機能していて、エディターを構成するだけのことであると仮定すると、非角形のベースTinyMceに記載されているのと同じオプションでエディターを構成できます：- http://www.tinymce.com/wiki.php/configuration

特定のオプションをクリックすると、次のように非角度のtinymceを構成する方法が表示されます。

tinymce.init({
    resize: false
});

したがって、tinymce.init（）の代わりにui-tinymceを使用してangularで同等のカスタマイズを行うには、スコープ変数$ scope.tinymceOptions内にオプションを設定します。したがって、ユーザーがサイズを変更できないようにui-tinymceを構成し、幅/高さを400/300にし、印刷を許可し、テキストの色/背景ピッカーは次のようになります。

myAppModule.controller('MyController', function($scope) {
    $scope.tinymceOptions = {
        resize: false,
        width: 400,  // I *think* its a number and not '400' string
        height: 300,
        plugins: 'print textcolor',
        toolbar: "undo redo styleselect bold italic print forecolor backcolor"

    };
});

また、ビューは次のようになります（tinymceOptionsに注意してください）。

  <textarea ui-tinymce="tinymceOptions" ng-model="tinymceModel"></textarea>

ui-tinymceにはいくつかの組み込みプラグインが付属しているはずです。プラグインは次のドキュメントにあります http://www.tinymce.com/wiki.php/Plugins

ツールバーオプションの完全なリストについては、以下を参照してください。 http://www.tinymce.com/wiki.php/Controls

私が覚えていることから、事後はtinymceOptionsを変更することはできません。つまり、エディターが読み込まれた後、後で$ scope.tinymceOptionsの一部を変更したい場合、ui-tinymceコードがオプションをtinymce.initに渡すと思うので、これらの変更はエディターで自動的に更新されません。 （）ロード時に一度だけ。

次のようなプレーンなtinyMce javascriptフックを使用して、エディターの内容を手動で設定することなども行うことができます。

tinyMCE.activeEditor.setContent('<h1>hello world</h1><p>this is my story.  the end.</p>');

同様に、getContent（）を使用できます。以下を参照してください。 http://www.tinymce.com/wiki.php/API3:method.tinymce.Editor.getContent しかし、エディターのコンテンツにもアクセスできると思いますこの例では$ scope.tinymceModel変数を使用します。 （使用例として、ボタンをng-クリックしてエディターの内容を保存する場合、どのようにエディターの内容を取得しますか…）

しかし、より多くのangular方法は、生のtinymce javascript apiに依存するのではなく、ng-modelおよびscope変数を介してすべてを行うことです。

お役に立てば幸いです。要約すると、ui-tinymceはプレーンなTinyMceの非常に薄いラッパーです。したがって、通常のtinymceで実行できることは何でも、ほとんどの場合、角度付きバージョンで実行できます。これが、ui-tinymceをカスタマイズするためのドキュメントがそれほど多くない理由だと思いますが、この事実は新しい初心者にはすぐにはわかりません。

28
jCuga

JCugaは非常に役立つ説明を提供してくれましたが、カスタマイズされた設定を機能させることができませんでした。 TinyMCEエディターが読み込まれますが、デフォルトの設定が使用されます。他の人にも同様の問題が発生しているようです。これは、ui-tinymceディレクティブプロジェクトの issue＃158 として記録されます。私にとっての主な問題は、Angularコントローラーでセットアップオプションをドキュメントで示唆されているように定義したため、コントローラーが読み込まれないため、デフォルトのtinymceOptions変数が上書きされないことです。これを解決しましたそのようにコントローラを単に参照するだけで：

<textarea ui-tinymce="tinymceOptions" ng-controller="RichTextCtrl"></textarea>

Ng-controller参照を追加すると、デフォルト設定の代わりにカスタム設定が使用されました。

1
Nick A. Watts